集成天气api

天气

去申请了一个免费的天气组件

http://apis.juhe.cn/simpleWeather/query?city=%E6%B8%A9%E5%B7%9E&key=bb888175aa5ed3bac588aa34d1eec123

将请求接口api域名加到插件的白名单

白名单

虽然配置了白名单，但依然报错

发现是调用api的时候，请求的是http而不是https

    wx.request({
      url: `http://apis.juhe.cn/simpleWeather/query?city=%E6%B8%A9%E5%B7%9E&key=bb888175aa5ed3bac588aa34d1eec123`,
      success: ({data}) => {
        const result = data.result
        this.setData({
          weather: `${result.future[0].temperature} ${result.future[0].weather} ${result.city}`
        })
        console.log(data)
      }
    })

改回https，就可以了，一个小乌龙哈~

坑1

在插件方法attached不能调用成员方法this.getWeather()，只能将请求天气的方法徒手写到attached中

传入城市参数

通过通过腾讯地图api换取城市名，精确到县级市

// 引入腾讯地图组件
const QQMapWX = require('./qqmap-wx-jssdk.min.js')
let getLocation = (cb) => {
  // 初始化腾讯地图
  const qqmapsdk = new QQMapWX({
    key: 'BJFBZ-ZFTHW-Y2HRO-RL2UZ-M6EC3-GMF4U'
  })
  // 调用接口
  qqmapsdk.reverseGeocoder({
    success: res => {
      cb(res.result.address_component.district)
    }
  })
}

module.exports = {
  getLocation
}

项目配置app.json中设置请求地理位置权限字段

权限

  "permission": {
    "scope.userLocation": {
      "desc": "为您提供所在地机场信息"
    }
  },

尝试将这个权限字段直接配置到插件plugin.json中

{
  "publicComponents": {
    "list": "components/list/list"
  },
  "main": "index.js"
}

但是没有生效，只能在配置在项目中，因此作罢。

完整的代码

包含了农历与通过城市名得到天气数据

const solarLunar = require('../../utils/solarlunar.min')
const moment = require('../../utils/moment.min')

Component({
  data: {
    lunarStr: ''
  },
  attached: function(){
    const year = moment().format('YYYY')
    const month = moment().format('MM')
    const day = moment().format('DD')
    const lunar = solarLunar.solar2lunar(year, month, day)
    console.log(lunar)
    const lunarStr = `${lunar.gzYear}年${lunar.monthCn}${lunar.dayCn} ${lunar.ncWeek}`
    // 可以在这里发起网络请求获取插件的数据
    this.setData({
      lunarStr: lunarStr
    })
    // this.getWeather()
    // 请求地理位置
    const utils = require('../../utils/utils')
    utils.getLocation(city => {
      console.log(city)
      city = city.replace(/市/g, '')
      city = encodeURIComponent(city)
      wx.request({
        url: `https://apis.juhe.cn/simpleWeather/query?city=${city}&key=bb888175aa5ed3bac588aa34d1eec123`,
        success: ({data}) => {
          const result = data.result
          this.setData({
            weather: `${result.future[0].temperature} ${result.future[0].weather} ${result.city}`
          })
          console.log(data)
        }
      })
    })
  },
})

源码下载

https://gitee.com/laeser/lunar