学习地址:https://www.bilibili.com/video/BV1sx411z77P
笔记01:https://blog.csdn.net/weixin_44949135/article/details/107181721【目录结构详解、事件、input、scroll-view】
笔记02:https://blog.csdn.net/weixin_44949135/article/details/107191256【配置详解(页面、窗口、tabBar、debug)】
【p01-p12工程文件】【链接:https://pan.baidu.com/s/1TONiLPIOX59nh1EqwfjQLA 提取码:zjxs】
目 录
P9 3.1微信小程序的配置详解
- app的页面配置
- app的窗口配置
- app的tabBar配置
- 网络超时配置及debug开启配置
- 页面配置
小程序根目录下的
app.json
文件用来对微信小程序进行全局配置。
1、app的页面配置
pages
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的
.json
,.js
,.wxml
,.wxss
四个文件进行处理。数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。
2、app的窗口配置
3、app的tabBar配置
4、网络超时配置
只影响http请求,只影响发起请求的API。
5、debug开启配置
6、页面配置
.json:主要是为了覆盖app.json。
.wxss:主要是为了覆盖app.wxss。
P10 微信小程序的生命周期与app对象的使用
1、APP的生命周期
手机来电,切换到 后台。
前后台切换 --> onShow()、onHide()方法
onShow()、onLaunch()作用:游戏场景切换,暂停xxx行为。
【onHide():暂停游戏行为、释放资源;onShow():开启游戏行为、读取资源】
2、APP对象的使用
全局方法、全局变量:每个页面都可以使用。
P11 3.2.2微信小程序页面的生命周期和参数传递
小程序页面与APP对象详解
1、页面的生命周期
2、页面跳转的数据传递
2.1、页面跳转---wx.navigateTo({})
返回的时候,调用onShow()方法。
2.2、页面跳转---wx.redirectTo({})
使用 wx.redirectTo ,上一个页面直接被卸载(onUnload),无返回键。
2.3、页面跳转---tabBar
2.4、页面跳转---switchTab
switchTab 后面,不能加参数,不能传递数据。
2.5、页面跳转---传递数据
去掉tabBar,点击“文章1”可以进行跳转。
"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "详情" } ] },
2.6、页面跳转---navigator
<navigator url="../logs/logs?id=100" redirect></navigator>
页面传值:多个参数 &
<navigator url="../logs/logs?id=100&title=标题" redirect></navigator>
接收参数:
onLoad: function (options) {
console.log("---logs page onLoad---");
console.log(options);
console.log("options : " + options);
this.setData({
articleId: options.id
})
},
P12 3.3综合案例 - 用户登录
index.js 页面初始化代码
Page({
//页面的初始数据
data: {
},
//生命周期函数--监听页面加载
onLoad: function (options) {
},
//生命周期函数--监听页面初次渲染完成
onReady: function () {
},
//生命周期函数--监听页面显示
onShow: function () {
},
//生命周期函数--监听页面隐藏
onHide: function () {
},
//生命周期函数--监听页面卸载
onUnload: function () {
},
//页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {
},
//页面上拉触底事件的处理函数
onReachBottom: function () {
},
//用户点击右上角分享
onShareAppMessage: function () {
}
})
app.js 页面初始化代码
App({
//当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onLaunch: function () {
},
//当小程序启动,或从后台进入前台显示,会触发 onShow
onShow: function (options) {
},
//当小程序从前台进入后台,会触发 onHide
onHide: function () {
},
//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
onError: function (msg) {
}
})