微信小程序传参

页面间参数传递

页面与页面间传递参数，主要可以通用三种方式：

1. 通过页面 url 传递：
   小程序中我们通过 wx.navigateTo()方法 或 <navigator>组件 进行页面跳转，再跳转前可以将需要传递的参数拼接到 url 后，具体如下：

   // Page index
   
   // wx.navigateTo() 方法
   wx.navigateTo({
     url: '/pages/about/about?name=菜台',
   });
   
   // <navigator> 组件方法
   <navigator url="/pages/about/about?name=菜台">关于菜台</navigator>
   复制代码

   跳转到对应页面 Page about 后，我们可以在生命周期函数 onLoad 中去获取 url 中的参数:

   // Page about
   Page({
     onLoad (query) {
       // 这里的 query 将是 url 中，问号(?) 后面的键值对组成的一个对象
       // query = {name: '菜台'}
       this.setData({
         name: query.name
       });
     }
   });
   复制代码

2. 通过全局变量 getApp() 传递：
   小程序可以通过 getApp() 这个全局函数获取到当前小程序的实例；
   在开发之前，我们可以将全局的数据放到根目录下的 app.js 文件，然后在其他页面可以通过 getApp() 来获取这些数据:

   // Page index
   
   // index.wxml
   <view>
     <text bindtap='goAbout'>关于菜台</text>
   </view>
   
   // index.js
   const app = getApp();
   Page({
     goAbout() {
       app.about = {
         name: '菜台'
       };
       wx.navigateTo({
         url: '/pages/about/about',
       });
     },
   })
   
   // Page about
   
   // about.js
   const app = getApp();
   Page({
     onLoad () {
       this.setData({
         name: app.about.name
       });
     }
   });
   
   复制代码

   跳转到对应页面 Page about 后，我们可以在生命周期函数 onLoad 中去获取 url 中的参数:

   // Page about
   Page({
     onLoad (query) {
       // 这里的 query 将是 url 中，问号(?) 后面的键值对组成的一个对象
       // query = {name: '菜台'}
       this.setData({
         name: query.name
       });
     }
   });
   复制代码

3. 将数据放入缓存中：
   缓存的数据，我们可以在任何页面随意调用，有点类似全局变量，只要设置了一次之后，在其他页面都可以随意调用；

   // Page index
   Page({
     onLoad () {
       wx.setStorage({
         key: "about",
         data: {
           name: '菜台'
         }
       })
     }
   })
   
   // Page about
   Page({
     onLoad () {
       wx.getStorage({
         key: 'about',
         success: function (res) {
           console.log(res.data)
         }
       })
     }
   });
   复制代码

事件函数参数传递

在小程序中触发事件调用函数时，不能像 js 那样使用圆括号 () 来传递参数，这个时候可以使用 dataset 属性把需要传递的参数放到组件中：

// index.wxml
<view>
  <text bindtap='changeName' data-name="菜菜杰">{{name}}</text>
</view>

// index.js
Page({
  data: {
    name: '菜台'
  },
  changeName (e) {
    this.setData({
      name: e.currentTarget.dataset.name
    })
  }
});
复制代码

转载于:https://juejin.im/post/5a7cf478f265da4e75278967