微信小程序之传参

前言

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

微信小程序之传参的几种方法

我们先来看一张图, 这里面总结了几种方法: 接下来, 我就这张图做简单说明, 已经明白的大佬们可以直接跳过, 也还请多多指教~

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

    // 假设在js文件的data数据中有申明userCode变量
   <navigator url="../home/home?userCode={{userCode}}">
     <button>点我跳转到home主页</button>
   </navigator>

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

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

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

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

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

     //wxml
     <view bindtap="tapFn" data-name="test" data-sex="female">事件传参</view>
     // js
     tapFn(e){
         console.log("获取到自定义参数对象集合:", e.currentTarget.dataset);
     }

若将wxml中的bindtap改写成是catchtap, 同样可以通过相同的js获取到参数集合!
可能看到这里,你会有点疑惑, bind+事件名称 跟catch+事件名称有什么区别呢?
若想进一步了解两者的区别, 请戳以下链接:
微信小程序之bindtap&&catchtap的区别

4. 组件传参

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

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