小程序开发之【前端开发】【学习第二节】【三】

讲完小程序框架主体文件后，下面要说的就是框架页面文件。

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

.js文件：页面逻辑文件，必要项

.wxml文件：页面结构文件，必要向

.wxss文件：页面样式文件

.json文件：页面配置文件

页面配置文件

首先要讲下页面配置文件，页面配置文件和框架配置文件是一样的，不同的是，页面配置文件不是必须存在的，同时，页面配置文件的配置项只有window，只能控制当前页面的窗口表现，window的属性和app.json中的一致，和wxss类似，渲染页面时，页面中的window配置项会覆盖app.json的相同配置项。由于页面的json只能配置window相关属性，所以只需直接写属性：

{
"navigationBarBackgorundColor":"#000000",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"我的页面",
"backgroundColor":"#efefef",
"backgroundTextStyle":"light"
}
效果图

页面逻辑文件

也就是js文件，了解前端及JavaScript，这个上手就很简单。设置初始化的数据，注册当前页面生命周期函数，注册事件处理函数等等。

小程序的逻辑层文件是JavaScript文件，所有的逻辑文件，包括app.js，最终会打包成一个js文件，在小程序启动时运行，直到小程序销毁，类似于ServiceWorker，所以逻辑层也称为App Service。

在小程序中，每个逻辑文件具有独立的作用域，并具有模块化能力（如不同模块会有相同属性名的问题），逻辑文件运行在纯JavaScript引擎中而并非运行在浏览器上，一些浏览器提供的特有对象，如document、window等，在小程序无法使用。一些基于document.、window的框架如：jQuery，Zepto（这个我不太了解。。。）都不能在小程序中使用。还有一点，不能通过操作DOM来改变页面。

注册页面

在页面逻辑文件中，需要通过Page（）函数注册页面，指定页面的初始数据，生命周期函数，事件处理函数，参数为一个Object对象

Object对象的属性：

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

onLoad：生命周期函数。页面加载时触发。一个页面只会调用一次，接受页面参数，可以获取wx.navigateTo（跳转，类比url传值），wx.redirectTo以及<navigator/>中的query参数

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

onReady：生命周期函数。初次渲染完成时触发。一个页面生命周期只调用一次，代表当前页面已经准备妥当，可以和视图层进行交互。如wx.setNavigationBarTitle需要在onReady之后设置

onUnload：生命周期函数

onHide：生命周期函数

onPullDownRefresh：页面相关时间处理函数，下拉触发。使用时需要将app.json的window的属性enablePullDownRefresh设置为true。处理完数据刷新后，可以调用wx.stopPullDownRefresh方法停止当前页面的下拉刷新

onReachBottom：上拉触底事件的处理函数

其他：开发者自己添加函数或数据到Object参数中，可以用this访问

var app=getApp();
Page({
data:{//初始化数据
count:0
},
onLoad:function(){
//页面加载
},
onShow:function(){
//页面显示
},
onReady:function(){
//...
},
onHide:function(){
//页面隐藏
},
onUnload:function(){
//页面卸载
},
onPullDownRefresh:function(){
//页面下拉
},
onReachBottom:function(){
//上拉触底
},
//开发者自定义函数：
countClick:function(){
this.setData({
count:this.count+1
})
}
})

其中开发者自定义函数，根据开发者而定（这应该是句废话。。。）
小程序框架以栈的形式维护当前所有页面（栈应该都懂吧），当发生路由切换时，页面栈和生命周期函数：

小程序初始化：默认页面入栈：一次触发页面的onLoad，onShow，onReady方法

打开新页面：新页面入栈，一次触发新页面的同上方法

页面重定向：当前页面出栈并卸载，触发当面页面的onUnload方法，新页面入栈，一次触发同上方法（页面重定向和跳转很好的博客http://blog.csdn.net/l_bestcoder/article/details/53559717）

页面返回：当前页面不断出栈并卸载，触发当前页面onUnload方法，直到返回到目标页面。。。

Tab切换，当前页面出栈但不卸载，仅触发onHide方法，新页面入栈，如果当前页面是新加载的，触发onload,onshow,onready方法，如果当前页面加载过，仅触发Onshow

程序从前台到后台：触发当前页面的onhide，触发app onhide

从后台到前台：当前页面的onshow，小程序的onshow

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

获取页面栈

getCurrentPages（）函数可获取当前页面栈的实例。页面栈以数组形式按栈的顺序没出。第一个为首页，最后一个为当前页面。

一个示例：

var pages=getCurrentPages();
var currentpage=pages[pages.length-1];

console.log(currentpage);

在console输入，这样可以看到当前页面的数据和事件（右下角）

事件处理函数：这个不多说了，之前的点击次数就是一个事件处理函数，与视图层绑定。

触发视图层渲染

页面首次加载时，框架会结合初始化数据渲染页面，在逻辑层中则需主动调用Page.prototype.setData（）方法，而不能直接修改Page的data值，这样不仅无法触发视图层渲染，还会造成数据不一致。当Page.prototype.setData（）被调用时，会将数据从逻辑层发送到视图层触发视图层重绘，同时修改Page的data值。（这里的setData其实就是Page对象下的一个方法）setData（）接受一个object对象参数，方法会自动将this.data中的key对应的值变成object参数中key对应的值。当参数object参数key对应的值和this.data中key对应的值一致时，将不会触发视图层渲染。所以，我们一定要保证视图层和逻辑层的数据一致。（这段话可能很难懂，我当时看书也想了一会，这里的key和value相当于map，如果不懂，可以看下这个文章https://baijiahao.baidu.com/s?id=1574261100415215&wfr=spider&for=pc）

object参数的key值非常灵活，可以按数据路径的形式给出，如array[5].info，obj.key.subkey，并且这样使用时，不需要在this.data中预先定义。

这段话是什么意思呢？我们举个例子：

.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>{{newField.newFieldText}}</view>
<button bindtap="addNewData">添加新字段</button>

.js文件：

//测试触发视图层渲染
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中定义的数据 */
'newField.newFieldText':'add new data'
})
},

触发这些方法后：

页面的生命周期。。。这个很重要，得了解。百度应该有很多。。。

页面结构文件（WXML）

WXML是框架设计的一套标记语言，用于渲染界面，渲染原理与RN（React Native）思路一致，通过一套标记语言，在不同平台被解析为不同端的渲染文件，这样以便于在不同平台能够运行。

既然要被小程序的框架解析，那么就要按照小程序框架定义的标签来写，这样才能保证页面能被正确转译（这好像也是句废话。。。。），WXML中编写一些HTML标签或自定义标签仍然会被正常解析，这回给开发者造成一种小程序能直接支持HTML标签的误解。这是微信开发者工具内核是浏览器内核，同时小程序框架并没对WXML中的标签和WXSS中的内容进行强验证，所以HTML和CSS能直接被解析，但这是不合法的，这样的WXML在手机端微信不能正常显示。