获取微信小程序的input控件的value

习惯了vue的方式,我以为javascript世界默认是双向绑定的。可...微信小程序除外,虽然显示值还是value={{jsproperty}}。整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了。

如何获取呢?大体上两种办法:

一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput、bindblur。前者是录入时处理,后者是控件失去焦点时处理。如果每个控件都需要一个绑定的方法,这当然是可怕的。利用bindblur说明一下如何使用一个方法来解决全部控件的绑定吧。

先是js的代码,节选一部分如下:

data: {
    userinfo: {}, //提交的数据
  },
  // input框输入失去焦点时判断
  inputWatch:function (e) {
    console.log(e.currentTarget);
    let userinfo = this.data.userinfo;
    let item = e.currentTarget.dataset.name;
    userinfo[item] = e.detail.value;
    this.setData({
      userinfo
    });
    console.log(‘userinfo‘, userinfo)
  },

  wxml中需要绑定事件,定义dataset,加上value显示的设置

<input class="weui-input"  bindblur="inputWatch" data-name=‘userphone‘ value="{{userinfo.userphone}}" placeholder="请输入联系电话" />

  有没有一种很累的感觉。

第二种办法是使用form来获取录入的值,wxml需要指定name,比上面稍省一点

    <form bindsubmit=‘onNext‘>
        <input class="weui-input"  name="userphone"  value="{{userinfo.userphone}}" placeholder="请输入联系电话" />
        <button class="weui-btn" formType="submit" type=‘primary‘>下一步</button>
   </form>

  以下是js文件的onNext方法

onNext:function(data){
     //暂存当前表单信息
     console.log(data.detail.value.userphone)
},

  

以上两种办法不能混合使用。原因是inputWatch调用了setData,而没有绑定事件的控件的值还没有提交到userinfo.

原文地址:https://www.cnblogs.com/kevin-Y/p/12586626.html

时间: 2024-10-05 10:56:52

获取微信小程序的input控件的value的相关文章

只需两步快速获取微信小程序源码

只需两步快速获取微信小程序源码 第一次在掘金这样高大上的社区写文章,忐忑地敲下我获取小程序源码过程中的经验分享. 最近在学习微信小程序开发,半个月学习下来,很想实战一下踩踩坑,于是就仿写了某个小程序的前端实现,过程一言难尽,差不多两周时间过去了,发现小程序的坑远比想象的要多的多!!在实际练手中,完全是黑盒的,纯靠推测,部分效果在各种尝试后能能做出大致的实现,但是有些细节,实在不知道如何去实现.这种时候,真的很想一窥源码,查看究竟,看看大厂的前端大神们是如何规避了小程序的一些比较奇葩的坑. 于是就

微信小程序给input、picker、textarea编写统一的更新数据逻辑

wepy开发小程序 以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量 <input type="text" value="{{inputdata}}"/> data = { inputdata: '数据' } 当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata. 但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以

两步获取微信小程序源码

1.wxappUnpacker https://github.com/qwerty472123/wxappUnpacker 2.只需两步获取任何微信小程序源码 https://zhuanlan.zhihu.com/p/37667537 原文地址:https://www.cnblogs.com/mlch/p/9602045.html

C# 获取微信小程序access_token

1 /// <summary> 2 /// 获取access_token 3 /// </summary> 4 /// <returns></returns> 5 public static string GetAccessToken() 6 { 7 string token = string.Empty; 8 try 9 { 10 # 微信小程序接口 11 string wechatapi = ConfigurationManager.AppSetting

微信小程序判断input是否为空

微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view class="name"> <text>姓名</text> <input type='text' placeholder='收货人姓名' value="{{userName}}" bindblur='username'></in

python获取微信小程序openid及用户信息

填坑记录:1.个人微信公众订阅号是不能申请微信认证的.公众号的类型在注册时一旦选择就不能更改,微信公众号认证的功能除个人订阅号外,都可以申请认证,因而个人订阅号不能申请认证.这句话的意思就是个人订阅号无法开发小程序. 2.个体户营业执照(个体户)可申请微信服务号并申请开发小程序,但需微信认证复用资质并用新邮箱注册小程序账号 3.微信开发工具创建微信小程序填写的appid是小程序的appid(不是微信公众号的),不能是个人小程序的appid,个人小程序没有获取用户信息的权限 4.调用接口获取用户信

关于.NET HttpClient方式获取微信小程序码(二维码)

随着微信小程序的火热应用,市面上有关小程序开发的需求也多了起来.近来分析了一项生成有关生成微信小程序码的需求——要求扫码跳转到小程序指定页面(带参数):看了下小程序官方文档,以及网上的例子,未看到多少有价值的采用C#调用小程序接口生成小程序码的例子,于是拾起多年前的代码,略作分析尝试,在此分享给有需要的人,并以此抛砖引玉. 此文以HttpClient方式示例,当然采用老旧的HttpWebRequest也可以,在此不作分析.生成微信小程序码(二维码)的接口主要有三个: https://develo

微信小程序之触控事件(四)

>>>什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如id, dataset, touches. >>>事件分类 touchstart 手指触摸 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如弹窗和来电提醒 touchend 手指触摸动作结束 tap 手指触摸后离开 longtap 手指触摸

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教