Introducing the implementation method of passing parameters in small programs

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. Next.

1. Parameter passing through events

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

#What is Event?

Here is the list text event is the communication method from view layer to the logic layer.
Here is a list of text events that can feed back the user's 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, and this event is used to pass parameter confirmation. That's right, let's take a look at the actual example:

View.wxml

Click me!

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

passing value. 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 have uppercase letters (uppercase letters 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 parameter passing

*.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 After jumping to 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 also write down the document link, which is included in the document written above. I just moved them out and said them in my words. …(⊙＿⊙；)…

【Related recommendations】

1.

Complete source code of WeChat mini program

2.

WeChat mini program Program demo: Yangtao

The above is the detailed content of Introducing the implementation method of passing parameters in small programs. For more information, please follow other related articles on the PHP Chinese website!