1、Uni-App 测试数据封装 2、Uni-App 城市控件(Uni-App元素操作相关) 3、ES6 多种遍历方式区别
要源码的同学,购买后可以私信我。下面我们来具体看看:
城市控件,我们就查询接口了,根据高德提供的城市数据,我们进行处理后,放到一个文件中。
// 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的数据进行渲染
1、选择pages目录,右击新建页面,记得勾选自动在pages.json中注册,否则需要手动去配置它。
新建完成后,pages.json会多一段配置
{
"path" : "pages/city/city",
"style" : {
// 手动配置title
"navigationBarTitleText": "城市选择"
}
}
同时,pages目录下会多一个目录city,我们的城市选择页面就写到city/city.vue页面。
2、获取城市数据
// city/city.vue
data() {
return {
cityList: []
};
},
async onLoad() {
this.cityList = await this.$api.json('city');
console.log(this.cityList);
},
打印数据如下图:
3、html结构
// 对应样式
.filter{
position: fixed;
top: 80upx;
font-size: 24upx;
right: 0;
line-height: 40upx;
text-align: right;
z-index: 10;
.li{
padding-left: 20upx;
padding-right: 20px;
}
}
.city-list{
.letter{
padding: 10upx 20upx;
background: #DCDFE660;
display: block;
}
.city{
padding: 0upx 20upx;
line-height: 64upx;
border-bottom: 1upx solid #F8F6FC;
font-size: 30upx;
&:last-child{
border-bottom: none;
}
}
}
H5预览图:
4、事件处理 (1)选择城市列表事件
choose (item) {
// 选择城市后,将城市名字,adcode,经纬度缓存给vuex
this.$store.commit('setCity', {
city: item.city,
adcode: item.cityID,
latitude: item.latitude,
longitude: item.longitude
})
// 然后根据经纬度查询具体位置
this.$store.dispatch('getLocation', {
location: `${item.longitude},${item.latitude}`
})
// 最后返回首页
uni.navigateBack({
delta: 1
});
}
下面看store.js实现
// store/index.js
mutations: {
...
setCity(state, data){
state.location = {
address: data
};
},
setLocation(state, data){
data = data.regeocode.addressComponent;
state.location = {
address: {
adcode: data.adcode,
city: data.city.length && data.city || data.province,
district: data.district
}
};
}
},
actions: {
getWeather({ commit }, params){
...
},
getLocation({ commit, dispatch}, params){
// 高德逆地址解析,根据经纬度获取具体位置
http({
methods: 'get',
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
key: 'd9xxx7d4xx7bx91xx61cxx5',
location: params.location,
output: 'json'
}
}).then((data) =>{
commit('setLocation', data)
dispatch('getWeather', {
city: data.regeocode.addressComponent.adcode
})
}, (err) => {
console.log(err)
})
}
}
逆地址解析数据结构如下:
这里逆地址解析后,又查询了一次天气,就可以更新到首页天气数据了,我们选择城市后,是直接返回的,所以这里查询一次天气,首页就不需要处理了。