微信小程序-参数传递

#微信小程序-参数传递

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

##1、经过事件进行参数传递 先来看眼小程序对事件的定义：

#什么是事件?

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

##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
    })
  }
})

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

什么是事件

navigator