微信小程序定位到input操作实例

编辑：小飞燕发布时间：2021-04-19 10:10:58

导语本文整理了全网深受用户关注的个微信小程序定位到input操作实例经验知识，可以帮助您全面了解代理怎么做，小白也能成为高手，跟随小编一起来看一看吧！

微信小程序的表单值可以通过表单事件获取，但是在小程序的表单提交之前还有很多应用需要获取。矛盾的是，小程序没有文档对象，所以要获取单个输入的值，不能抓取输入的元素对象，然后通过文档获取元素值。这时候就需要微信小程序定位输入，从而获得单个输入的价值。

定位小程序输入的具体介绍：

bindblur，失焦事件，e.detail.value取该对象的值。每个记录其他事件对象的人都会发现它们都有属性细节。表单中的数据存储在此属性中。此外，还有一个目标属性，它可以向元素添加一个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代码：

手机号码：

短信验证码：

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

补充说明：

因为微信开发的ide测试和真机测试有些出入，所以在这个例子中测试的时候没有发现问题。

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

定位微信小程序开发设置好输入后，文章开头提到的问题就可以顺利解决了。当然前提是你成功开发了微信小程序商店提供的教程。如果失败了，小编不能保证你的问题能得到解决。

下面是题目的开头。关于微信小程序地图定位，这里是标题的结尾

微信小程序的地图定位怎么做？微信小程序一发布内部测试就火了，引起了人们的关注。下面的小系列会给你讲解如何做微信小程序的地图定位。

需要完成的功能：

1.要完成的重点是城市定位。

2.就是换个城市。

首页我们先参考微信小程序打开的公文了解一下：

在这里我们可以找到当前位置的纬度和经度

getlocation:函数

{

var that=this wx.getlocation(

{

成功：功能(res) {

console.log(res)

that.setdata({

haslocation: true，位置：格式位置(res经度，res纬度)//这是获取纬度和经度

})

}

})

//将经纬度转换成城市名称和街道地址，参见搜索地图界面文档：http://developer.baidu.com/map/index.php? title=web api/guide/web service-地理编码

onload:函数(选项){

console.log('onload ')

那=这个

wx.getlocation({

成功：功能(res) {

wx.request({

url : ' http://api。地图。搜索。com/geocoder/v2/？ak=btsvvwf 0 tm1 zubebzfz 6 qqwfcallback=renderreverselolocation=' res . latitude '，' res .经度output=jsonpois=1 '，data: {}，标头： { ' content-type ' : ' application/json ' }，成功：功能（操作){

console.log(ops.data)

}

})

//console.log(res)

//那个。setdata({

//haslocation: true，//location :格式位置(res。经度，res。纬度)

//})

}

})

}

这里用到微信小程序的文档里面有发起的是安全超文本传输协议请求

这里面有案例我就不多讲解：

上面的代码打印出来的数据是：

renderreverserenderreverse(

{ '状态' :0,

结果' :

{'location':{'lng':114，057867999997，' lat':22，22 } 19999年，1999年，1998年，1999年，1999年，1999年，1999年，1999年，1999年，1999年，1

格式化地址' : '广东省深圳市福田区福华一路138-5',

商务' : '购物公园，新洲，香蜜湖，地址组件' : {'country' :' china '，' country _ code' 33600，'省份' : '广东省'，'城市' : '深圳'，'区' : '福田区'，'广告代码' street': '华福一路'，' street _ number' :' 138-5 '，'方向' : '附近'，'距离' :' 18'}，' pois' :37777777777375办公大楼'，'电话' : ' '，' uid ' : ' c7fb 04 bd 8 fb 44d 68 fb 0 cad85 '，' zip' :''}，{'addr' : '深圳福田区'，' cp' : ' '，'方向我们的名字是' : '购物公园'，' poitype ' : '购物'，' point' :我们的名字是' : '投行大厦'，' poitype':' real estate '，' point' : {'x' 2020208，' y'}，' tag ' .3033030005 office building '，' tel' : ' '，' uid ' : ' b3 a 40 a 67 bed be 7782 fb 17e a 0 '，' zip' :''}，{ ' addr ' : {'addr' 3360 '华福一路88号'，' cp' : '我们的名字' : '中央商务大厦'，' poitype': '房地产'，' point' : {'x' 141531315，' y' 206121 '，' tag office building '，' tel' : ' '，' uid ' : ' cac 5fc 76d 0304 d8 e 2d b 96 d8 b '，' zip ' 深圳市福田中心区(投资大厦旁)'，' cp' 3360' distance' :' 229 '，' name ' : ' marco polo good day hotel in深圳'，' poitype':' hotel '，' point' : {'x '，' y ' .3369988100805 star hotel '，' tel ' : ' '，' uid' :' 0523a14106ceb804b

: ' '，' uid ' : ' 9884 a 864 bb 2c 032 af 8dc 85d 1 '，' zip' :''}，{'addr' : '深圳福田区深南大道4103号兴业银行大厦17-18层'，' cp' :' distance' :' 158 '，' name' : '深圳公证处(一路)'，' poitype ' :

可以找城市发进去。

第二步：换城市：

在我们微信小程序的开发文档中，有

采摘者

滚动选择器，现在支持三个选择器，按模式区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

普通选择器：模式=选择器

属性名称类型默认值的描述

当range array[]模式为选择器时，范围有效

当valuenumber0mode是选择器时，它是一个数字，指示选择了哪个范围，从0开始。

bindchangeeventhandle值更改时触发更改事件，event.detail={value: value}

时间选择器：模式=时间

属性名称类型默认值的描述