一个微信小程序的简单配置

概念

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

可以理解成一套嵌套在微信里面的app，和原生app不同的是不需要下载，属于小而轻的应用。

1.开发前的准备

1. 注册账号
2. 下载开发者工具
3. 注册好后登录微信公众平台，在设置里找到开发设置，把appID保存下来，一会开发的时候需要用到

2.快速开始

1. 此时，工具有了，ID有了，接下来开始我们的撸码之旅。打开开发者工具，扫码登录后选择小程序项目，点击右下角的加号，新建项目，选择项目目录，填写appID，项目名称，写好后点击新建。
   

2.新建后你就得到了你的第一个小程序了，通过这个章节，你已经成功创建了你的第一个小程序，并且在微信客户端上体验到它流畅的表现。

3.小程序代码构成

1、app.js做为小程序的入口，里面有个App实例，每个小程序只会有一个App实例，小程序启动以后触发onLaunch函数执行，获取用户信息
2、app.json是小程序的所有全局配置，pages字段放置所有页面的路径，window字段定义所有页面的顶部背景颜色，文字颜色 详细配置请戳这里
3、app.wxss文件就是页面公用的样式，仅支持部分css选择器
4、wxml就是我们的HTML文件，常用标签为 view 、text 等，没有所谓的div、span、p一类的标签了，我们习惯称它们为组件；

• 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

• 一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

3.1 一个包含了部分配置选项的 app.json (全局配置)

(特别注意app.json里面是不能有注释的，copy记得把注释删了，不然报错 !!!)

{
//页面路由
  "pages": [
    "pages/home/home",		//数组第一项默认为首页
    "pages/kind/kind",		//种类页面
    "pages/cart/cart",		//购物车页面
    "pages/user/user"		//我的页面
  ],
  "window": {//用于设置小程序的状态栏、导航条、标题、窗口背景色。
    "navigationBarTitleText": "淘宝" //导航栏标题文字内容
    "navigationBarBackgroundColor": "#3CB371",//导航栏背景颜色
    "navigationBarTextStyle": "black",//导航栏字体颜色
    "backgroundColor": "#FF0000",//窗口背景颜色
     "backgroundTextStyle": "dark",//下拉 loading 的样式，仅支持 dark / light
    "enablePullDownRefresh": true//是否开启全局的下拉刷新。
  },
  // tab导航条
 "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",//页面路径，必须在 pages 中先定义
        "text": "首页",//tab 上按钮文字
        "iconPath": "static/images/home.png",//tab图片路径
        "selectedIconPath": "static/images/home_active.png"//tab被选中图片路径
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "种类",
        "iconPath": "static/images/kind.png",
        "selectedIconPath": "static/images/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/images/cart.png",
        "selectedIconPath": "static/images/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/images/user.png",
        "selectedIconPath": "static/images/user_active.png"
      }
    ]
  },
   "networkTimeout": {		//各类网络请求的超时时间，单位均为毫秒。
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,//是否开启debug模式
  "navigateToMiniProgramAppIdList": [		//需要跳转的小程序
    "wxe5f52902cf4de896"
  ]
}

**

1. pages配置
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

2. window配置
用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window": {//用于设置小程序的状态栏、导航条、标题、窗口背景色。
    "navigationBarTitleText": "淘宝" //导航栏标题文字内容
    "navigationBarBackgroundColor": "#3CB371",//导航栏背景颜色(绿)
    "navigationBarTextStyle": "black",//导航栏字体颜色
    "backgroundColor": "#FF0000",//窗口背景颜色(红)
     "backgroundTextStyle": "dark",//下拉 loading 的样式，仅支持 dark / light
    "enablePullDownRefresh": true//是否开启全局的下拉刷新。
  },

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	微信客户端 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)

3. tabBar配置
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

  // tab导航条
 "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",//页面路径，必须在 pages 中先定义
        "text": "首页",//tab 上按钮文字
        "iconPath": "static/images/home.png",//tab图片路径
        "selectedIconPath": "static/images/home_active.png"//tab被选中图片路径
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "种类",
        "iconPath": "static/images/kind.png",
        "selectedIconPath": "static/images/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/images/cart.png",
        "selectedIconPath": "static/images/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/images/user.png",
        "selectedIconPath": "static/images/user_active.png"
      }
    ]
  },

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

4. networkTimeout
各类网络请求的超时时间，单位均为毫秒。

属性	类型	必填	默认值	说明
request	number	否	60000	wx.request 的超时时间，单位：毫秒。
connectSocket	number	否	60000	wx.connectSocket 的超时时间，单位：毫秒。
uploadFile	number	否	60000	wx.uploadFile 的超时时间，单位：毫秒。
downloadFile	number	否	60000	wx.downloadFile 的超时时间，单位：毫秒。

5. debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
6. functionalPages
插件所有者小程序需要设置这一项来启用插件功能页。

7. requiredBackgroundModes
申明需要后台运行的能力，类型为数组。目前支持以下项目：

• audio: 后台音乐播放
• location: 后台定位
  如:

{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio", "location"]
}

注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。

8. navigateToMiniProgramAppIdList
当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。

9. usingComponents
在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。

完整配置项说明请参考小程序全局配置

• 小程序配置文件app.js内容

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

详细的参数含义和使用请参考 App文档。