微信小程序参数传递教程详解 _生活百科

微信小程序的推出，无疑将会在移动互联网行业里再次掀起风浪。
有人会质疑小程序会不会火，会不会火我不知道，看微信的用户量即可明白一切。

微信小程序-参数传递
这里我找到两种小程序上的参数传递方式，为了方便，我单独拿出来和大家分享下.
一、通过事件进行参数传递
先来看眼小程序对事件的定义：
#什么是事件?
这里是列表文本事件是视图层到逻辑层的通讯方式。
这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理。
这里是列表文本事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
这里是列表文本事件对象可以携带额外信息，如id, dataset, touches 。

很明确的指出了是视图层【wxml】到逻辑层【js】的通信方式，时间对象可以携带额外信息，用这个事件来传递参数肯定没错了，接下来我们就来实际看下例子：
视图.wxml
Click me!

逻辑.js
?
1
2
3
【微信小程序参数传递教程详解】4
5
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 。
官方示例：
?
1
2
3
4
5
6
7
8
DataSet Test
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
event.target.dataset.alphabeta == 2 // 大写会转为小写
}
})
二、navigator 跳转url传参
*.wxml
?
1
2
3
4

跳转到新页面
在当前页打开

*.js 跳到新页面之后在onload里面直接接收参数，接收方法也就是 options.[参数值]
?
1
2
3
4
5
6
7
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
微信小程序嗨图
1月9号微信小程序全面上线，许多科技公司已经蠢蠢欲动，下面我们小编要为大家推荐一款直接在这个微信小程序上DIY自己的照片的小程序：嗨图。

文章插图

嗨图功能：
1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈。
2、分享墙——用户上传的自己DIY作品。
3、立即制作——可以用自己的图来DIY 。
4、告诉我——告诉产品的改进，内容的增加。
想要体验怎么制作属于自己个性朋友圈照片的用户，等1月9号微信小程序上线后，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!