【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）
<p>本次小程序的开发使用uni app+vant weapp，vant weapp如何引用和部分组件使用方法如下</p><h3><strong>引入</strong></h3>
<p>在github（https://github.com/youzan/vant-weapp）下载dist文件，在项目目录下创建wxcomponents/vant，把dist文件复制进来</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902554/201912/1902554-20191231170407329-1801314448.png"></p>
<p> 在pages.json中，如果很多个页面都会引用某组件，就在globalstyle中引入</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index",
"van-icon": "/wxcomponents/vant/icon/index",
"van-cell": "/wxcomponents/vant/cell/index"
}
}</pre>
</div>
<p>单页引用，在对应页的style中</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"> {
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页",
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index",
"van-icon": "/wxcomponents/vant/icon/index"
}
}
}</pre>
</div>
<h3><strong>表单</strong></h3>
<p>UI界面如下</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902554/202001/1902554-20200106160022166-1447382859.png"></p>
<h3>输入框van-filed</h3>
<p>注意：van-field并没有直接实现双向绑定，需要在input事件上重新赋值</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">//模板中<br><van-field :value="updateParam.deviceSn" required label="设备Sn" placeholder="请输入设备Sn" @input="getDeviceSn" />
//js中
methods：{
getDeviceSn(e) {
this.updateParam.deviceSn = e.detail
},
}
</pre>
</div>
<p>精简写法如下</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><van-field :value="updateParam.deviceSn" clearable required label="设备Sn" placeholder="请输入设备Sn" @input="updateParam.deviceSn=$event.detail" /></pre>
</div>
<h3>登录验证码</h3>
<p><img src="https://img2018.cnblogs.com/i-beta/1902554/202001/1902554-20200115125845782-1873265174.png"></p>
<p> 点击后</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1902554/202001/1902554-20200115130300969-718309844.png"></p>
<p>template</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> <van-field :value="param.username" clearable label="账号" placeholder="请输入账号" @input="inputUsername" />
<van-field :value="param.code" center clearable type="number" label="短信验证码" placeholder="请输入短信验证码" use-button-slot
@input="inputCode">
<van-button slot="button" plain size="small" :disabled="tip!=='发送验证码'" type="info" @click="sendCode">{{tip}}</van-button>
</van-field>
</pre>
</div>
<p>在data中定义两个变量</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> timer: null,
tip: '发送验证码'
</pre>
</div>
<p>methods</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> sendCode() {
let time = 10
this.tip = time + 's后重试'
this.timer = setInterval(() => {
if (time === 1) {
this.tip = '发送验证码'
clearInterval(this.timer)
this.timer = null
} else {
time--
this.tip = time + 's'
}
}, 1000)
},</pre>
</div>
<h3>弹出层+选择器</h3>
<p>弹出层van-popop和选择器van-picker配合使用，实现效果如下</p>
<p> <img src="https://img2020.cnblogs.com/blog/1902554/202003/1902554-20200320135503161-832942134.png"></p>
<p> 代码</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// template
<van-field :value="orgName" readonly required label="所属组织" placeholder="请选择所属组织" @click.native="popupFlag=true" />
<van-popup :show="popupFlag" @close="popupFlag=false" round position="bottom">
<van-picker :columns="orgList" show-toolbar @cancel="popupFlag" @confirm="chooseOrg" value-key="name" />
</van-popup><br>
// methods
chooseOrg(e) {
this.updateParam.orgId = e.detail.value.id
this.orgName = e.detail.value.name
this.popupFlag = fasle
this.getMemberList(this.updateParam.orgId)
},</pre>
</div>
<p>在vant-weapp中，简单选择器的实现需要定义三个变量，1个方法：</p>
<ul>
<li>变量1：数组，即在选择器中遍历的数组</li>
<li>变量2：flag，控制弹出层的显示和隐藏</li>
<li>变量3：van-field中的value，即你选中项的文字说明</li>
<li>方法1：当你点击确认时，把选中项的id放入表单，文字说明改成你选中项的名字</li>
</ul>
<p>用vant weapp选择器优点：</p>
<ul>
<li>我们可以控制弹出层的方向</li>
<li>样式层面上的铺垫和圆角弹出层</li>
<li>vant有日期事件选择器</li>
<li>跨移动端平台</li>
</ul>
<p>缺点：</p>
<ul>
<li>当你一个表单有多个选择器的时候，那其中的变量就需要定义很多</li>
<li>很多工作是重复比如打开弹出层关闭弹出层</li>
</ul>
<p>对比uni或小程序原生picker选择器，只要一个变量和一个方法，但是用了样式又不统一了</p>
<p>因此需要自己基于vant-weapp封装一个选择器，封装组件请查看另一篇笔记</p>
<h3><strong>省市区picker van-area</strong></h3>
<p><img src="https://img2018.cnblogs.com/i-beta/1902554/202001/1902554-20200106163151925-1627108538.png"></p>
<p>该选择器最重要的是引入area.js，在https://github.com/youzan/vant/blob/dev/src/area/demo/area.js下载文件</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> <van-popup :show="areaFlag" @close="closeAreaPopup" round position="bottom">
<van-area :area-list="areaList" @cancel="closeAreaPopup" @confirm="chooseArea" />
</van-popup></pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> showAreaPopup() {
this.areaFlag = true
},
closeAreaPopup() {
this.areaFlag = false
},
chooseArea(e) {
this.updateParam.areaCode = e.detail.values.code
this.areaName = e.detail.values.name + ',' + e.detail.values.name + ',' + e.detail.values.name
this.closeAreaPopup()
},</pre>
</div>
<h3>地图</h3>
<p>获取当前位置</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> getGps() {
let self = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
self.gps = res.longitude + ',' + res.latitude
self.updateParam.gpsLng = res.longitude
self.updateParam.gpsLat = res.latitude
}
});
},
</pre>
</div>
<p>选择位置，代码和效果如下</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> showMapPopup() {
let self = this
uni.chooseLocation({
success: function (res) {
self.gps = res.longitude + ',' + res.latitude
self.updateParam.gpsLng = res.longitude
self.updateParam.gpsLat = res.latitude
self.updateParam.addressDetail = res.name
}
});
},</pre>
</div>
<p><img src="https://img2018.cnblogs.com/i-beta/1902554/202001/1902554-20200106163326020-784815297.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/Mijiujs/p/12125429.html
頁:
[1]