通过本章节你能学到那些?
1、Uni-App 测试数据封装
2、Uni-App 城市控件(Uni-App元素操作相关)
3、ES6 多种遍历方式区别
下面我们来具体看看:
Uni-App 测试数据封装
城市控件,我们就查询接口了,根据高德提供的城市数据,我们进行处理后,放到一个文件中。
// Json.js
const cityList = [{
"firstLetter":"A",
"cityList":[{
"cityID":"513209",
"city":"阿坝县",
"abbr":"阿坝县",
"firstSpell":"abx",
"spell":"abaxian",
"latitude":32.908167,
"longitude":101.712951,
"isSecond":1
}, {
...
}]
}, {
"firstLetter":"B",
"cityList":[{
"cityID":"110000",
"city":"北京市",
"abbr":"北京",
"firstSpell":"bjs",
"spell":"beijingshi",
"latitude":39.929986,
"longitude":116.395645,
"code":"010",
"sort":1,
"isSecond":0
}, {
...
}]
})
export default {
cityList
}
然后我们在main.js里面引入,使其可以共用。
// main.js
...
import Json from './Json'
const json = type=>{
// 模拟异步请求数据
return new Promise(resolve=>{
setTimeout(()=>{
resolve(Json[type]);
}, 500)
})
}
Vue.prototype.$api = {json};
下面,我们就可以在任意vue页面使用this.$api.json(‘xxxx’),来获取Json.js里面暴露的对象了。
this.cityList = await this.$api.json('cityList');
下面我们对cityList的数据进行渲染
Uni-App 城市控件
1、选择pages目录,右击新建页面,