Shulou(Shulou.com)05/31 Report--

This article mainly explains "How to realize the value transmission of Weixin Mini Programs (Mini)." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "How to realize the value transmission of Weixin Mini Programs"!

Weixin Mini Programs (Mini) Transfer Value

Mini programs common values are the following, a complete project written down, the probability of use is almost 100%.

List index subscript value

page transfer

form form value

1. List index subscript value

The implementation method is: data-index="{{index}}" digging and e.currentTarget.dataset.index to fill the pit

1.1 produced value

delete

Add data-index="{{index}}" custom properties and bind click event bindtap="delete" in delete icon and text

delete

Implement the delete method and take the index index value.

delete: function (e) { var index = parseInt(e.currentTarget.dataset.index); console.log("index" + index);}

What if instead of e.currentTarget, you use e. target?

This will cause index values to be output only in points, and sub-elements will output NaN.

那target有什么用呢，用于区分子元素与外部元素要分别处理时，比如换用户头像的场景，点击头像本身预览大图，而头像所在的点整一行，将是切换头像。

1.2 取出值

试图从index数据中找出相应元素删除地址

// 找到当前地址AVObject对象var address = that.data.addressObjects[index];// 给出确认提示框wx.showModal({ title: '确认', content: '要删除这个地址吗？', success: function(res) { if (res.confirm) { // 真正删除对象 address.destroy().then(function (success) { // 删除成功提示 wx.showToast({ title: '删除成功', icon: 'success', duration: 2000 }); // 重新加载数据 that.loadData(); }, function (error) { }); } }})

2. 页面传值

从收货地址列表页中传地址id到编辑页面，以读取原地址供修改之用。

address/list页面实现以下代码

编辑edit: function (e) { var that = this; // 取得下标 var index = parseInt(e.currentTarget.dataset.index); // 取出id值 var objectId = this.data.addressObjects[index].get('objectId'); wx.navigateTo({ url: '../add/add?objectId='+objectId });},

address/add页面实现onLoad(options)方法，从url路径中获取objectId

onLoad: function (options) { var objectId = options.objectId}

然后就是访问网络以及渲染页面了。

3. form表单取值

3.1 方式一，通过与标签配合使用

布局如下：

Submit

js取值：

formSubmit: function(e) { // detail var detail = e.detail.value.detail; // realname var realname = e.detail.value.realname; // mobile var mobile = e.detail.value.mobile;}

3.2 方式二，

通过实现

// 实现相应多个**Confirm方式detailConfirm: function(e) { var detail = e.detail.value;}realnameConfirm: function(e) { var realname = e.detail.value;}mobileConfirm: function(e) { var mobile = e.detail.value;}

通过方式一与方式二的对比可以看出，虽然同样都能实现取值的目标，但是它们的使用场景有所不同，前者适合与提交大量表单项时，比如用户完善个人资料，收货地址填写;而后者适合只做一两个表单项时，比如快递单号录入，绑定手机号码。

如果需要类似ajax即时响应的，应该选用后者，因为input能使用来实现即时取到值，比如商品搜索框输入手机关键字，应出现iPhone7，Mate8等候选词这样的场景。

到此，相信大家对"微信小程序怎么实现传值取值"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.