【uni app】vant weapp的引入和部分詳細調用（表單輸入框、驗證碼、彈出層搭配選擇器、地圖）

本次小程序的開發使用uni app+vant weapp，vant weapp如何引用和部分組件使用方法如下

引入

在github（https://github.com/youzan/vant-weapp）下載dist文件，在項目目錄下創建wxcomponents/vant，把dist文件復制進來

 在pages.json中，如果很多個頁面都會引用某組件，就在globalstyle中引入

"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"
                 }
}

單頁引用，在對應頁的style中

        {
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "首頁",
                                "usingComponents": {
                                           "van-button": "/wxcomponents/vant/button/index",
                                           "van-icon": "/wxcomponents/vant/icon/index"
                                 }
                        } 
        }

表單

UI界面如下

輸入框van-filed

注意：van-field並沒有直接實現雙向綁定，需要在input事件上重新賦值

//模板中
<van-field :value="updateParam.deviceSn" required label="設備Sn" placeholder="請輸入設備Sn" @input="getDeviceSn" />
//js中
methods：{
    getDeviceSn(e) {
        this.updateParam.deviceSn = e.detail
    },
}

精簡寫法如下

<van-field :value="updateParam.deviceSn" clearable required label="設備Sn" placeholder="請輸入設備Sn" @input="updateParam.deviceSn=$event.detail" />

登錄驗證碼

 點擊后

template

					<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>

在data中定義兩個變量

				timer: null,
				tip: '發送驗證碼'

methods

			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)
			},

彈出層+選擇器

彈出層van-popop和選擇器van-picker配合使用，實現效果如下

 

 代碼

// 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>

// methods
chooseOrg(e) {
    this.updateParam.orgId = e.detail.value.id
    this.orgName = e.detail.value.name
    this.popupFlag = fasle
    this.getMemberList(this.updateParam.orgId)
},

在vant-weapp中，簡單選擇器的實現需要定義三個變量，1個方法：

• 變量1：數組，即在選擇器中遍歷的數組
• 變量2：flag，控制彈出層的顯示和隱藏
• 變量3：van-field中的value，即你選中項的文字說明
• 方法1：當你點擊確認時，把選中項的id放入表單，文字說明改成你選中項的名字

用vant weapp選擇器優點：

• 我們可以控制彈出層的方向
• 樣式層面上的鋪墊和圓角彈出層
• vant有日期事件選擇器
• 跨移動端平台

缺點：

• 當你一個表單有多個選擇器的時候，那其中的變量就需要定義很多
• 很多工作是重復比如打開彈出層關閉彈出層

對比uni或小程序原生picker選擇器，只要一個變量和一個方法，但是用了樣式又不統一了

因此需要自己基於vant-weapp封裝一個選擇器，封裝組件請查看另一篇筆記

省市區picker  van-area

該選擇器最重要的是引入area.js，在https://github.com/youzan/vant/blob/dev/src/area/demo/area.js下載文件

		<van-popup :show="areaFlag" @close="closeAreaPopup" round position="bottom">
			<van-area :area-list="areaList" @cancel="closeAreaPopup" @confirm="chooseArea" />
		</van-popup>

			showAreaPopup() {
				this.areaFlag = true
			},
			closeAreaPopup() {
				this.areaFlag = false
			},
			chooseArea(e) {
				this.updateParam.areaCode = e.detail.values[2].code
				this.areaName = e.detail.values[0].name + ',' + e.detail.values[1].name + ',' + e.detail.values[2].name
				this.closeAreaPopup()
			},

地圖

獲取當前位置

			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
					}
				});
			},

選擇位置，代碼和效果如下

			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
				    }
				});
			},