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
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:
<pre name="code" class="javascript"> 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:
<pre name="code" class="javascript"> data:{
// text:"这是一个页面"
title:''
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
this.setData({
title:options.id
})Then display the code on the page as follows:
{ {title}}
Final effect:
Thank you for reading, I hope it can help everyone, thank you Thank you for your support of this site!
For more WeChat mini programs, detailed explanations of page jumps and parameter passing, please pay attention to the PHP Chinese website for related articles!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
