微信小程序的自带开发框架就是MINA，虽然市场中还有很多小程序的开发框架，但是考虑入门，还是以微信小程序自带的MINA框架为入口，开启微信小程序开发学习的旅程。这系列的博客旨在学习笔记的记录，一方面是加深自己的记忆，另一方面就是后期自己看着方便。

配置文件之app.json

这是文件是做项目的全局配置，包括项目的页面列表、窗口的基本样式以及tabBar的相关配置。

窗口的基本配置

全局配置有一个配置项为window，此配置项中有很多的属性，分别见下表：

属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色

navigationBarTextStyle

string

white

导航栏标题颜色，仅支持 black / white

navigationBarTitleText

string

导航栏标题文字内容

navigationStyle

string

default

导航栏样式，仅支持以下值：

default 默认样式

custom 自定义导航栏

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

string

dark

下拉 loading 的样式，仅支持 dark / light

enablePullDownRefresh

boolean

false

是否开启全局的下拉刷新

onReachBottomDistance

number

50

页面上拉触底事件触发时距页面底部距离

上面就是整理的主要几个属性，这些属性理解上都不是很难，但是下面几个做一下主要的说明。

  • backgroundTextStyle：下拉loading的样式，这个常和enablePullDownRefresh联合使用
  • enablePullDownRefresh：下拉触发刷新操作，对应的方法是Page.onPullDownRefresh，如需对页面某些数据进行刷新，就可以考虑在该方法里面写入请求后台数据的逻辑
  • onReachBottomDistance：上拉触底，表示当页面上拉到一定距离，触发触底事件，常在列表下一页加载上使用，对应触发的方法是Page.onPullDownRefresh。

配置json格式如下：

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

页面列表的设置

在全局配置中有一个配置项是pages，其类型是一个数组，数组里面都是页面的路径配置。

配置格式如下：

{
    "pages":[
        "pages/index/index",
         "pages/my/my",
         "pages/order/order"
    ]
}

这里有以下几点说明：

  • 在这个数组中，第一个页面就是对应的启动页面，如果在开发调试过程中需要直接进入该页面，则就可以将其放在数组的第一位置
  • 页面都是写在pages目录下的，一个页面对应一个文件夹，文件夹中对应四个文件，分别是.json、.wxml、.js、.wxss，分别对应的是配置文件、页面html文件、页面js代码以及页面样式文件
  • 在微信小程序开发工具上开发的时候可以直接在数组中添加页面路径，Ctrl+s保存后，开发工具会自动在pages目录下创建对应的页面文件夹和四个文件。

tabBar配置

这个配置很重要，也很简单，简单看一下基本的格式：

{
    "tabBar":{
        ""
        "list":[
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/icon/index.png",
                "selectedIconPath":"static/icon/selected-index.png"
            },
            {
                "text":"我的",
                "pagePath":"pages/my/my",
                "iconPath":"static/icon/my.png",
                "selectedIconPath":"static/icon/selected-my.png"
            }
        ]
    }
}

tabBar内的选项配置，使用过小程序或者APP的，对这个都不陌生。

  • pagePath：是对应页面地址
  • iconPath：表示的是图标
  • selectedIconPath：表示的是tabBar选项被选中后的图标，在使用微信的时候，选择对应的选项，图标的颜色样式就会发生变化，这就是通过selectedIconPath来实现的
  • 注意list里页面的个数至少2个，最多5个

tabBar下除了list这个核心的配置项外，还有其他配置项，如下表：

属性

类型

默认值

描述

color

HexColor

tab 上的文字默认颜色，仅支持十六进制颜色

selectedColor

HexColor

tab 上的文字选中时的颜色，仅支持十六进制颜色

backgroundColor

HexColor

tab 的背景色，仅支持十六进制颜色

borderStyle

string

black

tabbar 上边框的颜色， 仅支持 black / white

position

string

bottom

tabBar 的位置，仅支持 bottom / top

上面的属性做一个如下说明：

  • color、selectedColor和上面的iconPath和selectedIconPath是对应的，在没有被选中的时候，文字的颜色使用的是color，图标使用的是iconPath；当被选中后，对应的文字颜色就变成了selectColor，图标使用selectedIconPath
  • borderStyle指的是整个tabBar的背景色，目前仅支持两个值，分别是black和white，默认是black
  • position指的是tabBar的位置，可以放在底部，也可以放在顶部，当放在顶部的时候，图标将会失效，仅显示文字

页面配置之page.json

在不同的页面此json文件的名称不同，在index页面下，对应的json文件就是index.json。页面配置项中的属性基本和全局配置的window内属性相同。但也有多出来的配置项。

  • pageOrientation：屏幕旋转设置，支持 auto / portrait / landscape，一般使用的较少
  • usingComponents：这个是极其重要的一个属性，引入页面使用的自定义组件，书写格式如下:
{
    "usingComponents":{
        "navigate":"../../components/navigate/navigate",
        "banner":"../../components/banner/banner"
    }
}