Uni-App

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

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

1、Uni-App 测试数据封装
2、Uni-App 城市控件(Uni-App元素操作相关)
3、ES6 多种遍历方式区别

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

要源码的同学,购买后可以私信我。下面我们来具体看看:

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中注册,否则需要手动去配置它。

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

新建完成后,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);
},

打印数据如下图:

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

3、html结构
uni-app: 根据定位获取天气(附城市控件)

// 对应样式
.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预览图:

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

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)
    })
  }
}

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

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

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

(2)城市筛选事件
第一次,我们的解决方案是这样:

剩余50%内容付费后可查看
* 请输入手机号和阅读码(忘记阅读码?
(2)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注