uni-app: 根据定位获取天气(附城市控件)

Javanx

发布于 2019-09-04 13:01:04

5.5K2

发布于 2019-09-04 13:01:04

文章被收录于专栏：web秀web秀

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

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目录，右击新建页面，记得勾选自动在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)
    })
  }
}

逆地址解析数据结构如下：

这里逆地址解析后，又查询了一次天气，就可以更新到首页天气数据了，我们选择城市后，是直接返回的，所以这里查询一次天气，首页就不需要处理了。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript