uniapp城市列表_uni-app: 根据定位获取天气(附城市控件)

通过本章节你能学到那些？

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目录，右击新建页面，