devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序之逻辑层(JS)注册页面(初始化数据+生命周期回调函数+页面事件处理函数+组件事件处理函数)详解_微信小程序中,在页面js逻辑中,使用什么属性设置初始化数据

作者：我家小花儿 | 2024-04-26 07:22:15

赞

踩

微信小程序中,在页面js逻辑中,使用什么属性设置初始化数据

本章节按照微信文档讲述 红色框里的内容

 

一.初始化数据

 

1.页面 Page

 

1.1.说明

Page(Object)

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Object 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销。

 

1.2.代码

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     
  8.   },
  9.  
  10.   /**
  11.    * 生命周期函数--监听页面加载
  12.    */
  13.   onLoad: function (options) {
  14.     
  15.   },
  16.  
  17.   /**
  18.    * 生命周期函数--监听页面初次渲染完成
  19.    */
  20.   onReady: function () {
  21.     
  22.   },
  23.  
  24.   /**
  25.    * 生命周期函数--监听页面显示
  26.    */
  27.   onShow: function () {
  28.     
  29.   },
  30.  
  31.   /**
  32.    * 生命周期函数--监听页面隐藏
  33.    */
  34.   onHide: function () {
  35.     
  36.   },
  37.  
  38.   /**
  39.    * 生命周期函数--监听页面卸载
  40.    */
  41.   onUnload: function () {
  42.     
  43.   },
  44.  
  45.   /**
  46.    * 页面相关事件处理函数--监听用户下拉动作
  47.    */
  48.   onPullDownRefresh: function () {
  49.     
  50.   },
  51.  
  52.   /**
  53.    * 页面上拉触底事件的处理函数
  54.    */
  55.   onReachBottom: function () {
  56.     
  57.   },
  58.  
  59.   /**
  60.    * 用户点击右上角分享
  61.    */
  62.   onShareAppMessage: function () {
  63.     
  64.   }
  65. })

 

 

2.data

 

2.1.说明


data 是页面第一次渲染使用的初始数据。页面加载时，data 将会以JSON字符串的形式由逻辑层(.JS)传至渲染层(.WXML)，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

 

2.2.代码

2.2.1.JS代码

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     text:"初始化View",
  8.     array: [{ msg: '数组1' }, { msg: '数组2' }]
  9.   }
  10. })

 

2.2.2.WXML代码

  1. <view>{{text}}</view>
  2. <view>{{array[0].msg}}</view>

 

2.2.3.效果

 

 

 

 

二.生命周期回调函数

 

1.onLoad函数

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

  1.   /**
  2.    * 生命周期函数--监听页面加载
  3.    */
  4.   onLoad: function (options) {
  5.     
  6.   },

 

 

2.onShow函数

页面显示/切入前台时触发。

  1. /**
  2.    * 生命周期函数--监听页面显示
  3.    */
  4.   onShow: function () {
  5.     
  6.   },

 

 

3.onReady函数

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

  1.  /**
  2.    * 生命周期函数--监听页面初次渲染完成
  3.    */
  4.   onReady: function () {
  5.     
  6.   },

 

 

4.onHide函数

页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

  1.  /**
  2.    * 生命周期函数--监听页面隐藏
  3.    */
  4.   onHide: function () {
  5.     
  6.   },

 

 

5.onUnload函数

页面卸载时触发。如redirectTo或navigateBack到其他页面时。

  1. /**
  2.    * 生命周期函数--监听页面卸载
  3.    */
  4.   onUnload: function () {
  5.     
  6.   },

 

 

 

 

三.页面事件处理函数

 

1.onPullDownRefresh函数


监听用户下拉刷新事件。

1.1.需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。


1.2.可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。


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

 

  1. /**
  2.    * 页面相关事件处理函数--监听用户下拉动作
  3.    */
  4.   onPullDownRefresh: function () {
  5.     
  6.   },

 

 

2.onReachBottom函数

监听用户上拉触底事件。

2.1.可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。


2.2.在触发距离内滑动期间，本事件只会被触发一次。

 

  1.   /**
  2.    * 页面上拉触底事件的处理函数
  3.    */
  4.   onReachBottom: function () {
  5.     
  6.   },

 

 

3.onPageScroll函数

监听用户滑动页面事件。

 

 

4.onShareAppMessage函数

监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。

此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：

 

   onShareAppMessage函数代码示例

   

  .JS代码

  1. Page({
  2.   data: {
  3.  
  4.   },
  5.   onShareAppMessage: function() {
  6.     return {
  7.       title: '自定义转发标题',
  8.       path: '/index/index?id=123',
  9.       imageUrl: 'http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg'
  10.     }
  11.   },
  12.  
  13. })

 

   .WXML代码

<view class="intro">onShareAppMessage函数代码示例</view>

   

   效果

   

   

   

 

 

5.onTabItemTap函数

点击 tab 时触发。

 

 

 

 

 

 

四.组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

 

代码示例

 

.WXML代码

  1. <button type="default" bindtap='defaultButton'>默认颜色(可点击)</button>
  2. <button type="primary" bindtap='primaryButton'>微信绿色(可点击)</button>
  3. <button type="warn" bindtap='warnButton'>警告红色(可点击)</button>

 

.JS代码

  1.   /**
  2.    * 默认按钮点击
  3.    */
  4.  
  5.   defaultButton: function() {
  6.     wx.navigateTo({
  7.       url: '../logs/logs'
  8.     })
  9.  
  10.   },

 

效果

 

 

 

 

 

五.Page.route

得到当前页面的路径，类型为String。

 

代码

  1.   /**
  2.    * 生命周期函数--监听页面显示
  3.    */
  4.   onShow: function() {
  5.     console.log("路径---："+this.route)
  6.   },

 

结果

 

 

 

 

 

六.Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层(.JS)发送到视图层(WXML)(异步)，同时改变对应的 this.data 的值(同步)。

 

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

 

   注意：

      1.直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
 

      2.仅支持设置可 JSON 化的数据。


      3.单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。


      4.请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

 

 

 

代码

WXSS代码

  1. view {
  2.   margin: 20px;
  3. }
  4.  
  5. button {
  6.   margin: 20px;
  7. }
  8.  
  9. .viewposition {
  10.   text-align: center;
  11. }

 

WXML代码

  1. <view class='viewposition'>
  2.   {{num}}</view>
  3.  
  4. <button type="default" bindtap='defaultButton'>点击改变初始值</button>

 

JS代码

  1.  /**
  2.    * 页面的初始数据
  3.    */
  4.   data: {
  5.     num:'点击前',
  6.   },
  7.  
  8.  
  9.   /**
  10.    * 增加初始值按钮点击
  11.    */
  12.  
  13.   defaultButton: function() {
  14.     this.setData({
  15.       num: '点击后',
  16.     })
  17.  
  18.   },

 

效果

点击前

 

点击后


 

 

 

 

 

 

七.生命周期图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/489698
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号