巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+城市分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

微信小法式 注书页面 Page()函数

一佰互联网站建造(www.taishanly.com) 宣布日期 2019-05-24 16:34:13 阅读数: 1577

Page


Page() 函数用来注册一个页面。接管一个 object 参数,其指定页面的初始数据、性命周期函数、事件处置函数等。

object 参数申明:

属性 范例 描写
data Object 页面的初始数据
onLoad Function 性命周期函数--监听页面加载
onReady Function 性命周期函数--监听页面初度衬着实现
onShow Function 性命周期函数--监听页面显现
onHide Function 性命周期函数--监听页面埋没
onUnload Function 性命周期函数--监听页面卸载
onPullDownRefresh Function 页面相干事件处置函数--监听用户下拉举措
onReachBottom Function 页面上拉触底事件的处置函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面转动触发事件的处置函数
其余 Any 开辟者能够增加肆意的函数或数据到 object 参数中,在页面的函数顶用 this 能够拜候

示例代码:

//index.js Page({  data: {    text: "This is page data." },  onLoad: function(options) { // Do some initialize when page load. },  onReady: function() { // Do something when page ready. },  onShow: function() { // Do something when page show. },  onHide: function() { // Do something when page hide. },  onUnload: function() { // Do something when page close. },  onPullDownRefresh: function() { // Do something when pull down. },  onReachBottom: function() { // Do something when page reach bottom. },  onShareAppMessage: function () { // return custom share data when user share. },  onPageScroll: function() { // Do something when page scroll }, // Event handler. viewTap: function() { this.setData({      text: 'Set some data for updating view.' })  },  customData: {    hi: 'MINA' }})

初始化数据


初始化数据将作为页面的第一次衬着。data 将会以 JSON 的情势由逻辑层传至衬着层,以是其数据必须是能够转成 JSON 的格局:字符串,数字,布尔值,东西,数组。

衬着层能够经过过程 WXML 对数据遏制绑定。

示例代码:


<view>{{text}}</view><view>{{array[0].msg}}</view>
Page({  data: {    text: 'init data',    array: [{msg: '1'}, {msg: '2'}]  }})

性命周期函数


  • onLoad: 页面加载

    • 一个页面只会挪用一次,能够在 onLoad 中取得翻开今后页面所挪用的 query 参数。
  • onShow: 页面显现

    • 每次翻开页面城市挪用一次。
  • onReady: 页面初度衬着实现

    • 一个页面只会挪用一次,代表页面已筹办安妥,能够和视图层遏制交互。
    • 对界面的设置如wx.setNavigationBarTitle请在onReady今后设置。详见性命周期
  • onHide: 页面埋没

    • 当navigateTo或底部tab切换时挪用。
  • onUnload: 页面卸载

    • 当redirectTo或navigateBack的时辰挪用。

性命周期的挪用和页面的路由体例详见

onLoad参数

范例 申明
Object 其余页面翻开今后页面所挪用的 query 参数

页面相干事件处置函数


  • onPullDownRefresh: 下拉革新

    • 监听用户下拉革新事件。
    • 须要在config的window选项中开启enablePullDownRefresh。
    • 当处置完数据革新后,wx.stopPullDownRefresh能够遏制今后页面的下拉革新。
  • onReachBottom: 上拉触底

    • 监听用户下拉触底事件。
  • onPageScroll: 页面转动

    • 监听用户滑动页面事件。
    • 参数为 Object,包罗以下字段:
字段 范例 申明
scrollTop Number 页面在垂直标的目的已转动的间隔(单元px)
  • onShareAppMessage: 用户转发
    • 只要界说了此事件处置函数,右上角菜单才会显现“转发”按钮
    • 用户点击转发按钮的时辰会挪用
    • 此事件须要 return 一个 Object,用于自界说转发内容

自界说转发字段

字段 申明 默许值
title 转发标题 今后小法式称号
path 转发途径 今后页面 path ,必须因此 / 开首的完整途径

示例代码

Page({  onShareAppMessage: function () { return {      title: '自界说转发标题',      path: '/page/user?id=123' }  }})


事件处置函数


除初始化数据和性命周期函数,Page 中还能够界说一些特别的函数:事件处置函数。在衬着层能够在组件中插手事件绑定,当到达触发事件时,就会履行 Page 中界说的事件处置函数。

示例代码:

<view bindtap="viewTap"> click me </view>
Page({  viewTap: function() { console.log('view tap')  }})

Page.prototype.route


route 字段能够取得到今后页面的途径。

Page.prototype.setData()


setData 函数用于将数据从逻辑层发送到视图层,同时转变对应的 this.data 的值。

setData() 参数格局


接管一个东西,以 key,value 的情势表现将 this.data 中的 key 对应的值转变成 value。

此中 key 能够很是矫捷,以数据途径的情势给出,如 array[2].message,a.b.c.d,并且不须要在 this.data 中事后界说。

重视:

  1. 间接点窜 this.data 而不挪用 this.setData 是没法转变页面的状况的,还会形成数据不分歧
  2. 单次设置的数据不能跨越1024kB,请尽可能避免一次设置过量的数据

示例代码:

<!--index.wxml--> <view>{{text}}</view> <button bindtap="changeText"> Change normal data </button><view>{{num}}</view> <button bindtap="changeNum"> Change normal num </button> <view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button> <view>{{object.text}}</view> <button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view> <button bindtap="addNewField"> Add new data </button> 
//index.js Page({  data: {    text: 'init data',    num: 0,    array: [{text: 'init data'}],    object: {      text: 'init data' }  },  changeText: function() { // this.data.text = 'changed data'  // bad, it can not work this.setData({      text: 'changed data' })  },  changeNum: function() { this.data.num = 1 this.setData({      num: this.data.num    })  },  changeItemInArray: function() { // you can use this way to modify a danamic data path this.setData({ 'array[0].text':'changed data' })  },  changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' });  },  addNewField: function() { this.setData({ 'newField.text': 'new data' })  }})

以下内容你不须要立马完整弄大白,不过今后它会有赞助。

性命周期


下图申了然 Page 实例的性命周期。


一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松实现pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

04
05月
罕见的判定网站PR挟制的方法

PR挟制,也便是用棍骗手段取得东西条上比拟高的PR值显现。 今朝换毗连重视PR的站长有良多,但看PR是不周全的,为甚么... >>概况

26
04月
静态假造主机|linux假造主机伪静态URL

一切型号假造主机均撑持伪静态Urlrewrite,撑持自界说isapi功效(业界独占),从而能够便利地撑持任何体系的伪静态功效,便利搜刮引擎... >>概况

12
04月
营销网站扶植的网页导航怎样设想?

营销型网站扶植的网页导航不管拜候甚么样的网站,赏识者都会面临各种百般的链接。这些链接经过历程必定的技能手段,为赏识者供给各种路程,赞助赏识者... >>概况

23
04月
新版VPS主机办理面板WDCP装置及利用休会

WDCP也算是国产中颇受大师接待的VPS主机面板了,供给了nginx、apache、mysql、php等Web建站情况一键搭建。印象中,国际... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站