微信小程序,在之前的一次比赛的备赛中曾学习过一段时间,后来因为投资方撤资,不了了之,但是还是收获了一点语法知识。现在再学习一遍,便有了更深的印象。
从组成来看小程序整体由三大部分组成,分别为配置部分,逻辑部分,视图部分,配置部分就是json文件,逻辑部分就是js与wxs文件,视图部分由wxml与wxss来构成。
从层次的角度来看,小程序可以分为两层的关系,分别为代表小程序整体的对象app,与小程序中每个页面的对象page。
工作原理:简单的来看,每个小程序被打开时,先将这个app下载到了本地上,然后读取了app.json文件中的配置信息,再按照js中的信息生成了app对象,接着按照app.json中的第一个页面路径打开一个新的页面。新的页面也是先加载了page.json这个配置文件,然后按照page.js中的信息生成了这个页面的对象。最后结合页面对象中的数据,json的配置信息,wxss的样式将page.wxml填充之后,用户就可以看到小程序的第一个页面。
每个页面的数据集合都是一个对象,所以相对与每个页面,都有它在不同的情况下处理数据的对策,也就是生命周期函数,比如说onload()方法内对应的就是页面在加载时要进行的数据操作,onshow()就是页面被显示的时候,会进行的操作。
具体的见下表
| 属性 | 类型 | 描述 |
|---|---|---|
| data | Object | 页面的初始数据 |
| onLoad | Function | 生命周期函数--监听页面加载 |
| onReady | Function | 生命周期函数--监听页面初次渲染完成 |
| onShow | Function | 生命周期函数--监听页面显示 |
| onHide | Function | 生命周期函数--监听页面隐藏 |
| onUnload | Function | 生命周期函数--监听页面卸载 |
| onPullDownRefresh | Function | 页面相关事件处理函数--监听用户下拉动作 |
| onReachBottom | Function | 页面上拉触底事件的处理函数 |
| onShareAppMessage | Function | 用户点击右上角转发 |
| onPageScroll | Function | 页面滚动触发事件的处理函数 |
| onTabItemTap | Function | 当前是 tab 页时,点击 tab 时触发 |
| 其他 | Any | 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this |
除了这些所谓的生命周期函数,开发者还可以定义一些自己的变量或者方法来处理数据。
App.js中主要有这个app()方法
在app对象被创建时,就会调用这个方法,也可以理解为app()方法中的object对象即为app的对象。
page.js同上
在除app()与page()以外,可以调用getApp(),获取app对象的实例
也可以调用getCourrentPages()获取一个数组,数组内时所有页面栈内的页面对象。














