Detailed introduction to WeChat applet parameter passing

This article mainly introduces relevant information on the detailed explanation of parameter transfer of WeChat mini programs. Friends who need it can refer to

The launch of WeChat mini programs will undoubtedly make waves again in the mobile Internet industry.

Some people will question whether the mini program will be popular. I don’t know whether it will be popular. You can understand everything by looking at the number of users on WeChat.

WeChat Mini Program - Parameter Passing

Here I found two ways to pass parameters on the mini program. For convenience, I will share them with you separately.

1. Parameter passing through events

Let’s first look at the definition of events in the mini program:

#What is an event?

Here is the list. Text events are the communication method from the view layer to the logic layer.
Here is a list of text events that can feed back user behavior to the logic layer for processing.
Here is a list of text events that can be bound to the component. When the trigger event is reached, the corresponding event processingfunction in the logic layer will be executed.
Here is the list text Event Object can carry additional information, such as id, dataset, touches.

It is clearly pointed out that it is the communication method from the view layer [wxml] to the logic layer [js]. The time object can carry additional information, use this event It is definitely correct to pass parameters. Next, let’s take a look at the actual example:

View.wxml

92dac6b934b657e1acca8a30537e69a4 Click me! de5f4c1163741e920c998275338d29b2

Logic.js

Page({
 tapName: function(event) {
      console.log(event.target)
 }
})

log print

You can see that the dataset contains the value of data-hi="MINA" we set. Now let's take a look at what we just wrote. First of all, bindtap. What starts with bind is to bind an event to it. The name of this event is the value after the "=" sign. It is the name of the bound event. It needs to be in the logic [js 】layer definition. Then there is the value passing. Friends who have noticed it can see that the data-hi we wrote here is the same definition method as the value passing we usually write in js. This data-* corresponds to the dataset value in the attribute target of the event. What we need to call here is event.target.dataset.hi to get the value corresponding to data-hi.

You need to pay attention to the definition name of data here: Writing method: Starting with data-, multiple words are linked by hyphens-, and cannot be capitalized (uppercase will be automatically converted to lowercase), such as data-element-type, Finally, the hyphen will be converted to camel case elementType in event.target.dataset.

Official example:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
 bindViewTap:function(event){
  event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
  event.target.dataset.alphabeta == 2 // 大写会转为小写
 }
})

2. Navigator jump url passing parameters

*.wxml

<view class="btn-area">
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>

*.js jump After arriving at the new page, directly receive the parameters in onload. The receiving method is options.[Parameter value]

Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  })
 }
})

Okay, that’s all for today. I’ll write the document link by the way. , are included in the documents written above. I just moved them out and said them in my words. …(⊙＿⊙；)…

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

The above is the detailed content of Detailed introduction to WeChat applet parameter passing. For more information, please follow other related articles on the PHP Chinese website!