微信小程序点击事件传递自定义参数的方法和跨页面传递数据

小程序data-用法

一、data- :

1,绑定
格式为data-XXX,此处是data-id, id是需要传递的参数
【XXX不能有大写】

 
<!-- 绑定data-id 需要传递的参数 格式为data-XXX -->
<view class="today-data" bindtap="goTodayData" data-id="{{item.id}}">
     <view class="today-font">本日数据</view>
</view>

2.获取
使用 e.currentTarget.dataset.xxx来获取传递的参数

  goTodayData(e){
    const id= e.currentTarget.dataset.id
}
解释:比如你在页面元素写的是data-value,那你在js部分就要写e.target.dataset.value就可以取到data-value里的值


## 小程序页面传递数据
1.使用本地缓存

```html
*// A页面中通过setStorageSync在本地缓存数据*
wx.setStorageSync("key","value")
*// B页面中通过getStorageSync读取键值来获取*
wx.getStorageSync("key")

二、url传参(例:wx.navigateTo)

//跳转前的页面
wx.navigateTo({
      url: '/pages/index/index?time=' + time ,
 })
 //跳转后的页面
  onLoad: function (options) {
  	console.log(options.time ) //即可拿到上个页面传过来的参数
  	//包括扫描二维码进来的参数也可以在options里拿到
  }
//如果页面跳转需要传递对象,则需要转成字符串,接收页面再转回对象
var obj = {name:nike}
wx.navigateTo({
      url: '/pages/index/index?obj=' + JSON.stringify(obj),
 })
 //跳转后的页面
  onLoad: function (options) {
  	console.log(options.time) //接收的字符串
  	console.log(JSON.parse(options.item)) //转成对象
  }

三、全局的APP对象

*// A页面代码*
var app = getApp();
app.dataA = "A";
*// B页面代码*
var app = getApp();
var dataB = app.dataA;

你可能感兴趣的:(小程序,前端)