Detailed explanation of WeChat applet page jump and parameter passing

This article mainly introduces the relevant information on the detailed explanation of page jump of WeChat mini program, and attaches simple examples and implementation renderings. Friends in need can refer to

WeChat mini program page jump Passing parameters is a function that must be used when making WeChat mini programs. Here I will record the information I learned to implement the code.

I have just come into contact with WeChat mini-programs, and I don’t know much about the syntax and attributes in them. If there are not many places, I hope you can give me some advice. Today I will talk about how to jump and transfer parameters in the WeChat applet. Without further ado, let’s get straight to the code.

The function implemented is to add a click function to the list and pass parameters to the next page;

The code is as follows:

<import src="../WXtemplate/headerTemplate.wxml"/> 
<view> 
 <!--滚动图--> 
 <view> 
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoPlay}}" interval="{{intervalTime}}" duration="{{Time}}"> 
 <block wx:for="{{imageURl}}"> 
  <swiper-item> 
   <image src="{{item}}" class="imagePX"></image> 
  </swiper-item> 
 </block> 
 </swiper> 
 </view> 
 <!--功能按钮--> 
 <view class="section-bg"> 
 <block wx:for="{{buttonNum}}"> 
  <!--模版--> 
  <template is="buttonList" data="{{item}}"/> 
  <!--<view class="section-item"> 
  <image class="section-img" src="{{item.image}}"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view>--> 
 </block> 
 </view> 
 <!--资讯列表--> 
 <view> 
 <block wx:for="{{listNum}}"> 
  <template is="newList" data="{{item,index}}"/> 
 </block> 
  
 </view> 
 
 
 </view>

where

4d49e5dbce84bf7a2869c84b59c185f6

The template code is as follows

<template name="buttonList"> 
 <view class="section-item"> 
  <image class="section-img" src="{{item.image}}" bindtap="buttonClick"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view> 
</template> 
 
<!--list--> 
<template name="newList"> 
 <view class="section-list" bindtap="listClick" id="{{index}}"> 
 <view> 
  <image class="list-img" src="{{item.image}}"></image> 
 </view> 
 
  <view class="section-textt"> 
  <view class="title"><text>{{item.title}}</text></view> 
  <view class="subTitle"><text>{{item.subTitle}}</text></view> 
 </view> 
 </view> 
 
</template>

Only the click method is added for the following list

Click list js code

##

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'}) 
 }

where

wx.navigateTo({url:'/pages/xiangqing /xiangqing?id=parameter of the previous page'})

is the jump method, id is the parameter that needs to be passed. If the parameter is a dynamic parameter, the code is as follows:

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p}) 
 }

where p is the id value set above for each row

The value code on the next page is as follows:

 data:{ 
 // text:"这是一个页面" 
 title:'' 
 }, 
 onLoad:function(options){ 
 // 页面初始化 options为页面跳转所带来的参数 
 this.setData({ 
 title:options.id 
 })

Then display the code on the page as follows:

89c662c6f8b87e82add978948dc499d2{{title}}de5f4c1163741e920c998275338d29b2

Final effect:

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