微信小程序学习笔记

一. 微信小程序的项目结构

1. .json 后缀的 JSON 配置文件

1.1 小程序配置 app.json

app.json是对当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时、底部tab等，常见的配置关键字如下，更多的配置见小程序配置app.json

• pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
• window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

1.2 工具配置 project.config.json

开发者在开发工具上做的个性化配置都会被记录在这个.json文件中，导入一个工程时，工具会根据这个文件设置对应的个性化设置。文件中的key值对应的作用还有待查询。

1.3 页面配置 page.json

每个页面的个性化配置信息都存放在页面对应的.json文件中，配置内容和app.json中key值为window一样，page.json中的配置项会覆盖app.json中window的配置项，更多的配置见小程序配置app.json

2. .wxml 后缀的页面结构文件

类似于.html文件，由标签、属性等构成，不一样的地方如下：

• 使用的标签不一样，微信小程序框架为我们提供了新的标签，更多详细的组件
• 小程序提倡把渲染和逻辑分开，简单地说就是不让JS操作DOM，只负责管理状态，然后再通过一种模板语法来描述状态和界面结构的关系即可。通过{{}}把一个变量绑定到一个标签上，但是只有变量还是不够的，所以小程序还提供了if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达，更多详细的控制能力

3. .wxss 后缀的页面样式文件

.wxss有css的大部分特性，同时.wxss也做了扩展和修改，详细的.wxss

• 新增尺寸单位rpx，不需要开发者去做换算，小程序底层会去做换算
• 提供了全局样式和局部样式，和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
• 此外 WXSS 仅支持部分 CSS 选择器

4. .js 后缀的页面交互逻辑

响应用户交互、逻辑代码都存放在.js中。同时微信还提供了很多API，可以让开发者可以很方便的调用起微信提供的功能，如获取用户信息，本地存储，支付功能等，更详细的API文档.

5. 小程序文件结构

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

5.1 app文件结构

• app.js：小程序逻辑
• app.json：小程序的公共配置
• app.wxss：小程序的公共样式表

5.2 page文件结构

• page.json：页面配置
• page.js：页面逻辑
• page.wxml：页面结构
• page.wxss：页面样式
  注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

二. 微信小程序的能力

1. 小程序启动

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

2. 小程序的页面加载

微信客户端会先根据 page.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 page.js。

3. 小程序的注册

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数(如下)等。此外开发者还可以添加任意的函数或数据到 Object 参数中，用this可以访问。

• onLaunch：生命周期函数--监听小程序初始化，当小程序初始化完成时，会触发 onLaunch（全局只触发一次），函数参数
• onShow：生命周期函数--监听小程序显示，当小程序启动，或从后台进入前台显示，会触发 onShow，函数参数
• onHide：生命周期函数--监听小程序隐藏，当小程序从前台进入后台，会触发 onHide
• onError：错误监听函数，当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
• onPageNotFound：页面不存在监听函数，当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数，函数参数

全局的getApp()函数可以用来获取到小程序实例，但是需要注意：

• 不要在定义于App()内的函数中调用getApp()，使用this就可以拿到app实例。
• 通过getApp()获取实例之后，不要私自调用生命周期函数。

4. 小程序页面注册

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

4.1 初始数据

• data：页面的初始数据
  初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

4.2 生命周期

• onLoad: 页面加载，一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
• onShow: 页面显示，每次打开页面都会调用一次。
• onReady: 页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
• onHide: 页面隐藏，当navigateTo或底部tab切换时调用。
• onUnload: 页面卸载，当redirectTo或navigateBack的时候调用。
  page生命周期

4.3 页面相关事件处理函数

• onPullDownRefresh: 下拉刷新，监听用户下拉刷新事件，当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
• onReachBottom: 上拉触底，监听用户上拉触底事件，在触发距离内滑动期间，本事件只会被触发一次。
• onPageScroll: 页面滚动，监听用户滑动页面事件，页面在垂直距离上滚动的距离会包含在函数的对象参数的scrollTop字段中。
• onShareAppMessage: 用户转发，只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，用户点击转发按钮的时候会调用。

三. 微信小程序的页面路由

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

四. 微信小程序模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过module.exports 或者 exports 才能对外暴露接口。(推荐使用module.exports暴露模块接口)，​在需要使用这些模块的文件中，使用 require(path)将公共代码引入(require 暂时不支持绝对路径)。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

// page.js
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})