微信小程序页面间传值方法

1 通过data-*属性传值

console.log(e.currentTarget.dataset)

实例:data- 是固定的写法，-后面的名字可以随便起字母或英文，但获取的时候要写对应名称。

vxml:

js:

Page({

data:{},

triggers(e){

console.log(e.target.dataset.name)

}

})

2 通过id传递

console.log(e.currentTarget.id)

wxml:

//传id

//传对象

js:

Page({

getIdFun(e){

//获取绑定事件的id

console.log(e.currentTarget.id)//获取id

let id = e.currentTarget.id;

let jsonId = JSON.parse(id)//解析对象

console.log(jsonId)

}

})

3 通过globalData传递参数

const app = getApp();

app.globalData.user = '你好'//设置参数

3-1 app.js //定义全局变量放置数据

globalData:{

name:'zs',

age:20

}

3-2 login.js 事件

Page({

data:{},

getEventFun(e){

const app = getApp();

console.log(app)

//打印结果为：

//globalData:{ name:'zs', age:20 }

}

})

4 通过页面传值options获取

a.vue:

wx.navigateTo({

url:'/pages/a/index?type=100'

}) 或者

wx.redirectTo({

url:'/pages/a/index?type=100'

})

b.vue:

onLoad(options){

console.log(options.type) // 100

}

5 通过storage传递参数

wx.setStorageSync('localVal':'我是本地的');//设置

wx.getStorage({

key:'localVal',

success(res){

console.log(res) //{errMsg:'getStorage:ok',data:'我是本地的'}

}

})

微信小程序页面间传值方法相关推荐

微信小程序页面间传值
1. 通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数 // 源页面A相关代码 wx.navigateTo({url: " ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
微信小程序页面间传递数组对象
在微信小程序中,有时候使用wx.navigateTo()跳转页面时要传递过长的参数或者传递一个数组对象会发现传递不过去情景再现: 发送端接收端输出值我们可以使用以下方法解决: 在发送端对数据进 ...
微信小程序-页面间如何进行传递数据(通信)
前言在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...
微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // ...

微信小程序页面间传值方法

微信小程序页面间传值方法相关推荐

最新文章

热门文章