微信小程序链接传参并跳转新页面

像传统的传参一样，只是在微信里面的标签不一样而已，navigator标签的文档说明：

https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122

下面是传递参数并展示新页面的一个简单栗子：

这是index.wxml代码：

<navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}">
<view>评19</view>
</navigator>

url是../detail/detail....... 传递参数是id="{{item.id}}" url="../detail/detail?id=88"

detail.js代码如下

Page({
onLoad: function(options) {
var duanziId = options.id
var that = this
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1000
})
wx.request({
url: 'https://www.xxx.xxx?m=getDetail&duanziId='+duanziId, //服务器参数接收地址，
data: {token:token},
method: 'GET',
success: function(res){
console.log(res.data.result) //打印获取数据
that.setData({
duanziDetail:res.data.result
})
}
})
}
})

detail.wxml代码：

<view class="duanzi-content">
<text class="dz-content">{{duanziDetail.content}}</text>
</view>

app.json中pages配置代码如下

"pages":[
"pages/index/index",
"pages/detail/detail",
"pages/center/center",
"pages/tucao/tucao",
"pages/search/search"
]

目录结构：

以上所述是小编给大家介绍的微信小程序链接传参并跳转新页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解

    微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

  • 微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现

    微信小程序之页面跳转和参数传递的实现 前言: 在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示给大家看一下. 在展示demo前,我们需要先简单的建好项目文件夹做好准备.如下: 标签实现 小程序里面有一个类似于a标签的navigator标签,用来做跳转处理. index页面: <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</n

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

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

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

    微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

  • 微信小程序 页面传参实例详解

    微信小程序 页面传参实例详解

    微信小程序 页面传参 微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"><!--index.wxml--> <view class

  • 微信小程序 页面之间传参实例详解

    微信小程序 页面之间传参实例详解

    微信小程序 传参: 实现效果图: 微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeh

  • 微信小程序 跳转传参数与传对象详解及实例代码

    微信小程序 跳转传参数 传对象 微信小程序跳转传参 一般都是传字符串到下一页,如果要想传对象怎么办呢? 我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象.如下: let str=JSON.stringify(e.currentTarget.dataset.item); wx.navigateTo({ url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str, success: function (res) {

  • 微信小程序链接传参并跳转新页面

    微信小程序链接传参并跳转新页面

    像传统的传参一样,只是在微信里面的标签不一样而已,navigator标签的文档说明: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122 下面是传递参数并展示新页面的一个简单栗子: 这是index.wxml代码: <navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}&quo

  • 微信小程序url传参写变量的方法

    具体代码如下所示: <navigator url="../../pages/newsDetail/newsDetail?id={{news.id}}"> <view class="list-item"> <view class="little-item"> <view class="left-box"> <image src="{{news.thumb[0]}}&

  • 微信小程序 bindtap 传参的实例代码

    微信小程序 bindtap 传参 ,代码如下所示: //index.wxml <view bindtap="changeIndex" data-src="我固定参数"> </view> //index.js page({ data:{ }, changeIndex(e){ console.log(e.currentTarget.dataset.src); //我是固定参数 } }); 可以看出 参数是通过给标签设置 data-参数名=&quo

  • 微信小程序web-view环境下H5跳转小程序页面方法实例代码

    目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

  • 微信小程序上传文件到阿里OSS教程

    前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名 上传文件访问域名 这里我们要在小程序后台配置上传域名(上面的域名是我自己的申请的,后台配置的是公司的的域名,使用的时候你们用一套东西即可). 下图是bucket管理,这里可以新建文件的保存路径,域名管理. (三)服务端签名直传 点击查看文档 这里就不多做介绍了,这是上传文件到oss需要的参数,这些数据可以从后台获取. { "accessid": "

  • 微信小程序自定义底部导航带跳转功能

    微信小程序自定义底部导航带跳转功能

    本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml <!--底部导航 --> <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t

  • 微信小程序 scroll-view 实现锚点跳转功能

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现锚点跳转主要以下几点: 1.最外层容器使用 scroll-view 2.赋值scroll-into-view,如:<scroll-view scroll-into-view="{{toView}}"> 3.设置 scroll-view 滚动方向 scroll-y="t

  • 微信小程序如何实现商品列表跳转商品详情页功能

    微信小程序如何实现商品列表跳转商品详情页功能

    目录 引言 1.1实现首页页面 2.1实现调跳转到手机详情页 总结 引言 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标 首页显示两行文字,多余的文字隐藏,以3个点代替 点击页面不同的地方,能够跳转到不同的手机详情页面 手机详情页包含手机图片,上架日期,价格,手机描述等图文信息** 1.1实现首页页面 效果如下图 代码如下:其中js页面代码包含了跳转 <!--index.wxml--> <view class="container"

随机推荐