微信小程序跳转传参
来源:互联网 发布:java静态代理模式步骤 编辑:程序博客网 时间:2024/06/15 04:04
一、通过事件进行参数传递
先来看眼小程序对事件的定义:
#什么是事件?
这里是列表文本事件是视图层到逻辑层的通讯方式。
这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理。
这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
这里是列表文本 事件对象可以携带额外信息,如id, dataset, touches。
很明确的指出了是视图层【wxml】到逻辑层【js】的通信方式,时间对象可以携带额外信息,用这个事件来传递参数肯定没错了,接下来我们就来实际看下例子:
视图.wxml
<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
逻辑.js
Page({
tapName:
function
(event) {
console.log(event.target)
}
})
log打印
可以看到 dataset 里面就是我们设置的data-hi="MINA"的值了。现在我们来看下刚刚我们写的, 首先 bindtap,以bind开头的就是要给他绑定个事件,这个事件的名字就是“=”号后面的数值就是绑定的事件名称,需要在 逻辑【js】层定义上。 然后就是传值了,注意到的朋友可以看到 我们这里写了data-hi 和我们平时写js的传值是同一个定义方法。这个data-*就对应事件的属性target里的dataset 值。这里我们需要调用的话就是 event.target.dataset.hi就能取到data-hi所对应的值。
这里需要注意下 data的定义名称: 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。
官方示例:
<view data-alpha-beta=
"1"
data-alphaBeta=
"2"
bindtap=
"bindViewTap"
> DataSet Test </view>
Page({
bindViewTap:
function
(event){
event.target.dataset.alphaBeta == 1
// - 会转为驼峰写法
event.target.dataset.alphabeta == 2
// 大写会转为小写
}
})
二、navigator 跳转url传参
*.wxml
<view class=
"btn-area"
>
<navigator url=
"navigate?title=navigate"
hover-class=
"navigator-hover"
>跳转到新页面</navigator>
<navigator url=
"redirect?title=redirect"
redirect hover-class=
"other-navigator-hover"
>在当前页打开</navigator>
</view>
*.js 跳到新页面之后在onload里面直接接收参数,接收方法也就是 options.[参数值]
Page({
onLoad:
function
(options) {
this
.setData({
title: options.title
})
}
})
- 微信小程序跳转传参
- 微信小程序-跳转传参
- 微信小程序页面跳转并传参
- 微信小程序 页面跳转传参详解
- 微信小程序链接传参,跳转新页面
- 微信小程序页面跳转传值
- 微信小程序跳转页面传值
- 微信小程序-页面跳转传值
- 微信小程序页面跳转时传参数
- 微信小程序界面跳转传json对象
- 微信小程序-页面跳转
- 微信小程序跳转无效
- 微信小程序:页面跳转
- 微信小程序页面跳转
- 微信小程序,页面跳转
- 微信小程序内部跳转
- 微信小程序页面跳转
- 微信小程序--简单页面跳转
- RxJava结合Retrofit对网络请求结果的统一处理
- linux 网络编程 simple client-server-select 应用
- Android Glide 的使用总结
- 常用排序算法
- 正则表达式、线程
- 微信小程序跳转传参
- notification.setLatestEventInfo过时
- php解析url并得到url中的参数
- CTO、技术总监、首席架构师的区别
- NVIDIA GPU 运算能力列表
- UVa-232
- js面试题
- Ingress 介绍
- Servlet第一个实例之用户登录网址