您的位置：首页 > 编程技术 > js  >  微信小程序 参数传递详解

微信小程序 参数传递详解

 更新时间：2016年10月25日 10:01  点击：1829

微信小程序的推出，无疑将会在移动互联网行业里再次掀起风浪。

有人会质疑小程序会不会火， 会不会火我不知道， 看微信的用户量即可明白一切。

微信小程序-参数传递

这里我找到两种小程序上的参数传递方式，为了方便，我单独拿出来和大家分享下.

一、通过事件进行参数传递

先来看眼小程序对事件的定义：

#什么是事件?

这里是列表文本事件是视图层到逻辑层的通讯方式。
这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理。
这里是列表文本事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
这里是列表文本 事件对象可以携带额外信息，如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
  })
 }
})

好啦，今天就写到这里，我顺便把文档链接写上，上面写的文档里都有。我只是把它们搬出来了，用我的话说了一遍。 …(⊙＿⊙；)…

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

[!--infotagslink--]

相关文章

  • 微信小程序 页面传值详解

    这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13

  • uniapp微信小程序:key失效的解决方法

    这篇文章主要介绍了uniapp微信小程序:key失效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-20

  • PHP常用的小程序代码段

    本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24

  • 微信小程序 网络请求(GET请求)详解

    这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22

  • 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • 微信小程序自定义tabbar组件

    这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • 微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下...2021-10-23

  • Python爬取微信小程序通用方法代码实例详解

    这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29

  • 微信小程序（应用号）开发新闻客户端实例

    这篇文章主要介绍了微信小程序（应用号）开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25

  • 微信小程序手势操作之单触摸点与多触摸点

    这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13

  • 微信小程序 页面跳转传递值几种方法详解

    这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16

  • 手把手教你uniapp和小程序分包(图文)

    本文主要介绍了手把手教你uniapp和小程序分包，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-02

  • 微信小程序实现canvas分享朋友圈海报

    这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-21

  • 微信小程序实现选择地址省市区三级联动

    这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-21

  • 微信小程序实现点击导航条切换页面

    这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-19

  • uniapp,微信小程序中使用 MQTT的问题

    这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11

  • 微信小程序自定义底部弹出框动画

    这篇文章主要介绍了微信小程序自定义底部弹出框动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-16

  • 微信小程序实现登录页云层漂浮的动画效果

    微信小程序目前的火热程度相信不用多言，最近利用空余时间用小程序实现了个动态的登录页效果，所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。...2017-05-09

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27

  • 微信小程序 富文本转文本实例详解

    这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25