小程序之注册配置详解

本文主要介绍微信小程序的框架页面结构。

小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
一个小程序主体部分由三个文件组成，必须放在项目根目录下

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

配置

app.json 文件对微信小程序进行全局配置，决定页面文件的路径，窗口表现，设置网络超时时间，设置多个 tab 等。

{
  "pages": [
    "page/index/index",
    "page/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "page/index/index",
      "text": "首页"
    }, {
      "pagePath": "page/logs/logs",
      "text": "日志"}]
    },
    "networkTimeout": {
      "request": 10000,
      "downloadFile": 10000
    },
    "debug": true
}

app.json 配置项列表

pages
接受一个字符串数组，来指定小程序由那些页面组成，每一项代表页面的信息，数组的第一项代表小程序的初始页面。
小程序新增、减少页面，都需要对 pages 数组进行修改。
window 用于设置小程序的状态栏、导航条、标题、窗口背景色

页面.json 只能设置 window 相关的配置项，以决定本页面窗口表现，所以无需写 window 这个关键字。

tabBar
如果我们小程序是一个多 tab 应用，那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
tabBar 是一个数组，只能配置最少 2 个，最多 5 个 tab，tab 按数组的顺序排序。

其中 list 接受一个数组，数组中的每一项都是一个对象，其属性如下:

networkTimeout
设置各种网络请求超时时间

debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发 。

小程序框架与 MVC 简述

小程序框架

小程序划分为视图层（View）和逻辑层（AppService）的两层框架，并在视图层和逻辑层之间提供数据传输和事件系统。严格意义上，按照 MVC 的框架模式而言，小程序的逻辑层包含 MVC 中的 Model 以及 Controller.

MVC 简述

View 有两层作用，其一是负责从 Model层接收、渲染和显示数据;其二是负责接受和传递数据到 Controller 层；
Controller 也有两层作用，其一是接收 View 层抑或是请求 URL传递的表单数据，并对表单数据进行控制校验，其二是处理用户交互体验效果，比如在 View 进行动画效果设置、滚动加载体验等；
Model 层,负责接受 Controller传输的数据并对数据进行逻辑处理后返回给 View 层。

MVC 优点

其一，分层的设计有助于管理复杂的应用程序，将数据逻辑与界面显示分离，有助于后期针对相应的层级维护和管理；
其二，简化分组开发，能够独让负责不同业务模块的开发者进行模块化功能开发，并行推进项目进度.
小程序入口文件 app.js、 app.json 以及 app.wxss.

app.js,小程序入口配置
 App({
 onLaunch: function() {
 //小程序生命周期初始化，全局加载(调用)一次，一般是用于程序启动时加载应用共享资源，
 },
 onShow: function() {
 //当小程序启动，或从`后台进入前台显示`，会触发 onShow，监听小程序显示，会被调用多次
 },
 onHide: function() { //当小程序从前台进入后台时，会触发 onHide 事件，会被调用多次

},
 globalData: 'I am global data'
})

前台：指重新打开小程序显示，即从退出当前应用，用户又打开该应用
后台：是指退出小程序应用（并非完全退出或关闭），相当于按手机返回键退出当前应用，但是小程序还在所谓的【后台】运行
App() 必须在 app.js 中注册，且不能注册多个
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成
通过 getApp() 获取实例之后，不要私自调用生命周期函数,即onLaunch,onShow,onHide这三个周期函数,自定义的函数是不属于周期函数范围内
app.json,小程序应用模块的路由配置、窗口以及 Tab 配置，#仅作为注释说明，实际配置应该去掉

 {
 "pages":[
 "page/index/index", ##page配置的数组的第一项作为小程序的初始页面 
 "page/logs/logs"
 ],

  "window":{
    # 配置导航条
    "navigationBarBackgroundColor":"#9084cc", ##背景颜色，HexColor 类型（16 进制颜色值）
    "navigationBarTextStyle":"dark",##标题颜色，仅支持 dark/white
    "navigationBarTitleText":"我的订单",##标题内容,String

    # 配置窗口
    "backgroundColor":"#909902",##窗口背景色，HexColor 类型
    "backgroundTextStyle":"dark",##下拉背景字体,String,仅支持 dark/light
    "enablePullDownRefresh"true，##是否开启下拉刷新
  },
  "tabBar":{
    "color":"", ##tab 上的文字颜色
    "selectedColor":"", ##tab 上的文字选中时的颜色
    "backgroundColor":"", ##tab 的背景色
    "borderStyle":"", ##tabbar 上边框的颜色， 仅支持 black/white

## tab 的列表，最少 2 个、最多 5 个 tab
    "list":[
     {
       "pagePath":"", ##页面路径，必须在 pages 中先定义
       "text":"", ##tab 上按钮文字
       "iconPath":"", ##图片路径，icon 大小限制为 40kb
       "selectedIconPath":"" ##选中时的图片路径，icon 大小限制为 40kb
     },
    ]
  },
## 时间单位 「毫秒」
  "networkTimeout":{
    "request":3000, ## wx.request 的超时时间
    "connectSocket":5000, ## wx.connectSocket 的超时时间
    "uploadFile":10000, ## wx.uploadFile 的超时时间
    "downloadFile":10000 ## wx.downloadFile 的超时时间
  },

## 开发者工具的控制台面板，调试信息以 info 的形式给出，
## 其信息有 Page 的注册，页面路由，数据更新，事件触发
 "debug":true
}

pages 是属于 Array 类型，Array 的每一项都是 url 的字符串，url 为相对根目录下的 module 路径，无需扩展名，框架会自动加载 module 下的js、 wxml、 wxss、 json 文件
配置的 pages 下的 module 的 js,wxss,json，wxml必须为相同的名称，框架会根据 module 名称自动加载上述的扩展名文件
tab 上的 list，最少 2 个、最多 5 个

**app.wxss **

app.wxss
 /**定义的样式将应用到小程序所有的模块中**/
 view,image,scroll-view,text{
 margin: 0px;
 padding: 0px;
 }
 .headerView{
 width: 100%;
 height: 32px;
 background: floralwhite;
 }

其他样式

尺寸单位

• responsive pixel,即rpx,响应式像素，是一种能够提供各种设备都能阅读的一种设计方法,在微信小程序中，以 iphone6 作为屏幕标准，1rpx = 0.5px,微信小程序在底层会根据我们设定的 px来对屏幕自适应，有助于开发者更集中于开发，应用场景在设置间距、长宽等
• root em,即 rem，是 css3 新定义的一种长度单位，相对于页面定义的 html 根元素来调整大小，与 em 相对父元素调整大小更兼具相对和绝对字体调整大小的优势，在微信小程序中，1rem = 750/20 rpx = 75px，规定标准的 iphone6 的宽度是 20rem，应用场景在于设置字体大小

样式导入
使用@import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束
框架组件上支持使用 style、 class 属性来控制组件的样式

原文链接:http://layjoy.space/2017/01/14/wechat-2/