preface

So far, I have been in touch with avalon, Vue, wechat applets, ReactNative and other front-end technologies. Finally, I found that all of them had to pass parameters. Next, let’s look at how wechat applets realize the transfer of parameters and make a brief summary

Several methods of micro channel small program

Let’s start with a graph that summarizes several approaches:Next, I will make a brief illustration of this diagram. If you already understand it, you can skip it. Please give me more comments

1. The Navigator component can carry parameters when realizing page hopping

UserCode <navigator URL =".. /home/home? </button> </button>Copy the code

NavigateTo (); navigateTo()

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

The effect of the two methods is the same: take parameters and jump to the home page. How do you receive the parameters in the home page? Answer: In the onLoad() method directly obtain!

OnLoad: function (options) {console.log(" look at the value you got ",options); }Copy the code

3. Event passing applet can bind events to components. When passing parameters, you can use custom properties.

// WXML <view bindtap="tapFn" data-name="test" data-sex="female"> event parameter </view> // js tapFn(e){console.log("  e.currentTarget.dataset); }Copy the code

If you want to change the WXML bindtap to catchtap, you can get the same set of parameters from the same JS. You might be a little confused by this, but what’s the difference between a bind event name and a catch event name? Bindtap, catchtap, bindtap, Catchtap

4. Component parameter transfer

// Properties: {widget: {type: Object, value: {}} / / components use < test widget = "{{widgetData}}" > < / test >Copy the code

In this way, we can use widget custom properties to pass values to child components for page rendering.