天氣小程式筆記總結

Silence-jk發表於2018-05-28
筆記

發起跨域請求

  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);
        }
    });
 
 
})
複製程式碼

專案地址

相關文章