介绍

这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！

以下为小编最喜欢的两句话：

要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。

一个人为什么要努力？我见过最好的答案就是：因为我喜欢的东西都很贵，我想去的地方都很远，我爱的人超完美。因此，小编想说：共勉！

前言

显示效果

一、注册和风天气的账号（具体过程就不演示了）

二、获取和风天气的key

1、创建项目

2、获取key

三、在小程序中的使用

第一步：创建包

第二步：示例代码

workweather.wxml

workweather.wxxs

workweather.js

显示效果

一、注册和风天气的账号（具体过程就不演示了）

和风天气的官网

和风天气插件 | 和风天气插件产品，免费、跨终端。适配你的网站、APP、公众号 (qweather.com)

二、获取和风天气的key

1、创建项目

控制台===》项目管理===》创建项目就可以看到以下页面（注意：如果页面不一样的话，可能是更新了）

这个地方注意一下，看你是做案例还是，公司使用，如果是做案例，可以和小编一样选择免费订阅。设置key的地方你可以选择Web API，如果你选择了 Android SDK / iOS SDK，那么生成的密钥只能使用官方的 SDK 进行数据访问，如果是 Web API的话，可以自己编程获取并解析数据。（当然WebAPI解析比较慢一点，可以稍微等一会）

2、获取key

三、在小程序中的使用

如果是小白的话，没有账号，建议注册一个小程序的账号，具体看小编的这篇文章。有账号跳过这个步骤

【微信小程序】注册小程序账号、做一个案例——你好我的小程序_determine ZandR的博客-CSDN博客

第一步：创建包

第二步：示例代码

workweather.wxml


<view class="header-modular" wx:if="{{now}}"><image class="bg-wave" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/bg_wave.gif"></image><view class="row"><view class="row location-wrap" bindtap="selectLocation"><image class="icon" src=""></image><view class="title">{{City}} {{County}}</view></view></view><view class="row"><view class="tmp">{{now.temp}}°</view><image class="icon-weather" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{now.icon}}.png"></image></view><view class="tips-wrap"><view class="tips ">{{now.windDir}} {{now.windScale}}级</view><view class="tips ">湿度 {{now.humidity}}%</view><view class="tips ">气压 {{now.pressure}}Pa</view></view>
</view><view class="card-modular " wx:if="{{hourly}}"><view class="title">24小时预报</view><view class="card-wrap"><block wx:for="{{hourly}}" wx:key="index"><view class="item hourly"><view class="text-gray">{{item.time}}</view><image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.icon}}.png"></image><view class="text-primary mb-32">{{item.temp}}°</view><view>{{item.windDir}}</view><view class="text-gray">{{item.windScale}}级</view></view></block></view>
</view><view class="card-modular" wx:if="{{daily}}"><view class="title">7天预报</view><view class="card-wrap"><block wx:for="{{daily}}" wx:key="index"><view class="item daily"><view>{{item.dateToString}}</view><view class="text-gray">{{item.date}}</view><image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconDay}}.png"></image><view class="text-primary ">{{item.tempMin}}°~{{item.tempMax}}°</view><image class="icon" src="https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/weather_custom/{{item.iconNight}}.png"></image><view>{{item.windDirDay}}</view><view class="text-gray">{{item.windScaleDay}}级</view></view></block></view>
</view>

workweather.wxxs

  page {background-color: linear-gradient(to bottom, #ffffff,#ffffff, #F6F6F6);padding-bottom: 60rpx;}/* 工具类 */.row {display: flex;align-items: center;}.mb-32{margin-bottom: 32rpx;}/* 页面样式 */.header-modular {height: 400rpx;background-color: #64C8FA;background: linear-gradient(to bottom, #56CCF2, #2F80ED);position: relative;padding: 30rpx;}.header-modular .bg-wave {width: 100vw;position: absolute;bottom: -2px;left: 0;right: 0;height: 120rpx;mix-blend-mode: screen;}.header-modular .location-wrap {color: #ffffff;font-weight: bold;font-size: 36rpx;}.header-modular .location-wrap .icon {width: 40rpx;height: 40rpx;margin-right: 8rpx;}.header-modular .tmp {font-size: 200rpx;/* font-weight: bold; */color: #ffffff;margin-right: auto;}.header-modular .icon-weather {width: 200rpx;height: 200rpx;}.header-modular .tips-wrap {display: flex;justify-content: space-between;}.header-modular .tips {font-size: 28rpx;opacity: 0.8;color: #ffffff;flex: 1;}.header-modular .tips:nth-child(3) {text-align: right;}.header-modular .tips:nth-child(2) {text-align: center;}.card-modular {padding:0 30rpx;margin-top: 30rpx;}.card-modular>.title {font-size: 40rpx;font-weight: bold;position: relative;margin-left: 14rpx;margin-bottom: 16rpx;}.card-modular>.title::before {content: "";position: absolute;left: -14rpx;top: 10rpx;bottom: 10rpx;width: 8rpx;border-radius: 10rpx;background-color: #2F80ED;}.card-modular .card-wrap {width: 690rpx;border-radius: 18rpx;background-color: #ffffff;box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);overflow-x: auto;white-space: nowrap;}.card-modular .card-wrap .item {display: inline-flex;flex-direction: column;align-items: center;font-size: 28rpx;padding: 18rpx 0;}.card-modular .card-wrap .item.hourly{width: 138rpx;} .card-modular .card-wrap .item.daily{width: 172.5rpx;}.card-modular .card-wrap .item .icon {width: 60rpx;height: 60rpx;margin: 64rpx 0;}.card-modular .card-wrap .item .text-gray {color: gray;}.card-modular .card-wrap .item .text-primary {color: #2F80ED;}

workweather.js

const APIKEY = "";// 填入你申请的KEY
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getLocation()},//选择定位selectLocation() {var that = thiswx.chooseLocation({success(res) {//console.log(res)that.setData({location: res.longitude + "," + res.latitude})that.getWeather()that.getCityByLoaction()}, fail() {wx.getLocation({type: 'gcj02',fail() {wx.showModal({title: '获取地图位置失败',content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',success(mRes) {if (mRes.confirm) {wx.openSetting({success: function (data) {if (data.authSetting["scope.userLocation"] === true) {that.selectLocation()} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}, fail(err) {console.log(err)wx.showToast({title: '唤起设置页失败，请手动打开',icon: 'none',duration: 1000})}})}}})}})}})},/*** 获取定位*/getLocation() {var that = thiswx.getLocation({type: 'gcj02',success(res) {that.setData({location: res.longitude + "," + res.latitude})that.getWeather()that.getCityByLoaction()}, fail(err) {wx.showModal({title: '获取定位信息失败',content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',success(mRes) {if (mRes.confirm) {wx.openSetting({success: function (data) {if (data.authSetting["scope.userLocation"] === true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})that.getLocation()} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})that.setData({location: "地理位置"})that.getWeather()that.getCityByLoaction()}}, fail(err) {console.log(err)wx.showToast({title: '唤起设置页失败，请手动打开',icon: 'none',duration: 1000})that.setData({location: "地理位置"})that.getWeather()that.getCityByLoaction()}})} else if (mRes.cancel) {that.setData({location: "地理位置"})that.getWeather()that.getCityByLoaction()}}})}})},/*** 根据坐标获取城市信息*/getCityByLoaction() {var that = thiswx.request({url: 'https://geoapi.qweather.com/v2/city/lookup?key=' + APIKEY + "&location=" + that.data.location,success(result) {var res = result.dataif (res.code == "200") {var data = res.location[0]that.setData({City: data.adm2,County: data.name})} else {wx.showToast({title: '获取城市信息失败',icon: 'none'})}}})},/*** 获取天气*/getWeather() {var that = thiswx.showLoading({title: '加载中',})wx.request({url: 'https://devapi.qweather.com/v7/weather/now?key=' + APIKEY + "&location=" + that.data.location,success(result) {var res = result.data//console.log(res)that.setData({now: res.now})}})wx.request({url: 'https://devapi.qweather.com/v7/weather/24h?key=' + APIKEY + "&location=" + that.data.location,success(result) {var res = result.data//console.log(res)res.hourly.forEach(function (item) {item.time = that.formatTime(new Date(item.fxTime)).hourly})that.setData({hourly: res.hourly})}})wx.request({url: 'https://devapi.qweather.com/v7/weather/7d?key=' + APIKEY + "&location=" + that.data.location,success(result) {var res = result.data//console.log(res)res.daily.forEach(function (item) {item.date = that.formatTime(new Date(item.fxDate)).dailyitem.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString})that.setData({daily: res.daily})wx.hideLoading()}})},// 格式时间formatTime(date) {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()const weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)return {hourly: [hour, minute].map(this.formatNumber).join(":"),daily: [month, day].map(this.formatNumber).join("-"),dailyToString: isToday ? "今天" : weekArray[date.getDay()]}},// 补零formatNumber(n) {n = n.toString()return n[1] ? n : '0' + n},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

注意：如果复制上述代码，出现wx.getLocation need to be declared in the requiredPrivateInfos field in app.json的问题，查看两个地方

一、看全局json中是否有以下代码

  "requiredPrivateInfos": ["getLocation"]

二、看版本(2.6.0以上版本无法使用)

以上就是小编做的一个小案例，希望各位大佬多多指教！！！

【微信小程序】使用和风天气接口api（全过程）——获取天气相关推荐

微信小程序使用阿里云物联网API开发物联网应用
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开的应用. 微信小程序具有方便快捷,速度快,安全及保密性高的优点,同时开发 ...
微信小程序如何调用后台接口
2019独角兽企业重金招聘Python工程师标准>>> 本课程讲解了微信小程序如何调用线上API中心接口,主要使用了wx.request去和API中心交互,API中心提供给了下面的几 ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
微信小程序登录Java后台接口
微信小程序登录java后台接口首先看一下微信小程序的开发文档: 微信小程序开发文档步骤: 小程序端向微信接口服务发送请求--wx.login():获取到登录临时凭证code 小程序端拿着获取到的c ...
微信小程序篇_01 微信小程序与Java后端接口交互
微信小程序与Java后端接口交互准备创建后端项目创建小程序项目本文主要介绍小程序前后端数据的交互,实践演示. 准备创建后端项目我这里就创建一个SpringBoot项目作为演示. 在创建项目 ...
微信小程序城市定位(百度地图API)
概述微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
微信小程序调用php,微信小程序调用PHP后台接口解析纯html文本
微信小程序调用php后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/home/xia ...
封装一个可以设置微信小程序的本地缓存接口过期时间的方法!
微信小程序提供的本地缓存api是个好东西,但是没有明确指定缓存有效期,对于某些应用来说,需要改造一下,方法思路很简单,也很常见通用的一个封装函数方法! 实现新建wxCache.js /*** 本地缓 ...
微信小程序调用PHP接口,微信小程序调用PHP后台接口教程
微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xia ...
微信小程序：修复采集接口版云开发表情包
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...

【微信小程序】使用和风天气接口api（全过程）——获取天气

显示效果

一、注册和风天气的账号（具体过程就不演示了）

二、获取和风天气的key

1、创建项目

2、获取key

三、在小程序中的使用

第一步：创建包

第二步：示例代码

workweather.wxml

workweather.wxxs

workweather.js

【微信小程序】使用和风天气接口api（全过程）——获取天气相关推荐

最新文章

热门文章