微信小程序代码结构和框架调用流程详解

微信小程序是如何工作的？

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

微信小程序官网

本节内容概要

目录结构
启动流程
全局配置
逻辑层
视图层

目录结构

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

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

app.js 必备文件，存放小程序逻辑

app.json 必备文件，存放小程序公共配置

app.wxss 存放小程序公共样式表

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

js 必备文件，存放页面逻辑
wxml 必备文件，存放页面结构
json 存放页面配置
wxss 存放页面样式表

启动流程

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

 App({
  onLaunch(options) {
//小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
  },
  onShow(options) {
//小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
  },
  onHide() {
//小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
  },
  onError(msg) {
  console.log(msg)
 // 小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
  },
  globalData: 'I am global data'
 })

Page(Object) 构造器

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

// index.js
Page({
  data: {
    text: 'This is page data.'
  },
  onLoad(options) {
    // Do some initialize when page load.
  },
  onReady() {
    // Do something when page ready.
  },
  onShow() {
    // Do something when page show.
  },
  onHide() {
    // Do something when page hide.
  },
  onUnload() {
    // Do something when page close.
  },
  onPullDownRefresh() {
    // Do something when pull down.
  },
  onReachBottom() {
    // Do something when page reach bottom.
  },
  onShareAppMessage() {
    // return custom share data when user share.
  },
  onPageScroll() {
    // Do something when page scroll
  },
  onResize() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function () {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

Object 参数说明：

data 页面的初始数据
onLoad 生命周期回调—监听页面加载
onShow 生命周期回调—监听页面显示
onReady 生命周期回调—监听页面初次渲染完成
onHide 生命周期回调—监听页面隐藏
onUnload 生命周期回调—监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数
onResize 页面尺寸改变时触发，详见响应显示区域变化
onTabItemTap 当前是 tab 页时，点击 tab 时触发

全局配置

小程序配置在app.json文件中进行，具体如下：

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

配置说明：

pages 页面路径列表
window 全局的默认窗口表现
tabBar 底部 tab 栏的表现
networkTimeout 网络超时时间
debug 是否开启 debug 模式，默认关闭
functionalPages 是否启用插件功能页，默认关闭
subpackages 分包结构配置
workers 代码放置的目录
requiredBackgroundModes 需要在后台使用的能力，如「音乐播放」

逻辑层

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。

总结

本小节主要介绍了微信小程序的代码结构和框架调用流程，希望你能掌握：

目录结构
启动流程
全局配置
逻辑层
视图层

剧透：下一节我们会重点讲解小程序的视图容器和文本组件功能