小程序页面间参数传递的几种办法

1. 1. 页面URL传递参数

      wxml页面（参数多时可用“&”）

<navigator url='../list/list?id=1'></navigator>

或者添加点击事件，js用navigateTo跳转传参，两种效果一样

wx.navigateTo({
url: '../list/list?id=1',
})

取值：js页面 在onLoad里直接获取

onLoad: function (options) {
//页面初始化 options为页面跳转所带来的参数
var id = options.id    //获取值
},

1. 全局变量

   全局变量实际上是定义了一个全局的对象，并可在每个页面中引入。

   在初始化代码的时候，小程序会读取app.js的文件，在这里我们可以定义我们所需要的全局变量。

   //app.js
   app({
   globalData:{
    id:null
   }}
   );
   

   赋值：（如果上面已经赋值，可跳过）

   var app = getApp();
   app.globalData.id = 2
   

   赋值：

   var app = getApp();
   var id = app.globalData.id
   

   app.js在项目中是用来做基础配置的，因此不建议将很多变量放在这里配置。一般情况下会将一些持久化的常量配置在这里，对于经常需要变动的量不建议用这个方法。

2. 列表index下标取值

   wxml页面

   <navigator url='../list/list?id=1'></navigator>
   

   如果需要传递多个，可以写多个data-[参数]的方式进行传递

   JS代码

   clickMe:function(e){
     var id = e.currentTarget.dataset.id
     console.log(id);
   },
   

   注意：通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

3. form表单取值

   方式一：通过

   通过<form bindsubmit="formSubmit">与<button formType="submit">标签配合使用
   

   wxml页面

   <form bindsubmit="formSubmit">
     <input name="detail" placeholder="详情地址" />
     <input name="realname" placeholder="收件人姓名" />
     <input name="mobile" placeholder="手机号码" type="number"/>
     <button formType="submit" type="primary">Submit</button>
   </form>
   

   JS代码

   formSubmit: function(e) {
     // detail
     var detail = e.detail.value.detail;
     // realname
     var realname = e.detail.value.realname;
     // mobile
     var mobile = e.detail.value.mobile;
   }
   

   方式二：

   通过<input bindconfirm="realnameConfirm">实现
   

   JS代码

   // 实现相应多个**Confirm方式
   detailConfirm: function(e) {
     var detail = e.detail.value;
   }
   realnameConfirm: function(e) {
     var realname = e.detail.value;
   }
   mobileConfirm: function(e) {
     var mobile = e.detail.value;
   }
   

   通过方式一与方式二的对比可以看出，虽然同样都能实现取值的目标，但是它们的使用场景有所不同，前者适合与提交大量表单项时，比如用户完善个人资料，收货地址填写；而后者适合只做一两个表单项时，比如快递单号录入，绑定手机号码。

   如果需要类似ajax即时响应的，应该选用后者，因为input能使用<input bindinput=”bindInput”>来实现即时取到值，比如商品搜索框输入关键字，应出现一些候选词这样的场景。

小结

在微信小程序中有以上并且不局限于以上几种的方式进行页面间数据传递、交互， 在实际应用中可以组合使用。比如说：

1.一些常量，可以交由 app.js 管理；需要持久化的量可以放在本地保存。

2.涉及到下级页面或者模板元素的数据，可以通过传入参数的方式传入。

3.后级页面可以通过获取堆栈里的页面对象快速修改上级的数据。

在实际应用中结合使用，可以更好地管理小程序的数据。