微信小程序 跳转页面携带参数

页面跳转携带参数

1、若要获取数据源中不同数据(如通过某个id标识不同数据)
   可以在含有事件的标签中添加自定义数据,data-小写xx='xxx',若xxx是变量,则xx='{{xxx}}'

2、在事件回调函数中
  通过event.currentTarget.dataset.xx获取

3、页面跳转时传入参数
  在事件回调中
  在wx.navigateTo的url添加"?键值对"的形式,变量要拼接

4、在跳转页面的js文件中,接收参数
  在onLoad生命周期函数中接收,因为该函数功能就有接收页面跳转的参数
    onLoad:function(option形参代表参数)
    {
      option.键名获取url中的键值
    }

代码示例:
待跳转页面wxml:

<!--pages/news/news.wxml-->
<import src='./new-temp/new-temp.wxml' />


<block wx:for="{{newsData}}" wx:for-item="item" wx:for-index="index" wx:key="key">

  <view bindtap='goNewsDetail' data-newsid='{{item.newsId}}'>
    <template is='temp' data='{{...item}}'/>
  </view>
  
</block>
</view>

待跳转页面js:

var useData=require("../data/newsdata")

Page({
  data: {
      flag:true
  },
  onLoad: function (options) {
   this.setData({
     newsData:useData.newsData
   })

  },
  goNewsDetail:function(event)
  {
   wx.navigateTo({
     url: 'news-detail/news-detail?id=' + event.currentTarget.dataset.newsid
   })

  }

})

跳转页面js:

// pages/news/news-detail/news-detail.js
Page({

  data: {

  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log(options.id);
  },

})

你可能感兴趣的:(微信小程序)