小程序窗口配置
每一个小程序页面都可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,下面上代码
如上图所示第一张是在当前页面的json中配置的属性,第二张是在app.json中配置的属性,箭头所指的就是小程序页面的名字,再看下面的图片
可以看到在当前页面配置的页面名称覆盖了在app.json中设置的页面名称
再来说一下如何生成页面的文件以及每个页面有几个文件
如上图所示,在app.json文件中的pages属性中配置好路径再保存就回生成一个页面的文件夹,看下图
每一个生成的页面文件夹中都有4个文件
js文件是用来写事件
json文件是用来配置当前页面的
wxml文件是用来写页面内容的
wxss文件是用来写页面内容样式的就和html中的css文件一样
小程序的生命周期有那些
// 生命周期函数--监听页面加载
onLoad(options){
console.log("test1 onLoad");
},
// 生命周期函数--监听页面初次渲染完成
onReady(){
console.log("test1 onReady");
},
// 生命周期函数--监听页面显示
onShow(){
console.log("test1 onShow");
},
// 生命周期函数--监听页面隐藏
onHide(){
console.log("test1 onHide");
},
// 生命周期函数--监听页面销毁
onUnload(){
console.log("test1 onUnload");
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
console.log("test1 onPullDownRefresh");
},
// 页面上拉触底事件的处理函数
onReachBottom() {
console.log("test1 onReachBottom");
}
注意
1.不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
2.不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。
3.通过 getApp() 获取实例之后,不要私自调用生命周期函数。
页面的生命函数我没理解错的话应该是data()函数因为不确定所以如果有不同意见的话勿喷
数据请求
话不多说直接上代码
wx.request({
url: 'https://api.it120.cc/dly/banner/list', //仅为示例,并非真实的接口地址
// header: {
// 'content-type': 'application/json' // 默认值
// },
success: (res) => {
console.log(res.data)
this.setData({
list: res.data.data.splice(3, 3)
})
}
}),
上面代码就是简单的一个数据请求,url里面写入请求的接口,header请求头可以根据需要自行添加参数然后成功回调函数返回数据
路由跳转和路由跳转传递参数
先说一下路由跳转,
小程序里面的路由跳转有很多种方式,今天先说一下简单的点击事件跳转
先在要点击的标签里写入点击事件bindtap=“xxx”,这个代码里bindtap是小程序里的一个点击事件,在点击事件的后面写一个自定义属性data-id="{{xxx}}"来写要传递的参数,然后在js文件中写点击事件的函数,下面上代码
//事件处理函数
xxx: function (e) {
console.log(e.currentTarget.dataset);
let id = e.currentTarget.dataset
wx.navigateTo({
url:'../xiangqing/xiangqing?id='+id.id
})
},
在代码中可以看到我们的点击函数,里面的wx.navigateTo是小程序的固定跳转方法,这个方法有一个缺点就是他不能跳转到我们页面底部导航定义的页面
路由跳转传参的话是如何获取参数呢,其实这个点击事件有一个参数e,打印一下就可以看到里面有很多数据,其中e.currentTarget.dataset就是我们自己定义的属性参数,怎么传递到跳转后的页面呢,其实很简单就是路径拼接路径和参数名用?隔开然后拼接我们的参数值。如果有多个参数的话不同参数之间用&隔开是不是很简单
小程序数据缓存
api | 备注 |
---|---|
wx.clearStorage | 清理本地数据缓存 |
wx.clearStorageSync | wx.clearStorage 的同步版本 |
wx.getStorage | 从本地缓存中异步获取指定 key 的内容 |
wx.getStorageInfo | 异步获取当前storage的相关信息 |
wx.getStorageInfoSync | wx.getStorageInfo 的同步版本 |
wx.getStorageSync | wx.getStorage 的同步版本 |
wx.removeStorage | 从本地缓存中移除指定 key |
wx.removeStorageSync | wx.removeStorage 的同步版本 |
wx.setStorage | 将数据存储在本地缓存中指定的 key |
wx.setStorageSync | wx.setStorage 的同步版本 |