长沙小程序开发智企云讲讲小程序的页面和事件！

　　之前长沙小程序开发公司智企云给大家介绍了一些小程序开发的学习分享的相关介绍，今天在此为大家继续为大家详细讲讲小程序的页面和事件，可能概括地不太好，不过大致内容就是围绕着这两个方面展开的，主要是按照我们的学习路径来，希望对大家能有所帮助。

　　页面配置

　　小程序定义了一个单例变量App，可以通过getApp()来获取。这个App变量就是小程序实例，定义在app.js中。在App实例的构造器中，可以添加小程序生命周期相关的事件函数和全局变量。

　　支持的生命周期相关事件有：

　　onLaunch: function(options) {}: 小程序初始化完成时触发，且整个生命周期只会触发一次

　　onShow: function(options) {}: 小程序启动或者是从后台转为前台时触发

　　onHide: function() {}: 小程序从从前台转为后台时触发

　　onError: function(msg) {}: 脚本错误或者调用API出错会触发，msg带着报错信息

　　这里说明一下onLaunch和onShow函数中的options常用的字段：

　　path：字符串，表示打开小程序的页面路径

　　query：Object类型，表示打开小程序的页面参数，例如打开小程序是指定了url: pages/index/index?id=1&name=John。则query为{id:"1",name:"John"}

　　scene：数值，表示打开小程序的场景值，详细场景值请参考小程序官方文档

　　referrerInfo：Object类型，当场景为由从另一个小程序或公众号或App打开时，返回此字段

　　referrerInfo.appId：字符串，表示来源小程序或公众号或App的 appId

　　referrerInfo.extraData：Object类型，表示来源小程序传过来的数据，scene=1037或1038时支持

　　有时候需要定义一些在所有页面都可以共享的变量，直接在App构造器里面增加即可。如下图，加了一个testGlobal字段：

　　可以在wxml页面中直接{{testGlobal}}使用，也可以在js文件中通过getApp().testGlobal访问。更新数据的话可以用getApp().setData({testGlobal: "new value"}, function(){}) 来进行，function表示设置成功的回调函数。注意：直接用getApp().testGlobal = "new value"不会更新数据，并且还可以会产生不可预期的BUG。

　　说完了 全局的页面设置，下面来说一下每个单独的页面。页面文件都放在pages文件夹下面，用到的页面需要在app.json中声明，如下图所示

　　如果是用开发工具自动生成的页面，会自动在这里加上声明，否则需要自己手动加上，不然不会识别到新添加的页面。小程序默认声明的第一个页面为主页，即默认打开页面。

　　每一个单独的页面分为三个部分：界面、配置和业务逻辑。界面的话由xxx.wxml和xxx.wxss描述(xxx表示页面命名);配置写在xxx.json中;业务逻辑在xxx.js中实现。这四个文件必须放在同一个文件夹中，通常为了项目结构美观，建议每个页面单独放在page下面的一个文件夹中。xxx.js和xxx.wxml是必须的，其他两个文件可选。

　　与App.js类似，页面的对象定义在xxx.js中，其中有一个Page的构造器，在里面可以定义页面的变量和一些生命周期相关的操作事件。一个最简单的构造器如下所示：

　　Page({ data: { diyData: "do it yourself" }, onLoad: function(options) { }, onReady: function() { }, onShow: function() { }, onHide: function() { }, onUnload: function() { }, onPullDownRefresh: function() { }, onReachBottom: function() { }, onShareAppMessage: function () { }, onPageScroll: function() { }})

　　下面详细介绍下每一个字段及其用法

　　data表示页面数据，跟App中的全局变量相比，这个就是页面定义的局部变量，只在当前页面中生效。可以直接用this.diyData进行访问，更新的话可以用this.setData({diyData: "new data"})来进行更新。切记：千万不要直接this.diyData="new data"这样更新。

　　onLoad: 页面加载时触发，早于onReady和onShow。options里面带的字段就是转到当前页面的query对应的字段，例如A通过wx.navigateTo函数转到当前页面，url指定：pages/inexe/index?age=21&name=Cuihua。则options= {age:"21",name:"Cuihua"}

　　onReady: 页面初次渲染完成

　　onShow: 页面显示，触发事件早于onReady

　　onHide: 页面隐藏:

　　onUnload: 页面卸载:

　　onPullDownRefresh: 监听用户下拉动作。需要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true

　　onReachBottomFunction: 页面上拉触底事件的处理函数

　　onShareAppMessage: 用户点击右上角转发。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容。title表示标题，path的话表示要打开的页面的路径，如pages/index/index

　　onPageScroll: 页面滚动触发事件的处理函数

　　除了上面这些，还可以在page的构造器里面添加任意的字段，通过this.xxx访问(这么看来感觉page构造器里面的data有点多余?大概是为了美观吧，放在一起 哈哈哈)。

　　页面跳转

　　这里默认大家都知道栈这个数据结构哈(毕竟作为一个产品经理我都是知道的)。

　　页面之间跳转有三个方式进行：wx.navigateTo({ url: 'page1' })、wx.navigateBack() 和wx.redirectTo({ url: 'page2' }) 。

　　navigateTo指定一个跳转的页面，如果用栈顶页面表示当前页面的话，相当于把要跳转的页面入栈，即[currentPage, targetPage]，栈的大小最大为10。

　　navigateBack返回上一个页面，相当于栈顶页面出栈。

　　redirectTo是直接替换当前页面的操作，例如，当前栈的状态是[A, B, C, D]，然后进行wxredirectTo({url:'E'})操作，则操作完之后的状态是[A, B, C, E]。注意，因为栈的大小最多为10，所以在进行了10次navigateTo操作后，再要跳转页面只能用wx.redirectTo了。

　　如果在App里面定义了toolbar(小程序底部Tab页面，例如微信底部的"微信"，"通讯录"，"发现"和"我"四个Tab页面)的话，还可以用wx.switchTab({ url: 'pageOther' })进行页面切换，表示切换到pageOther所在的Tab，并且打开pageOther页面。注意，此时之前的页面栈全部清空，即当前的页面栈状态为[pageOther]。

　　事件

　　事件表示对用户在小程序UI界面上某些操作的响应，比如用户点击某个按钮或者长按之类的操作，我们可以定义对应的handler函数，若是有这些用户操作发现，就会调用我们的handler。

　　例如我们定义一个点击事件，点击之后用命令行打印出"hello, world"

　　Click me! // page.js Page({ tapName: function(event) { console.log("hello, world") }})

　　一般事件定义在组件的尖括号中，定义一个bindXxx属性(也可以用bind:xxx)，表示绑定Xxx事件，值表示handler函数，需要在对应的js文件中定义。

　　常见的事件有：

　　touchstart：手指触摸动作开始

　　touchmove：手指触摸后移动

　　touchcancel：手指触摸动作被打断，如来电提醒，弹窗

　　touchend：手指触摸动作结束

　　tap：手指触摸后马上离开

　　longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

　　longtap手指触摸后，超过350ms再离开(推荐使用longpress事件代替)

　　transitionend：会在 WXSS transition 或 wx.createAnimation 动画结束后触发

　　animationstart：会在一个 WXSS animation 动画开始时触发

　　animationiteration：会在一个 WXSS animation 一次迭代结束时触发

　　animationend：会在一个 WXSS animation 动画完成时触发

　　事件handler函数传入的event包括如下字段：

　　type：字符串，表示事件类型

　　timeStamp： 数值，表示页面打开到触发事件所经过的毫秒数

　　target：Object类型，表示触发事件的组件的一些属性值集合

　　currentTarget：Object类型，表示当前组件的一些属性值集合

　　detail：Object类型额外的信息

　　touches：数组类型，表示触摸事件，当前停留在屏幕中的触摸点信息的数组

　　changedTouches：数组类型，表示触摸事件，当前变化的触摸点信息的数

　　这里的字段建议自己用console.log(event)打印出来自己看看啥意思比较容易理解。

      以上就是长沙小程序开发智企云给我们带来的小程序的页面和事件方面的学习报道，希望大家对此能有所了解，继续深挖，后续我们也会带来更多关于小程序开发的相关报道，敬请期待关注智企云。