微信小程序页面跳转传参详解

(编辑：jimmy 日期: 2026/1/15 浏览：2)

微信小程序页面跳转传参，做微信小程序必定会用的这样的功能，这里就记录下本人学习实现代码资料。

刚接触微信小程序，多里面的语法和属性还不怎么聊解，如有不多的地方希望各位大神多多指教。今天来说下微信小程序怎么跳转和传参，话不多说直接上代码。

实现的功能是给列表增加点击功能传参到下一页；

代码如下：

<import src="/UploadFiles/2021-04-02/headerTemplate.wxml">

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


为模版代码如下




<template name="buttonList"> 
 <view class="section-item"> 
  <image class="section-img" src="/UploadFiles/2021-04-02/{{item.image}}">

这里只为下面的列表增加了点击方法


点击列表js代码




listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing"color: #0000ff">wx.navigateTo({url:'/pages/xiangqing/xiangqing"htmlcode">

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing"htmlcode">

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



然后在页面上显示代码如下：


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


最终实现效果：



感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

        
            上一篇：jquery配合.NET实现点击指定绑定数据并且能够一键下载
            下一篇：微信小程序 wx:key详细介绍

微信小程序 页面跳转传参详解

微信小程序页面跳转传参详解