天气小程序笔记总结

发起跨域请求

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);
        }
    });
 
 
})
复制代码

项目地址