小程序模板网

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

发布时间:2018-03-31 09:22 所属栏目:小程序开发教程
原作者:XiaoBaiduQs;

像传统的传参一样,只是在微信里面的标签不一样而已,navigator标签的文档说明:https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html?t=20161122

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

这是index.wxml代码:


	
  1. <navigator class="bury-wrapper wx-li" url="../detail/detail?id={{name.id}}">
  2. <view>评19</view>
  3. </navigator>
url是../detail/detail....... 传递参数是id="{{item.id}}"   url="../detail/detail?id=88"

 

detail.js代码如下


	
  1. Page({
  2. onLoad: function(options) {
  3. var duanziId = options.id
  4. var that = this
  5. wx.showToast({
  6. title: '加载中',
  7. icon: 'loading',
  8. duration: 1000
  9. })
  10. wx.request({
  11. url: 'https://www.xxx.xxx?m=getDetail&duanziId='+duanziId, //服务器参数接收地址,
  12. data: {token:token},
  13. method: 'GET',
  14. success: function(res){
  15. console.log(res.data.result) //打印获取数据
  16. that.setData({
  17. duanziDetail:res.data.result
  18. })
  19. }
  20. })
  21. }
  22. })

detail.wxml代码:


	
  1. <view class="duanzi-content">
  2. <text class="dz-content">{{duanziDetail.content}}</text>
  3. </view>
app.json中pages配置代码如下

	
  1. "pages":[
  2. "pages/index/index",
  3. "pages/detail/detail",
  4. "pages/center/center",
  5. "pages/tucao/tucao",
  6. "pages/search/search"
  7. ]
目录结构:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23000.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询