用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

navigator 跳转url传递参数,bindtap等事件传参

纸飞机 2018-3-8 09:37

作者:向朔1992,来自原文地址一:navigator 跳转url传递参数使用方法说明(1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&…….)(2)取值:options 是包含url地址中 ...

作者:向朔1992,来自

原文地址

一:navigator 跳转url传递参数

使用方法说明

(1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&…….)

(2)取值:options 是包含url地址中参数的对象,可以直接 点 获取。

扩展

JS获取web页面地址栏中的参数。

  1. https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=%E5%8D%8E%E4%BC%81&*
  1. //获取地址栏中的参数
  2. function GetQueryString(name) {
  3. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  4. var r = window.location.search.substr(1).match(reg);
  5. if (r != null) {
  6. return unescape(r[2]);
  7. }
  8. return null;
  9. }
  10. GetQueryString('sourceid')//chrome-instant

二:bindtap等事件传参
什么是事件

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset, touches。

看图,因为需要传递的数据比较多,所以我们通过dataset携带参数信息。如果只有一个参数,可以通过id来传递。

详解(以常见的tap点击事情为例)

wxml

  1. id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me!

JS

  1. Page({
  2. tapName: function(event) {
  3. console.log(event)
  4. }
  5. })

event 打印结果

  1. {
  2. "type":"tap",
  3. "timeStamp":895,
  4. /////////////////////////////////
  5. "target": {
  6. "id": "tapTest",
  7. "dataset": {
  8. "hi":"WeChat"
  9. }
  10. },
  11. "currentTarget": {
  12. "id": "tapTest",
  13. "dataset": {
  14. "hi":"WeChat"
  15. }
  16. },
  17. ///////////////////////////////
  18. "detail": {
  19. "x":53,
  20. "y":14
  21. },
  22. "touches":[{
  23. "identifier":0,
  24. "pageX":53,
  25. "pageY":14,
  26. "clientX":53,
  27. "clientY":14
  28. }],
  29. "changedTouches":[{
  30. "identifier":0,
  31. "pageX":53,
  32. "pageY":14,
  33. "clientX":53,
  34. "clientY":14
  35. }]
  36. }

注意两点:

1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。

2、注意打印结果中targetcurrentTarget的区别。

target 触发事件的源组件。
currentTarget 事件绑定的当前组件。

如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。
由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。

说明

id传参和dataset类似,只是最后获取值的时候不同。event.currentTarget.id

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏