微信小程序 第二天

小程序生命周期函数

属性	类型	描述	触发时机
onLaunch	function	监听小程序初始化	当小程序初始化完成时，会触发onLaunch（全局只触发一次）
onShow	function	监听小程序显示	当小程序启动，或从你后台进入前台显示，会触发onShow
onHide	function	监听小程序隐藏	当小程序从前台进入后台，会触发onHide
onError	function	错误监听函数	当小程序发生脚本错误，或者API田勇是没回触发onError并附带错误信息提示。
OnPageN otFund	function	页面不存在监听函数	当小程序出现要打开的页面不存在的情况，会附带页面信息回调该函数。
其他	any		开发者可以添加任意的函数或数据到OBject参数中，用this可以使用

代码示例

APP（{

                onLaunch:function(){

                        //初始化时执行

}

                onShow：function（）{

                        //显示或进入前台时执行

}

                onHide：function（）{

                        //隐藏或进入后台时执行

}

globalData：“i'm global data”

}）

• 在页面里调用app.js全局数据
• 在页面js文件，按如下所示方法，就可以调用到全局数据globalData                                                        var AppInstance=getApp（）                                                                                                      console.log(AppInstance.globalData)
• 不仅可以调用全局数据，还可以调用自定义的函数，但是不要调用生命周期函数

注意

        App()必须在app.js中注册，且不能注册多个

        不要在定义于APP（）内的函数中调用getApp（），使用this就可以获取app实例

        不要在onLoad的时候调用getCurrentPage（），时page还没有生成

        通过getApp（）获取实例之后，不要私自调用生命周期函数

object参数说明

属性	类型	描述
data	Object	页面的初始数据
onLoad	function	监听页面加载
onReady	function	监听页面初次渲染完成
onShow	function	监听页面显示
onHide	function	监听页面隐藏
OnUnload	function	监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底时间的处理函数
onPageScroll	function	页面滚动触发事件的吹函数
onTabltemTap	function	当前是tab页时，点击tab时触发
onShareAppMessage	function	用户单机右上角分享
其他	Any	开发者可以添加任意的函数或数据到object参数中，在页面的函数中用this可以访问

配置函数代码

page（{
    data:{
        text:'Hello World!'
    },
    onLoad:function(options){

    },

    onReady:function(options){

    },
    onShow:function(options){

    },
    onShareAppMessage:function(options){

    },
}）

onLoad页面加载：一个页面值调用一次，接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator>中的query

onShow页面显示：每次打开页面都会调用一次

onReady页面初次渲染完成：一个页面只调用一次，可和视图层进行交互，对界面的设置如wx.setNavigationBarTitle请在onReady之后设置

onHide页面隐藏：当调用navigateTo或底部tab切换时调用

onUnload页面卸载：当调用redirectTo或navigateBack的时候调用

onPullDownRefresh下拉刷新：监听用户下拉刷新事件，需要在config的windows选项中开启

enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

onShareAppMessage用户分享：只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮，用户点击“分享”按钮的时候会调用次函数。此事件需要返回一个Object参数，用于自定义分享内容。

                                          分享参数及代码

page（{
    onShareAppMessage：function（）{
        return{
            title：‘自定义分享标题’
            desc： ‘自定义分享描述’
            path： ‘/page/user?id=123’
                    //必须是以/开头的完整路径
        }，
    }
}）

页面路由管理

        ✔微信小程序的页面路由都是由微信小程序框架来管理的

        ✔框架一栈的形式维护了所有页面

        ✔栈：一种数据结构

                ▶只能在一段进行插入和删除操作

                ▶按“后进先出”的原则存储数据

        ✔小程序页面交互也·是通过栈来完成

                ▶小程序初始化时，新页面入栈

                ▶打开新页面时，新页面入栈

                ▶页面重定向时，当前页面出栈

                ▶页面返回时，页面不断出栈，知道新页面入栈

                ▶tab切换时，页面全部出栈，只留下新的tab页面

路由触发方式及页面生命周期函数

页面路由方式	触发时机	路由后页面	路由前页面
初始化	小程序打开的第一个页面	onLoad，onShow
打开新页面	调用API   wx.navigateTo或使用组件<navigator open-type="navigate"/>	onLoad，onShow	onUnload
页面重定向	调用API  wx.redirectTo或使用组件<navigator open-type="rediect"/>	onLoad，onshow	onUnload（多层页面返回，没个页面都会按顺序触发onUnload）
页面返回	调用API wx.navigateBack或用户按左上角返回按钮	onShow
tab切换	function	调用API wx.switchTab或使用组件<navigator open-type="switchTab"/> 或 用户切换tab

页面路由管理注意事项

1. navigateTo，redirectTo只能打开非tabBar页面
2. switchTab只能打开tabBar页面
3. reLaunch可以打开任意页面
4. 页面底部的tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar
5. 调用页面路由带的参数可以在目标页面的onLoad中获取

 

自定义函数

       除了初始化数据 和声明周期函数，Page中还可以定义一些特殊的函数：事件处理函数

        在渲染层的组件中可以加入事件绑定

        当达到触发事件时，就会执行Page中定义的事件处理函数

自定义函数示例代码

//wxml文件
<view bindtap= "clickMe">点我</view>

//js文件
Page（{
    clickMe：function（）{
        console.log("view tap")
    }
}）

setData 设值函数

Page.prototype.setData()设值函数用于将数据从逻辑层发送到视图层

同时改变对应的this.data 的值

setData()参数格式：

        接受一个对象，以key,value的形式表示this.data中的key对应的值改变成value。

其中key非常灵活，一数据路径的形式给出，如

<!-wxml->
<view>{{title}}</view>
<button bindtap="changeText">改变正常数据</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">改变数据</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">改变对象数据</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">增加新数据</button>

js

Page({
     data: {
        text: 'init data',
        array:[{text:'init data'}],
        object:{ text:'init data'}
     }, 
    changeText:function(){
        //this.data.text=changed data//错误，不能工作 
        this.setData({ text:'changed data'}) }, 
    changeltemInArray:function(){
        this.setData({'array[0].text':'changed data'}) }, 
    changeltemInObject:function(){
        this.setData({'object.text':'changed data'}) } , 
    addNewField:function(){
        this.setData({'newField.text:new data'}) }
})

注意事项

        直接修改this.data无效

        无法改变页面的状态

        还会造成数据不一致

        单词设置的数据不能超过1024kb，尽量避免一次性设置过多的数据