基于小程序云開發(fā)能力和Vant業(yè)務(wù)組件實現(xiàn)省市區(qū)選擇
2021-07-26 11:20:46

?

vant weapp的Area省市區(qū)選擇業(yè)務(wù)組件提供了一個云開發(fā)示例但是沒寫詳細的過程，這里把具體步驟說明一下。方便一下別的同學(xué)。

Vant Weapp組件的說明
省市區(qū)選擇組件(https://youzan.github.io/vant-weapp/#/area)

實際項目中，可以通過小程序云開發(fā)的能力，將省市區(qū)數(shù)據(jù)保存在云開發(fā)的數(shù)據(jù)庫中，并在小程序中使用云開發(fā)的接口異步獲取數(shù)據(jù)。
在小程序中使用云能力之前需要先調(diào)用wx.could.init方法完成云能力的初始化。

實現(xiàn)方法

省市區(qū)數(shù)據(jù)獲取

vant的說明：

整體是一個 Object，包含 provincelist, citylist, county_list 三個 key。
每項以省市區(qū)編碼作為 key，省市區(qū)名字作為 value。編碼為 6 位數(shù)字，前兩位代表省份，中間兩位代表城市，后兩位代表區(qū)縣，以 0 補足 6 位。如北京編碼為 11，以零補足 6 位，為 110000。

1.根據(jù)說明我們要先找到完整數(shù)據(jù)(https://github.com/youzan/vant/blob/dev/src/area/demo/area.js)
2.復(fù)制完整數(shù)據(jù)area.js中 export default 對象的內(nèi)容(即export default后面所有內(nèi)容，包含花括號)
3.本地新建一個area.json文件，將上述復(fù)制內(nèi)容粘貼進去并保存

數(shù)據(jù)導(dǎo)入云開發(fā)數(shù)據(jù)庫

1.打開云開發(fā)的管理控制臺，點擊數(shù)據(jù)庫按鈕切換至數(shù)據(jù)庫管理界面
2.點擊界面左側(cè)的加號新建集合，輸入集合名稱(例：area)

3.導(dǎo)入獲取到的省市區(qū)數(shù)據(jù)area.json文件，導(dǎo)入成功后即可看到集合中多了一條記錄

小程序中使用

1.wx.could.init方法完成云能力的初始化
使用mpvue時只需要在src/main.js中添加實例化代碼就可以

1. wx.cloud.init({

2. traceUser: true

3. })

2.具體頁面中調(diào)用獲取數(shù)據(jù)的接口
本示例是在彈層中顯示省市區(qū)(已引入popup及area組件)
vue頁面

1. <van-popup :show="show" position="bottom" custom-style="height: 40%;">

2. <van-area

3. :area-list="areaList"

4. :value="area"

5. @confirm="chooseAddress"

6. @cancel="cancelChoose"

7. columns-placeholder="['請選擇', '請選擇', '請選擇']"

8. />

9. </van-popup>

頁面data

1. data() {

2. return {

3. ...

4. areaList: [],

5. area: ''

6. ...

7. }

8. },

頁面onLoad/onShow鉤子中加入代碼

1. onLoad() {

2. const db = wx.cloud.database()

3. db.collection('area').get()

4. .then(res => {

5. if (res.data && res.data.length > 0) {

6. delete (res.data[0]._id)

7. this.areaList = res.data[0]

8. }

9. this.init()

10. })

11. .catch(err => {

12. console.log(err)

13. })

14. },

15. ?

16. //點擊確定時的方法

17. chooseAddress({ mp }) {

18. let ads = mp.detail.values

19. this.province = ads[0].code

20. this.city = ads[1].code

21. this.district = ads[2].code

22. this.address = ads[0].name + ads[1].name + ads[2].name

23. this.show = false

24. },

效果示例

省市區(qū)彈層

Network請求

?

?