一. 微信小程序的项目结构
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
的时候调用。
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')
}
})