页面传值的方式 - 小程序篇

一、跨页面传值

正向传值 A->B

1.用navigator标签传值或 wx.navigator, 比如

// A页面传值
<navigator class="highLight" url="../detail/detail?good_id=18"></navigator>

这里将good_id=16参数传入detail页面，然后detail页面的onload方法内接收。

// B页面接收
onLoad: function(options){
  this.setData({
  	good_id: options.good_id
  })
}

如果需要传多个参数，用&链接即可

 // A页面传值
<navigator class="highLight" url="../detail/detail?good_id=18&good_price=1.88&good_name=hello互联网人"></navigator>

onLoad: function(options){
  this.setData({
  	good_id: options.good_id,
  	good_name: options.good_name,
  	good_price: options.good_price
  })
}

如果需要传入数组，字典等复杂类型，要先用JSON.stringify()转成字符串传递

let detail = [
{img: '../img1.png?111', title: '浓香', size: "0-0"},{img: '../img2.png?222', title: '酱香', size: "1-0"},{img: '../img3.png?333', title: '原味', size: "2-0"}
]
wx.navigateTo({
  url: '../detail/detail/good_detail=' + JSON.stringify(detail),
  success: function(res){
    // todo sucess
  },
  fail: function(){
    // todo fail
  },
  complete: function(){
    // todo complete
  }
})

注 : 如果转化的字符串中 有"?"，"&“或”="等这样的符号，则只会传递符号以前的字符串，符号后面数据会被丢失，这个问题我猜想可能是小程序内部的路由处理 对这些符号敏感吧。所以有时候这里可以先用 encodeURIComponent() 进行转码，在目标页面再用 decodeURIComponent() 解码，这样就可以避免数据丢失了。OK，这是第一种 依靠跳转的url带参数传值

反向传值 B->A

在B界面需要传值地方代码如下

    var pages = getCurrentPages() // 获取栈中全部界面的, 然后把数据写入相应界面
    var currentPage  = pages[pages.length - 1]  //当前界面
    var prePage = pages[pages.length - 2]  //上一个界面
    var that = this
    prePage.setData({
     id: that.data.id,
    })

在A界面需要接受B界面传过来值码如下：这里要在onShow方法里面重新调用你的数据请求或是，为了验证是否传值成功，你可以打印验证 注：由于你从B界面返回A界面使用了wx.navigateBack，所以当你回到A界面后onLoad、onReady方法不响应，onShow方法响应，所以这里你需要特别注意--生命周期

    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function () {
      //获取数据 
      this.gainData() 
      // 打印你的传值
      console.log("res==", this.data.res)
    },

二、页面内传值

1 . 设置id的方法标识跳转后传递后的参数

<view class="city-box" id="{{item.id}}"></view>

在bindtap定义的点击方法 swiperTap : function(e) 中获取

let id = e.currentTarget.id;

2 . 设置 data-xxx 的方法来标识要传递的值

<view class="city-box" id="{{item.id}}" data-city_index="{{item.index}}" data-city_name="{{item.name}}" bindtap="swiperTap"></view>

注 : 这里 data-city_index="{{item.index}}"里的 {{item.index}} 是有效的, 在用wx-for 渲染视图层时, item.index 代表点击的下标. 在bindtap定义的点击方法 swiperTap : function(e) 中获取, 即

swiperTap: function(e){
  let index = e.currentTarget.dataset.city_index;
}

其他的参数取出也如此,

let name = e.currentTarget.dataset.city_name;

3.form表单和input输入框

<form bindsubmit="forSubmit">
  <input name="detail" placeholder="详细地址"></input>
  <input name="name" placeholder="姓名"></input>
  <input name="phone" placeholder="手机号" type="number"></input>
</form>

<input bindconfirm="confirm"/>

forSubmit: function(e){
  var detail = e.detail.value.detail;
  var name = e.detail.value.name;
  var phone = e.detail.value.phone;
}
// confirm
confirm: funtion(e){
  var a = e.detail.value
}

三、本地储存

tips:本地数据存储的大小限制为 10MB

每个微信小程序都可能用到本地缓存数据，这里我们可以通过调用微信提供的方法：wx.setStorage、wx.setStorageSync、wx.getStorage、wx.getStorageSync、wx.clearStorage、wx.clearStorageSync、实现对数据本地缓存、获取、清除。可参考微信小程序【数据缓存】开发文档，查看详情。

在A界面获取数据并缓存到本地

wx.setStorageSync('user_info', dic);

在B界面获取数据并缓存到本地

     var user_info = wx.getStorageSync("user_info")
     this.setData({
        username: user_info.username
     });

从本地缓存中同步移除指定 key。这里具体使用同步或是异步需要根据你存储时的方法，或是同步清理本地数据缓存wx.clearStorageSync()

      wx.removeStorageSync("user_info")

同理你可以在B界面传值在A界面取值，只不过这里你需要注意存储、获取的顺序，先存后取，否则你是拿不到值的。

四、全局的app对象

这里你需要在app.js文件，写好你要全局使用的数据

        //用户数据
        appData: {
            user_info:null,
        }

在你需要赋值的地方引用app,代码如下：

        var app = getApp();
        app.appData.user_info = {"username"："jane"};

在你需要取值的地方引用app,代码如下：

        var app = getApp();
        var user_info = app.appData.user_info;
        this.setData({
            username: user_info.username
       });

总结不易，留下足迹!!!

参考链接:
[1]https://www.jianshu.com/p/b2d912920a6a
[2]https://www.jianshu.com/p/0135769db89c