3、小程序框架页面（上）

框架页面文件Page()

小程序中一个框架页面包含4个文件,同一框架页面的这4个文件必须具有相同的路径与文件名,进入小程序时或页面跳转时,小程序会根据 app json配置的路径找到对应的资源进行渲染。

与框架主体文件相比框架页面文件多了一种页面结构文件,其余3个文件和框架主体文件的功能类同,下面我们一 一讲解每个文件作用。

1. .js文件: 页面逻辑文件,必要项

2. .wxm文件: 页面结构文件,必要项

3. .wxss文件: 页面样式文件

4. .json文件: 页面配置文件

页面配置文件 .json

页面配置文件和框架配置文件一样，是一个json文件，而不同的是，页面配置文件时非必要存在的，同时页面配置文件的配置项只有window，控制当前页面的窗口表现，window属性和app.json一致。

页面渲染的时候，页面中的window配置会覆盖app.json中的相同配置项。

由于只有window相关属性，所以编写时只需要直接写出属性，不用写window这个键。

{
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText":"我的页面",
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "light"
}

页面的逻辑文件 .js (JavaScript)

页面逻辑文件主要功能有:设置初始化数据、注册当前页面生命周期函数、注册事件处理函数等。

小程序的逻辑层文件是 JavaScript文件,所有的逻辑文件包括 app.js,最终将会打包成一个js文件,在小程序启动时运行,直到小程序销毁。

由于avascript逻辑文件是运行在纯 JavaScript引擎中而并非运行在浏览器中,一些浏览器提供的特有对象,如 document、 window等,在小程序中都无法使用,同理,一些基于 document、 window的框架如: jQuery、 Zepto都不能在小程序中使用,同时我们不能通过操作DOM改变页面,这时需要我们将面向DOM操作的编程思跻转化为数据绑定和事件响应。

注册页面Page()

在页面逻辑文件中需要通过Page()函数注册页面,指定页面的初始数据、生命周期函数、事件处理函数等,参数为一个 Object对象,其属性如下:

data:页面的初始数据,数据格式必须是可转成JSON格式的对象类型。当页面第一次渲染时,data会以JSON的形式由逻辑层传至渲染层,渲染层可以通过WXML对数据进行绑定。

onLoad:生命周期函数,页面加载时触发。一个页面只会调用一次,接受页面参数,可以获取wx.navigateTo、wx. redirectTo以及中的 query参数

onShow:生命周期函数,页面显示时触发。每次打开页面都会调用一次。

onReady:生命周期函数,页面初次渲染完成时触发。一个页面生命周期中只会调用一次,代表当前页面已经准备安当,可以和视图层进行交互。一些对界面的设置,操作需要在页面准备妥当后调用,如wx. setNavigationBarTitleonReady,需要在之后设置。

onHide:生命周期函数,页面隐藏时触发。

onUnload:生命周期函数,页面卸载时触发。

onPullDownRefresh:页面相关时间处理函数,用户下拉时触发。使用时需要将app.json配置中 window enablePulDownRefresh属性设置为true。当处理完数据刷新后,可以调用wx. stopPul DownRefresh方法停止当前页面的下拉刷新。

onReachBottom:页面下拉触底事件的处理函数。

其他:开发者可以添加任意的函数或数据到 Object参数中,可以用this访问这些函数和数据。

示例代码

// 获取app实例
var app getApp();
Page({
    data:{		
        // 页面初始化数据
        count: 0
    },
    onLoad: function(){
        // 页面加载时执行
    },
    onShow: function (){
        // 页面打开时执行
        console.og(app.globalData)
    },
    onReady: function(){
        // 页面初次渲染完成执行,一个页面只会调用一次
    },
    onHide: function (){
        // 页面隐藏时执行
    },
    onUnload: function(){
        // 页面卸载时执行
    },
    onPullDownRefresh: function (){
        // 下拉刷新时执行
    }，
    onReachBottom: function (){
    	// 下拉触底时执行
	},
    // 自定义函数,可与渲染层中的组件进行事件绑定
    countclick: function(){
        // 触发视图层重新渲染
        this. setData({
            count: this.data.count +1
        });
    },
    // 自定义数据
    customData:{
       name:'微信'
    }
})

生命周期

小程序初始化:默认页面入栈,依次触发默认页面onload、onShow、onReady方法。

打开新页面:新页面入栈,依次触发新页面 onload、onShow、onReady方法。

页面重定向:当前页面出栈并卸载,触发当前页面 onUnload方法,新页面入栈,触发新页面 onLoad、 onShow、onReady方法。

页面返回:页面不断出栈并卸载,触发当前弹出页面 onUnload方法,直到返回目标页面,新页面入栈,触发新页面onShow方法。

Tab切换:当前页面出栈但不卸载,仅触发 onside方法,新页面入栈,如果当前页面是新加载的,触发。 onload、onShow、onReady方法,如果当前页面已加载过,仅触发 onShow方法。

程序从前台到后台:触发当前页面onHide方法,触发App onHide方法。

程序从后台到前台:触发小程序onShow方法,触发页面onShow方法。

• 在页面的生命周期中只会触发onShow和onLoad方法
• 只有加载和卸载时才会触发onLoad、onReady和onUnload方法
• 而触发页面卸载只有页面返回和页面重定向两种操作

获取当前页面栈

getcurrentPages()函数便是用于获取当前页面栈的实例,页面栈以数组形式按栈顺序给出,第一个元素为首页,最后一个元素为当前页面。不要尝试修改页面栈,这会导致路由以及页面状态错误

/*获取页面栈*/
var pages getcurrentpages();

/*获取当前页面对象*/
var currentPage = pages[pages.length -1]

事件处理函数

页面对象中注册的函数可以和视图层中的组件进行绑定,当达到触发条件时,就会执行Page中定义的相应事件,这类自定义函数统称为事件处理函数。

小程序中组件的事件分为通用事件和特殊事件。

1. 添加事件

   bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

   <view bindtap = "myevent">点击执行逻辑层事件</view>
   

2. 事件处理方法

   Page({
       // 与上面定义的bintap的值对应
       myevent: function(){
           console.1og('点击了view')
       }
   })
   

触发视图层渲染

• 页面首次加载时,框架会结合初始化数据渲染页面,在逻辑层中则需主动调用 Page. prototype. setData()方法,而不能直接修改Page的data值,这样不仅无法触发视图层渲染,还会造成数据不一致。

• 当 Page. prototype. setData()被调用时,会将数据从逻辑层发送到视图层触发视图层重绘,同时会修改Page的data值。 setData()接受一个 Object对象参数,方法会自动将 this.data中的key对应的值变成 Object参数中key对应的值。

• 当 Object参数key对应的值和 this.data中key对应的值一致时,将不会触发视图层渲染。在项目中我们一定要保证视图层和逻辑层的数据一致。

1. 视图层 index.wxml

<view>{{text}}</view>
<button bindtap="changeText">修改普通数据</button>
<view>{{object.subObject.objectText}}</view>
<button bindtap="changeObjectText">修改对象数据</button>
<view>{{array[0].arrayText}}</view>
<button bindtap="changeArrayText">修改数组数据</button>
<view>{{newFile.newFileText}}</view>
<button bindtap="addNewData">添加新字段</button>

2. 逻辑控制层 index.js

Page({
    data:{
        text: 'normal data',
        object:{
            subObject:{
                objectText: 'object data'
            }
        },
        array:[
            {arrayText: 'array data'}
        ]
    },
    changeText: function(){
        this.setData({
            // 普通索引
            text: 'new normal data'
        });
    },
    changeObjectText: function (){
        this.setData({
            // 按路径索引
            'object.subObject.objectText': 'new object data'
        });
    },
    changeArrayText:function (){
        this.setData({
            // 按路径索引
            'array[0].arrayText': 'new array data'
        });
    },
    addNewData:function(){
        this.setData({
            /*修改一个已绑定,但未在data中定义的数据*/
            'newFile.newFileText': 'add new data'
        });
    }
})

3. 测试结果
   

页面生命周期

线程启动后视图层和逻辑层相互监听

• 当逻辑层线程触发onLoad、onShow方法后会把初始数据data传送给视图层线程,视图层完成第一次渲染后触发逻辑层 onReady方法,代表页面已经准备妥当,之后我们便可通过setData方法主动触发视图层渲染。
• 当页面被调往后台时,触发 onHide方法,这时逻辑层线程并没有销毁,我们仍然可以通过代码控制视图层渲染,只是可能不会在界面上表现出来。
• 当页面从后台回到前台时,触发 onshow方法,最后当页面销毁时,触发 onUnload方法。
• 整体来看 onload、 onReady和 onUnload方法在生命周期中只会调用一次,生命周期内显示、隐藏页面都是触发 onshow和 onside方法。
• 在路由方式中,只有页面重定向和页面返回会结束当前页面生命周期,当进入一个已加载的页面时只会触发 onshow方法,不会触发 onload和onReady方法。

同步笔记在微信公众号持续更新：小程笔记