一. 微信小程序的项目结构
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')
}
})
网友评论