12.23 page页面的逻辑

模拟数据 fastmock：https://www.fastmock.site/

https://mock.presstime.cn/login

添加在线图片 image图床：https://imgse.com/

1.注册页面

! $\[1280X1280 (63).PNG$ ]

2.Page()构造器中的数据，生命周期函数，事件处理函数

JavaScript 复制代码

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行.
  },
  onShow: function() {
    // 页面出现在前台时执行.
  },
  onReady: function() {
    // 页面首次渲染完毕时执行.
  },
  onHide: function() {
    // 页面从前台变成后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行.
  },
  onPullDownRefresh: function() {
    // 出发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底执行.
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行.
    console.log("分享");
  },
  onShareTimeline(){
        // 分享到朋友圈
        console.log("分享到朋友圈");
  },
  onPageScroll: function() {
    // 页面滚动时执行
    // 获取滚动条的偏移值
    console.log(pos.scrollTop);
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 响应式函数.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

JavaScript 复制代码

/**
页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
  console.log('下拉刷新');
  setTimeout(()=>{
    // 请求完数据可以手动停止
    wx.stopPullDownRefresh()
  },10)
},
 /**
页面上拉触底事件的处理函数
*/
onReachBottom: function () {
  console.log('触底加载');
},

3.数据的绑定和修改

data中的数据为响应式数据，数据改变，视图更新
data中的数据必须用this.setData()来修改，在js中读取data,用this.data.属性名

JavaScript 复制代码

this.setData({
  isBackTopShow: true
},()=>{
  console.log('数据更新完毕之后的回调');
})

bindtap会冒泡，catchtap阻止冒泡

HTML 复制代码

<view bindtap="show">
  <button catchtap="changeMsg">改变msg1的值</button>
  <button bindtap="changeMsg">改变msg1的值</button>
  <view>{{msg}}</view>
</view>

JavaScript 复制代码

  data:{
    msg:'old'
  },
  changeMsg(){
    this.setData({
      msg:'new'
    })
  },
  show(){
    console.log(1);
  }

4.模板向js传递数据【html-js】

模板中通过 data-属性名来绑定数据
js的事件处理函数中，通过e.target.dataset.属性名来获取模板数据
target指触发事件的目标对象，currentTarget指绑定事件的对象

HTML 复制代码

<view>
  <view bindtap="getIndex" wx:for="{{arr}}" wx:key="*this" data-index="{{index}}">
    <button>{{item}}</button>
  </view>
</view>

JavaScript 复制代码

data: {
  arr: ["a","b","c"]
},
getIndex(e){
  console.log(e.target.dataset.index);
  console.log(e.target);
  console.log(e.currentTarget);
}

5.双向数据绑定

双向数据绑定的概念，在vue和react中都有，小程序中也有，小程序实现的方式有两种，以前实现的方式比较的麻烦，现在可以直接使用model:value来实现

官网链接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

方法一：原始方法

步骤：

给input绑定bindinput的事件，在js中使用e.detail.value获取value值
添加data响应式数据，将响应式数据和输入框绑定在一起

index.wxml

HTML 复制代码

<input class="inp" type="text" name="" id="" bindinput="change" value="{{msg}}"/>
{{msg}}

index.js

JavaScript 复制代码

Page({
    /**
    页面的初始数据
    */
    data: {
        msg:'hello'
    },
    change(e){
        this.setData({
             msg:e.detail.value
        })
    }
})

方法二：model:value

index.wxml

HTML 复制代码

<input class="inp" type="text" name="" id="" model:value="{{msg}}"/>

index.js

JavaScript 复制代码

Page({
    /**
    页面的初始数据
    */
    data: {
        msg:'hello'
    }
})