天气小程序笔记总结

发起跨域请求

  function getData(callback) {
    wx.request({
      url: '',
      data: {

      },
      success: (res) => {

      },
      complete: () => {
        callback && callback()
      }
    })
  }
复制代码

加入 callback 的好处

此函数可能会在多处被调用，每次调用后要处理的情况可能不同，传入 callback 来处理

例：下拉刷新加载完页面后要立即停止刷新，此时就可用 callback 来处理

  onPullDownRefresh(){
    this.getData(() => {
      wx.stopPullDownRefresh()
    })
  },
复制代码

使用下拉刷新函数时要现在 app.json 中给 window 属性加一句"enablePullDownRefresh": true }

动态设置背景颜色

  wx.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor:  weatherColorMap[weather],
  })
复制代码

页面传参数跳转

  wx.navigateTo({
    url: '/pages/list/list?city=' + this.data.city,
  })

  //跳转后的第二个页面可在 onLoad 中获取参数信息
  Page({
    onLoad(options) {
      let city = options.city
    }
  })
复制代码

获取当前位置

思路

• 用户点击获取当前位置，判断用户是否授权
• 授权，则获取
• 不授权，弹窗将不会再弹出，这时就需要用户手动开启
• 保存用户授权状态，以便下次打开时直接获取到当前位置信息

获取当前位置信息（经度和维度）

  wx.getLocation({
    success: res=>{
      //获取成功，说明已授权
      this.setData({
        locationAuthType: AUTHORIZED,
      })
      //利用腾讯地图提供的 sdk，根据经纬度来确定城市
      this.qqmapsdk.reverseGeocoder({
        location: {
          latitude: res.latitude,
          longitude: res.longitude
        },
        success: res=>{
          let city = res.result.address_component.city
          this.setData({
            city:city,
          })
          this.getNow()
        }
      })
    },
    fail: () => {
      this.setData({
        locationAuthType: UNAUTHORIZED,
      })
    }
  })
复制代码

设置和获取授权

  //设置
  onTapLocation(){
    if (this.data.locationAuthType === UNAUTHORIZED)
      wx.openSetting({
        success: res => {
          if (res.authSetting['scope.userLocation']) {
            this.getCityAndWeather()
          }
        }
      })
    else
      this.getCityAndWeather()
  },

  //获取
  wx.getSetting({
  success: res => {
    let auth = res.authSetting['scope.userLocation']
    this.setData({
      locationAuthType: auth ? AUTHORIZED
        : (auth === false) ? UNAUTHORIZED : UNPROMPTED
    })

    if (auth)
      this.getCityAndWeather()
    else
      this.getNow() 
  },
复制代码

腾讯地图小程序api的使用

微信小程序JavaScript SDK

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
    });
 
 
})
复制代码

项目地址

转载于:https://juejin.im/post/5b0b8c5e518825155c58ab04