微信小程序获取inpu的值怎么弄

微信小程序获取inp的值是通过小程序的形式获得的，但是更多的开发需要单一的inp值，那么微信小程序应该怎么做才能获取单一的inp值呢？怎么弄？

微信小程序没有文档对象，不能抓取输入的元素对象，然后通过文档获取元素值，得到单个输入的值。

微信为输入的组件提供了多个事件，似乎只有通过这些事件才能获得单个输入的价值。

bindblur，失焦事件，e.detail.value取该对象的值。在console.log中记录其他事件对象的每个人都会发现它们都有属性细节。表单中的数据存储在此属性中。此外，还有一个目标属性，它可以向元素添加一个data-id属性，以保存元素中的一些值。这在某些地方很有用，例如在处理选项卡切换时。

好，我们来看看我的小程序项目中的这个例子。简述功能：输入手机号码，获取验证码。在获取认证按钮之前，我必须在js中获取手机号码。

项目图纸：

js代码：

//将属性(事件)添加到//页面

mobileinputevent : function(e){

this.setdata({

mobile:e.detail.value

})

},

verifycode event : function(e){

if(this.data.buttondisable)返回false

that=this

var c=60

var intervalid=setinterval(函数{

c=c-1；

that.setdata({

验证代码时间：c '后再次发送，buttondisable:true

})

if(c==0){

clearinterval(interval id)；

that.setdata({

verifycodetime: '获取验证码'，buttondisable:false

})

}

},1000)

var mobile=this . data . mobile；

var regmobile=/^1d{10}$/；

if(！regmobile.test(mobile)){

wx.showtoast({

标题：‘手机号码不对！’

})

返回false

}

app . sendvirycode(function { }，mobile)；//获取短信验证码界面

}

xml代码：

手机号码：

短信验证码：

{{verifycodetime}}

好了，以上是获取短信验证码的例子，更好的理解微信小程序中单表单值获取的应用。

因为微信开发的ide测试和真机测试有些区别，所以在这个例子的小程序测试中没有发现问题。

bindblur在这个例子中有缺陷。如果用户在输入后直接按钮，则e.detail.value的值为空，即没有获得输入值。使用这个事件应该是让用户先失去焦点，然后get applet按钮，这是没有问题的。但是，用户的行为是不可预测的，不适合使用bindblur。所以这里的bindblur可以用bindinput事件代替，意思是获取实时输入数据。在上一列中，只需将xml bindblur更改为bindinput，其他一切都保持不变。

下面是题目的开头。微信小程序嵌入网页开发步骤。标题到此结束

微信小程序的开发是一件非常复杂的事情，尤其是将微信小程序嵌入到网页中，不仅需要足够扎实的小程序开发技术，还需要相应的小程序代码。我们来看看教程。

方法/步骤

这是小程序的开发框架。比较关键比较本质的是app.js，app.json，app.wxss，其中，js后缀是脚本文件。json后缀是配置文件。wxss后缀是样式表文件。底部标签底部标签是一个标签栏。实现比较简单，只需要简单的配置。app.json

{

第' :页[

页面/功能/功能'，页面/付款/付款'，页面/账户/账户'，页面/索引/索引'，'页面/日志/日志'

],

tabbar':{

颜色' : '#464a56 '，选择颜色' : '#6595e9 '，backgroundcolor': '#ffffff '，borderstyle': '白色'，list': [{

页面路径' : '页面/功能/功能'，文本' : '功能'，icon path ' : ' images/tab _ function _ default . png '，selectedicon path ' : ' images/tab _ function _ sel . png '

},{

页面路径' : '页面/付费/付费'，文本' : '集合'，icon path ' : ' images/tab _ consume _ default . png '，selectedicon path ' : ' images/tab _ consume _ sel . png '

},{

页面路径' : '页面/账户/账户'，文本' : '账户'，icon path ' : ' images/tab _ account _ default . png '，selectedicon path ' : ' images/tab _ account _ sel . png '

}]

},

window':{

navigation barbakgroundcolor ' : ' # 6595 e 9 '，navigationbartextstyle ' : '白色'，navigation bartitletext ' : ' v50 '，backgroundcolor ' : ' # eeeeee '，background textstyle ' : ' light '

}

}

值得注意的是，页面接受一个数组，每个数组都是一个字符串，用来指定小程序由哪些页面组成。每一项代表对应页面的[路径文件名]信息，数组的第一项代表初始小程序页面。在小程序中添加/减少页面需要修改页面数组。不需要为文件名写文件后缀，因为框架会自动找到四个有路径的文件。json，js，wxml . wxss . wxss for integration。

页面标题

如何实现这个标题？

我们只需要将配置放在page.json中的所有页面上，然后在。每个页面的json文件。因为一般页面的窗口属性已经在上面的app.json中配置好了，我们只需要在function.json中配置页面标题

{

navigationbartitletext': '函数'

}

旋转木马图

接下来，实现顶部的转盘。微信提供了一个swiper组件来实现轮播。

autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } } '；

function.js

//function.js

页面({

数据： {

指示：为真，autoplay: true，interval: 5000，工期： 1000，imgurls: [

http://img 02 . tooopen.com/images/2021 09 28/tooopen _ sy _ 143912755726 . jpg '，http://img 06 . tooopen.com/images/2021 08 18/tooopen _ sy _ 175866434296 . jpg '，' http://img 06 . tooopen.com/images/2021 08 18/tooopen _ sy _ 175833047715 . jpg '

],

},

})

这是第一段的结尾。结束了。增加一段。将微信小程序嵌入网页的开发步骤，赢得了758网友的青睐！正文到此结束