一、配置小程序
- 小程序的很多 开发需求 被规定在了 配置文件 中。
- 为什么这样做呢?
这样做可以更有利于我们的 开发效率
并且可以保证开发出来的小程序的某些 风格是比较一致 的;
比如导航栏 顶部 TabBar ,以及页面路由等等。
- 常见的配置文件有哪些呢
project.config.json 项目配置文件 , 比如项目名称、 appid 等。一般不需要手动修改。
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
sitemap.json 小程序搜索相关的。微信通过爬虫的形式获取关键字,用户可以通过关键字搜索到开发的小程序。一般不需要手动修改。
https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
app.json 全局配置;
page.json 页面配置
二、全局配置
全局配置比较多 , 我们这里讲几个比较重要的,完整的查看官方文档。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
pages: 页面路径列表
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
小程序中所有的页面都是必须在 pages 中进行注册的。
window: 全局的默认窗口展示
用户指定窗口如何展示 , 其中还包含了很多其他的属性
tabBar: 顶部 tab 栏的展示
具体属性稍后我们进行演示
三、案例实现
app.json:
{
"pages": [
"pages/home/home",
"pages/about/about",
"pages/profile/profile",
"pages/category/category"
],
"window": {
"navigationBarBackgroundColor": "#ff5777",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "购物街",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"selectedColor": "#ff5777",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "assets/tabbar/home.png",
"selectedIconPath": "assets/tabbar/home_active.png"
},{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "assets/tabbar/category.png",
"selectedIconPath": "assets/tabbar/category_active.png"
}]
}
}
效果图:
四、页面配置
1.每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
2.页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
3.页面中的优先级是大于全局的。配置可以进行覆盖。
关于 usingComponents 选项,之后会进行讲解。
五、小程序的双线程模型
六、界面渲染过程——wxml和DOM树
首先,我们需要知道,wxml等价于一棵DOM树,也可以使用一个JS对象来模拟(虚拟DOM)
七、界面渲染过程——初始化渲染
那么,WXML可以先转成JS对象,再渲染出真正的DOM树
八、界面渲染过程——数据发生变化
九、界面渲染的整体流程
- 在渲染层,宿主环境会把 WXML 转化成对应的 JS 对象
- 将 JS 对象 再次转成 真实 DOM 树 ,交由渲染层线程渲染
- 数据变化时,逻辑层提供最新的变化数据, JS 对象发生变化比较进行 diff 算法对比;
- 将最新变化的内容反映到真实的 DOM 树中,更新 UI
十、小程序的启动流程
我们一起来看一下一个小程序的启动流程,通过了解小程序的启动流程,我们就知道了自己代码的执行顺序:
app.json是加载入口。
十一、注册小程序参数解析
每个小程序都需要在 app.js 中调用 App 方法 注册小程序示例
在注册时 , 可以绑定对应的生命周期函数 , 在生命周期函数中 , 执行对应的代码
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
app.js代码示例:
App({
//生命周期函数:关闭后后台会存活一定的时间
/**
1. 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
*/
onLaunch: function () {
// 获取用户信息
console.log("小程序初始化完成:onLaunch");
//异步调用
//数据拿到之后,再进行回调的
// wx.getUserInfo({
// })
setTimeout(()=>{
const err = new Error();
throw err;
},3000)
},
/**
2. 小程序界面显示出来之后会执行的生命周期函数
3. 当小程序启动,或从后台进入前台显示,会触发 onShow
*/
onShow: function (options) {
console.log("界面显示出来:onShow")
},
/**
4. 当小程序从前台进入后台,会触发 onHide
*/
onHide: function () {
console.log("界面被隐藏时会执行:onHide")
},
/**
5. 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
*/
onError: function (msg) {
console.log("小程序中发生了一些错误时会执行:onError")
}
})
十二、注册App 时做什么
思考 :注册 App 时,我们一般会做什么呢?
- 判断小程序的 进入场景
- 监听 生命周期函数 ,在生命周期中执行对应的业务逻辑,比如在某个生命周期函数中获取微信用户的信息。
- 因为 App() 实例只有一个,并且是 全局共享的(单例对象),所以我们可以将一些共享数据放在这里。
小程序的打开场景较多:
常见的打开场景:群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
https://developers.weixin.qq.com/miniprogram/dev/reference/scene list.html
如何确定场景
在 onLaunch 和 onShow 生命周期回调函数中 会有 options 参数,其中有 scene 值
十三、获取用户信息方式
之前的wx.getUserInfo()方法已经被废弃,微信官方提供了两种新的方法。
- button 组件 将 open type 改成 getUserInfo ,并且绑定 bindgetuserinfo 事件去获取
<!-- open-type="getUserInfo"固定写法,之前的getUserInfo()已经被废弃 -->
<button size="mini" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取授权</button>
对应的js文件:
handleGetUserInfo(event) {
console.log(event)
}
- 使用 open data 组件展示用户信息
<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>
十四、保存全局变量
app.js:
//定义全局数据,名称自定义
globalData:{
name:'王强',
age:18
}
page中的js文件
// pages/home/home.js
// getApp()获取App()产生的实例对象
const app = getApp();
console.log(app.globalData)
const name = app.globalData.name;
const age = app.globalData.age;
十五、注册页面
小程序中的每个页面 , 都有一个对应的 js 文件 , 其中调用 Page 方法 注册页面示例
在注册时 , 可以绑定初始化数据、生命周期回调、事件处理函数等。
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
思考: 注册一个 Page 页面时,我们一般需要做什么呢?
- 在 生命周期函数 中发送网络请求,从服务器获取数据;
- 初始化一些数据 ,以方便被 wxml 引用展示;
- 监听 wxml 中的事件 ,绑定对应的事件函数
- 其它一些 监听
相关代码示例:
// -----------------监听页面的生命周期函数-----------------------
/**
* 生命周期函数--监听页面加载
*/
// onLoad: function (options) {
// },
//es6语法
//页面被加载出来
onLoad(){
// 网络请求
wx.request({
//需要进行配置
url: 'http://123.207.32.32:8000/recommend',
success:(res)=>{
console.log(res);
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
* 页面显示出来时
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
* 当页面隐藏起来时
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
常用方法:
十六、Page实例生命周期
补充:箭头函数的this和普通方法的this
箭头函数会一层一层地向上找,在普通html代码中,this指向window,而在微信小程序中,如果使用function(){},则不确定,可能是undefined。