1.窗口配置
window用于设置小程序的状态栏、导航条、标题、窗口背景色。注意在app.json中配置的属性会被子window属性覆盖
然后在app.json配置
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
2.小程序文件类型每个页面由四个文件组成
小程序的页面有四个文件如下:
js文件是用来做逻辑处理
json文件用来配置东西
wxml文件和html文件一样
wxss文件和css一样是写样式的
3.小程序生命周期和小程序页面的生命周期
3.1 小程序的生命周期 App.js
App({
onLaunch: function () {
console.log('App onLaunch');
},
onShow:function (){
console.log('App onShow');
},
onHide:function(){
console.log('App onHide');
},
onError:function(){
console.log('App onError');
}
});
- 用户首次打开小程序,会触发onLauch(全局只触发一次);
- 小程序初始化完成后,触发onShow方法,监听小程序显示;
- 小程序从前台进入后台,触发onHide方法;
- 小程序从后台进入前台显示,触发onShow方法;
- 小程序后台运行一定时间,或系统资源占用过高,会被销毁;
3.2 页面生命周期
Page({
data:{
},
onLoad:function(options){
// 生命周期函数--监听页面加载
console.log("onLoad");
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
console.log("onReady");
},
onShow:function(){
// 生命周期函数--监听页面显示
console.log("onShow");
},
onHide:function(){
// 生命周期函数--监听页面隐藏
console.log("onHide");
},
onUnload:function(){
// 生命周期函数--监听页面卸载
console.log("onUnload");
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
console.log("onPullDownRefresh");
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
console.log("onReachBottom");
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
1、小程序注册完成后,加载页面,触发onLoad方法,一个页面只会调用一次;
2、页面载入后触发onShow方法,显示页面,每次打开页面都会调用一次;
3、首次显示页面,会触发onReady方法,渲染页面和样式,一个页面只会调用一次;
4、当小程序后台运行或跳转到其他页面时,触发onHide方法;
5、当小程序从后台进入前台运行或重新载入页面时,触发onShow方法;
6、当使用wx.readirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload
wx.navigateTo跳转,页面的生命周期变化
1、进入A页面:A执行onLoad()–> onShow()–> onReady();
2、A页面wx.navigateTo(B页面):A执行onHide(),B执行onLoad()–> onShow()–> onReady();
3、B页面wx.navigateBack(A页面):B执行onUnload(),A执行onShow();
4、退出A页面:A执行onUnload();
7、wx.redirectTo()是关闭当前页面,跳转到某个页面,跳转页面后不能返回上一页
wx.redirectTo跳转,页面的生命周期变化
1、进入A页面:A执行onLoad()–> onShow()–> onReady();
2、A页面wx.redirectTo(B页面):A执行onUnload(),B执行onLoad()–> onShow()–> onReady();
4.数据请求和封装
4.1数据请求
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
5.路由跳转分类和路由跳转传递参数
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层
标签跳转
<navigator url="../list/list">访问list列表页</navigator>
6.路由配置
7.点击获取参数
wxml:
<view bindtap="passQuery" data-id="{{item.id}}">点击事件传参</view>
js中:
passQuery: function(e){
// 传递的参数
let query = e.currentTarget.dataset['id'];
}
8.本地储存的几种方式
8.1同步
wx.setStorageSync(); //存储值
try {
wx.setStorageSync('key', 'value')
} catch (e) {
}
wx.setStorageSync('token', result.data.token)
8.2异步
wx.setStorage(); //存储值
wx.setStorage({
key:"key",
data:"value"})