小程序

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"})