【小程序开发】页面传值和表单取值
前言
小程序真的很好用，非常的便捷，并且我们可以很轻松的开发属于自己的一款小程序，但是在我们开发写代码的时候难免会遇到一些小坑，然后就是各种的疑问？？？我整理一些我遇到的坑，说不定你也遇到过哈哈哈
取值和传值
在我们开发一个程序的时候，大概率会涉及到要得到一些节点的值或是需要在页面跳转的时候传一些值过去以完成一些事情，我总结三点
- 普通的取值
- 页面传值
- from表单取值
虽然看上去很简单但是偶尔会有一些小坑等着我们
普通的取值
通常情况下我们都是先给组件绑定事件，按照文档的说法，如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
比如我们给一个组件绑定了一个点击事件叫getValue，然后我们有一个函数如下，其中event就是事件对象
getValue:function(event){
// do someing
}
这个event事件对象是基本的对象事件他其中包括了一些属性，对于我们获得想要的值很重要
?，到这之后我们可以知道target,和currentTarget对我们很重要了，所以接下来继续看看文档给了我们什么信息
target
currentTarget
初看可能觉得两个没什么区别，但是这就是坑啊，这两个是有一些区别的，target是触发事件的源组件，也就是说你在button上绑定一个事件那么target就是指向这个button不会变的，而currentTarget就不一样，它指向的是触发事件监听的对象，
注意理解
触发事件监听”的对象与“添加（注册）监听事件”的对象是不一样的！前者是能够触发该事件但没有绑定事件，后者指绑定了事件
填坑
-
1、如果绑定的事件所在组件没有子元素，则用e.target===e.currentTarget一样；
-
2、如果事件绑定在父元素中，且该父元素有子元素，当用e.currentTarget时，不管点击父元素所在区域还是子元素（当前事件），都正确执行，若用e.target时，点击父元素所在区域无错，点击子元素区域，执行报错，报错的原因是事件没绑定在子元素上，是在父元素上，子元素要用e.currentTarget才正确
上面内容中有引用此博客
- https://blog.csdn.net/syleapn/article/details/81289337
官方文档传送
- https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
上面说了很多，但是还没有说到底怎么取值，其实看完上面也差不多了，下面需要提的是dataset
文档的解释：
在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
简单的理解就是我们可以把想要获取的值通过data-定义到组件上，当我们在触发一个事件的时候我们可以通过event.currentTarget.dataset.XX来获取
// 像这样
// e和event等价
info:function(e){
console.log('value:'+e.currentTarget.dataset.value)
}
结果：当我们点击按钮的时候就可以得到我们预先定义好的值了
页面传值
页面传值的使用还是比较多的，特别是我们需要做一些详情页面的时候，经常涉及到需要将上一个页面的某一些值带到第二个页面来。这个坑要少一点，我们一步一步来说吧
首先说跳转吧
仅有两种，其他方法欢迎讨论
- wx.navigateTo(Object object)
- navigator
传参数
虽然有两种跳转的方式，但是它们传递参数的方式是一样的,url后拼接?id(参数名字)=要传递的值
注意
- (如果多个参数用&分开 &name=value&…….)
跳转
wx.navigateTo({
url:"pages/detail/detail?value="123",
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
获得参数
在跳转到的界面的一些生命周期的函数中有一个options，它是包含url地址中参数的对象，可以通过它直接点获取。
onLoad:function(options){
console.log(options.value)
}
from表单取值
这里首先要铺垫一下deatil
- deatil是event事件对象的一个属性，它包括一些额外的信息
ok，接下来要说取值了，常规的做法是通过 与 标签配合使用，然后给input一个name属性，我们在js中就可以使用e.deatil.value.name来获取了
对新手来说这里有一点小坑，新手可能会有疑惑 为什么没有给button绑定事件呢，是不是需要在绑定一个事件，其实不用， 已经绑定了事件，我们在 js 中只需要写一个叫 formSubmit 的函数就好了
formSubmit: function(e) {
// detail
var detail = e.detail.value.detail;
// realname
var realname = e.detail.value.realname;
// mobile
var mobile = e.detail.value.mobile;
}
此处有引用
- https://www.cnblogs.com/lrgupup/p/7609118.html
结语
好记性不如烂笔头，记录一下自己犯过的一些小错❤
如果你喜欢的话可以支持一下！?