e.detail.value 小程序如何传值

最新推荐文章于 2024-06-13 09:12:56 发布

jzan1984

最新推荐文章于 2024-06-13 09:12:56 发布

阅读量3.9w

点赞数 16

//获取应用实例
const app = getApp()
Page({
data: {
text: “点击”,
inputVal: null
},
input: function(e){
// console.log(e);
this.setData({inputVal:e.detail.value});
},
btnclick:function(){
console.log(this.data.inputVal);
}
})

小程序之间如何传值
（1）URL 传值

这种方式最常用，比如：

wx.navigateTo({
url: ‘…/detail/detail?id=’+id+’&access_token=’+access_token
})
这里面直接通过跳转页面的 URL 进行传值，然后在另一个页面进行接收：

onLoad: function (opt) {
console.log(‘cid =’ + opt.cid); console.log(‘access_token =’ + opt.access_token);
}
这种传值方式只适合值比较少的时候使用，传值比较多的时候，还是建议写本地缓存。

（2）本地缓存

小程序 API 提供了本地缓存数据的 API，默认可以缓存10M的数据，如下：

wx.setStorageSync(‘testData’, testData);
testData 可以是一个 object，在需要的页面直接调用 wx.getStorageSync 即可获取，这样就解决了传值较少的问题了。

（3）全局 App

其实还有第三种方式，就是全局 App 变量。app.js 和 app.wxss 中的代码都是全局生效的，所以我们可以利用这一点儿，在不同页面之间进行传值。

App({
onLaunch: function () {

},
globalData: {
host: ‘https://xxx.com’,
}
})
也可以在其他 JavaScript 里面动态修改 globalData，如 getApp().globalData.host = ‘XXX’;。

5.获取小程序表单数据
做过小程序的同学，都知道小程序中是通过数据渲染页面的，没办法获取 Dom 节点，表单提交就不能像 H5 页面那样去获取表单项的见容了。

小程序中的表单提交必须用户手动触发，不能通过 JavaScript 自动提交。

获取表单数据有两种方式。

（1）获取 event 中的值。

正常的 form 表单提交，都可以在 event.detail.value 中获取到页面表单项填写的值，如下：

零基础入门小程序 & 实战经验分享-爱尖刀

这里需要在 WXML 中的，把 input、textarea、radio 等表单项设置 name 属性，上图中的 title，就是 input 的 name 属性。

type=“text” name=“title” auto-focus=‘true’ />
这种方式获取表单数据很方便，但是，如果需要对表单数据有清除功能，我们该如何实现呢？如下图所示。

零基础入门小程序 & 实战经验分享-爱尖刀

我们先来看看第二种方式。

（2）通过设置变量值保存表单数据。

这种方式也比较好实现，就是给表单项绑定事件，当内容发生变化时，set 一下变量值。所以，提交表单的时候直接获取变量值就 OK 了。

type=“text” bindinput=“inputTitle” name=“title” value="{{title}}" auto-focus=‘true’ />
可以给 input 绑定事件 (bindinput=“inputTitle”)，然后在 inputTitle 里面简单处理一下：

inputTitle: function (e) {
this.setData({
title: e.detail.value,
titleEmpty: e.detail.value.length == 0
})
},

修改视图文件login.wxml

姓名：密码：登陆

</form>

修改登陆样式login.wxss

/* pages/login/login.wxss */
.container{
padding: 1rem;
font-size: 0.9rem;
line-height: 1.5rem;
border-shadow: 1px 1px #0099CC;
}
.row{
display: flex;
align-items: center;
margin-bottom: 0.8rem;
}
.row text{
flex-grow: 1;
text-align: right;
}
.row input{
font-size: 0.7rem;
color: #ccc;
flex-grow: 3;
border: 1px solid #0099CC;
display: inline-block;
border-radius: 0.3rem;
box-shadow: 0 0 0.15rem #aaa;
padding: 0.3rem;
}
.row button{
padding: 0 2rem;
}

form相关属性：
属性名类型说明
report-submit Boolean 是否返回formId用于发送模板消息
bindsubmit EventHandle 携带form中的数据触发submit事件，event.detail = { value : {“name”:“value”} , formId:"" }
bindreset EventHandle 表单重置时会触发reset事件
这里用到了bindsubmit ，用于处理提交的表单数据。

input 相关属性
属性名类型默认值说明
value String 输入框的内容
type String text input的类型，有效值：text,number,idcard,digit,time,date
password Boolean false 是否是密码类型
placeholder String 输入框为空时占位符
placeholder-style String 指定placeholder的样式
placeholder-class String input-placeholder 指定placeholder的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度，设置为0的时候不限制最大长度
auto-focus Boolean false 自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性
focus Boolean false 使得input获取焦点
bindchange EventHandle 输入框失去焦点时，触发bindchange事件，event.detail={value:value}
bindinput EventHandle 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。
bindfocus EventHandle 输入框聚焦时触发，event.detail = {value:value}
bindblur EventHandle 输入框失去焦点时触发，event.detail = {value:value}
button 相关属性
属性名类型默认值说明
size String default 有效值default, mini
type String default 按钮的样式类型，有效值primary, default, warn
plain Boolean false 按钮是否镂空，背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
formType String 无有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class String button-hover 指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果
此Demo中将button的formType设置为submit用于激活表单提交事件。

实例二: 处理登陆表单数据
修改login.js

// pages/login/login.js
Page({
data:{
userName:’’,
userPassword:’’,
},

formSubmit:function(e){
console.log(e.detail.value);//格式 Object {userName: “user”, userPassword: “password”}

//获得表单数据
var objData = e.detail.value;

if(objData.userName && objData.userPassword){
  // 同步方式存储表单数据
  wx.setStorageSync('userName', objData.userName);
  wx.setStorageSync('userPassword', objData.userPassword);

  //跳转到成功页面
  wx.navigateTo({
    url: '../index/index'
  })
}

//加载完后，处理事件
// 如果有本地数据，则直接显示
onLoad:function(options){
//获取本地数据
var userName = wx.getStorageSync(‘userName’);
var userPassword = wx.getStorageSync(‘userPassword’);

console.log(userName);
console.log(userPassword);
if(userName){
  this.setData({userName: userName});
}
if(userPassword){
  this.setData({userPassword: userPassword});
}

},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

这里使用到了wx.getStorageSync和wx.setStorageSync，这里说一下，上面这两个方法类似于HTML5的本地存储，属于同步存储方式。

这两个方法，使用很简单，列下参数：

wx.setStorageSync(KEY,DATA)

属性名类型必填说明
key String 是本地缓存中的指定的key
data Object/String 是需要存储的内容
wx.getStorageSync

属性名类型必填说明
KEY String 是本地缓存中的指定的key
修改一下login.wxml

    <view class="row">
        <text>姓 名：</text>
        <input type="text" name="userName" placeholder="请输入用户名" value="{{userName}}" />
    </view>
    <view class="row">
        <text>密 码：</text>
        <input type="password" name="userPassword" placeholder="请输入密码" value="{{userPassword}}" />
    </view>

这个小实例，会在登陆的时候，将登陆信息存到本地存储，当下次登陆时，如果本地存储中有相应信息，则直接填写上。

效果（再一次运行后，自动填写上了信息）：

实例三: 处理登陆表单数据（异步）
这里采用异步的方式存放数据。

修改一下login.js

// pages/login/login.js
Page({
data:{
userName:’’,
userPassword:’’,
},

formSubmit:function(e){
console.log(e.detail.value);//格式 Object {userName: “user”, userPassword: “password”}

//获得表单数据
var objData = e.detail.value;

if(objData.userName && objData.userPassword){
  // 同步方式存储表单数据
  wx.setStorage({
    key:'userName', 
    data:objData.userName
  });
  wx.setStorage({
    key:'userPassword', 
    data:objData.userPassword
  });

  //跳转到成功页面
  wx.navigateTo({
    url: '../index/index'
  })
}

//加载完后，处理事件
// 如果有本地数据，则直接显示
onLoad:function(options){
var that = this;
//获取本地数据
wx.getStorage({
key: ‘userName’,
success: function(res){
console.log(res.data);
that.setData({userName: res.data});
}
});
wx.getStorage({
key: ‘userPassword’,
success: function(res){
console.log(res.data);
that.setData({userPassword: res.data});
}
});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

wx.setStorage(OBJECT)

属性名类型必填说明
key String 是本地缓存中的指定的 key
data Object/String 是需要存储的内容
success Function 否接口调用成功的回调函数
fail Function 否接口调用失败的回调函数
complete Function 否接口调用结束的回调函数（调用成功、失败都会执行）
wx.getStorage(OBJECT)

属性名类型必填说明
key String 是本地缓存中的指定的 key
success Function 是接口调用的回调函数,res = {data: key对应的内容}
fail Function 否接口调用失败的回调函数
complete Function 否接口调用结束的回调函数（调用成功、失败都会执行）
实例四: 清除本地数据
这里就不详细写了，直接介绍一下这两个清除本地数据的方法。

wx.clearStorage()

wx.clearStorageSync()

jzan1984

关注

16
点赞
踩
60

收藏

觉得还不错? 一键收藏
1
评论
e.detail.value 小程序如何传值

{{text}}//获取应用实例const app = getApp()Page({data: {text: “点击”,inputVal: null},input: function(e){// console.log(e);this.setData({inputVal:e.detail.value});},btnclick:function(){console.log...
复制链接

扫一扫