工作至今,接触过avalon,vue,微信小程序, ReactNative等多种前端技术, 到最后发现, 都少不了传参, 接下来看看微信小程序如何实现传参做下简单总结=.=

我们先来看一张图, 这里面总结了几种方法: 

 接下来, 我就这张图做简单说明, 已经明白的大佬们可以直接跳过, 也还请多多指教~

1. navigator组件实现页面跳转时可携带参数

    // 假设在js文件的data数据中有申明userCode变量
   
     点我跳转到home主页
   
复制代码

2. navigateTo()方法实现页面跳转时可携带参数

     let userCode = "test";
     wx.navigateTo({
       url: `../home/home?userCode=${userCode}`
     })
复制代码

     以上两种方法实现效果是一样的: 携带参数并跳转到home页面, 那么在home页面该如何接收传递过来的参数呢?
Answer: 在onLoad()方法里直接获取即可!

   onLoad: function (options) {
     console.log("瞧一瞧你拿到的值",options);  
   }
复制代码

3. 事件传参
小程序可以在组件上绑定事件, 在传递参数的时候, 通过自定义属性的方式, 详细可以看下面的例子!

     //wxml
     事件传参
     // js
     tapFn(e){
         console.log("获取到自定义参数对象集合:", e.currentTarget.dataset);
     }
复制代码

若将wxml中的bindtap改写成是catchtap, 同样可以通过相同的js获取到参数集合!

4. 组件传参

     // 假设有个test自定义组件 && Tips: widget为自定义属性名称, 可随意更改~
     // test组件定义处
     properties: {
         widget: {
           type: Object,
           value: {}
     }
     //组件使用处
     
复制代码

这样, 我们就可以通过widget自定义属性将值传给子组件, 供子组件进行页面渲染.