小程序2——页面间传值

1、文件解析

.�js

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

在 data 方法里面 设置变量初始数据，
在 onLoad 方法里面 加载数据。

.wxss 对应 .css
.wxml 对应 .html

2、页面传值

1） .wxml 与 .js间传值

——靠变量传值
.wxml 变量名写在 {{ }} 中，且变量名使用驼峰法 或 下划线连接，不可出现其他符号

<view> {{number}} </view>

.js

var app = getApp()
Page({
  data: {
    number: '',
    userInfo:''
  },
  onLoad: function () {
    var that = this
    that.setData({// 赋值，即刻更新数据
        number: 100
    })
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
    })
    // 加载数据
    this.loadData()
  }
})

——用 data-x 传值
注意变量名的对应

<view wx:for="{{array}}" wx:for-item="mitem" wx:key="id">
    <view class="brand-info" data-simg="{{mitem.simg}}" data-itemid="{{mitem.itemId}}" bindtap="clickView"></view>
 </view>

.js

  clickView: function (e) {
    console.log('itemid:', e.currentTarget.dataset.itemid)
    console.log('simg:', e.currentTarget.dataset.simg)
  }

2）页面间跳转赋值

wx.navigateTo({
    url: '../�test/test?number=200'
})

后一个页面的.js中

// blacksuccess.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    vip_number:'',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      // 前一个页面的变量存在 options 中，将其赋给本页面的变量
      vip_number: options.number
    })
  },
... ...
})

.wxml，使用将变量放在 {{}} 中，显示出来

<view> {{�vip_number}} </view>