Detailed Explanation of Page Jumping with Parameters in WeChat Mini Program

　Page jump and parameter passing in WeChat Mini Program, this is a function that must be used when making WeChat Mini Program. Here, I record the code materials I learned to implement this function.

Just starting with WeChat Mini Program, I'm not very familiar with the syntax and properties inside. If there are any misunderstandings, I hope the great gods will give me more guidance. Today, let's talk about how to jump and pass parameters in WeChat Mini Program, without further ado, let's go straight to the code.

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

　　　

The code is as follows:

<import src="../WXtemplate/headerTemplate.wxml"/> 
<view> 
 <!--Scrolling image--> 
 <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> 
 <!--Function button--> 
 <view class="section-bg"> 
 <block wx:for="{{buttonNum}}"> 
  <!--Template--> 
  <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> 
 <!--Information list--> 
 <view> 
 <block wx:for="{{listNum}}"> 
  <template is="newList" data="{{item,index}}"/> 
 </block> 
 </view> 
 </view> 

Among them

<template is="buttonList" data="{{item}}"/>　

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> 

Here only the click method for the list below is added

Click list js code

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

Among them

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

This is a jump method, id is the parameter 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) 
 } 

Among them, p is the id value set for each line above

The code to take values on the next page is as follows:　

 data:{ 
 // text:"This is a page" 
 title:'' 
 }, 
 onLoad:function(options){ 
 // Page initialization options are the parameters brought by page jump 
 this.setData({ 
 title:options.id 
 ) 

Then display the code on the page as follows:

<view>{{title}}</view>　

Final implementation effect:

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