微信小程序实现天气预报功能(内置自动定位)(源码)
文章目录
- 序言
- 样例图
- 和风天气API获取
- 微信小程序后台域名配置
- 页面代码
- 相关问题
- 源码
- 留言
序言
此小程序使用的是最新和风天气API.
样例图
和风天气API获取
在这个小程序中我使用的是和风天气的API
- 打开官网注册或者登陆你的账号
- 进入控制台,选择应用管理,新建应用(应用版本 选择 免费开发版,key的类型 选择 Web API)
- 创建成功后就可以看到要用到的 key了
微信小程序后台域名配置
- 登陆小程序后台,分别点击开发和开发设置
- 点击修改,将我们要用到的 API的域名添加到request合法域名里面,https://devapi.qweather.com 和 https://geoapi.qweather.com 。
页面代码
.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="/images/icon_location.png"></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>
.wxss
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;
}
.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: "116.41,39.92"})that.getWeather()that.getCityByLoaction()}}, fail(err) {console.log(err)wx.showToast({title: '唤起设置页失败,请手动打开',icon: 'none',duration: 1000})that.setData({location: "116.41,39.92"})that.getWeather()that.getCityByLoaction()}})} else if (mRes.cancel) {that.setData({location: "116.41,39.92"})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 () {}
})
app.json
{"pages": ["pages/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "天气预报","navigationBarTextStyle": "black"},"permission": {"scope.userLocation": {"desc": "你的位置信息将用于天气预报定位" }},"style": "v2","sitemapLocation": "sitemap.json"
}
相关问题
- 为了确保 小程序 可以 正常使用,请先在和风天气 控制台 升级为 个人开发者(ps:该升级需要上传实名信息)
- 在js代码中,请将刚刚申请的key 填写进 APIKEY 里面
源码
评论区留言会发GitHub地址
留言
如果觉得文章对您有帮助的话, 点个赞!
闲来没事做个小程序,欢迎访问
微信小程序实现天气预报功能(内置自动定位)(源码)相关推荐
- 微信小程序实现天气预报功能(支持自动定位)(附源码)
目录 前言 效果图 天气API获取 微信小程序后台域名配置 页面代码 注意问题(必看) 源码 留言 前言 由于和风天气API的更新,之前写的那篇文章 可能会出现版本不兼容的 情况.所以 更新了 这个 ...
- 微信小程序生命周期函数(内置钩子函数)
微信小程序生命周期函数(内置钩子函数) 1:应用生命周期 生命周期 说明 onLaunch 小程序初始化完成时触发,全局只触发一次 onShow 小程序启动或从后台进入前台时(页面显示) onHide ...
- 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List(一)
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
- python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践(附 Python 源码)...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
- 微信小程序:笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码 或者也可以说是一个框架吧 里面的内容是内置在小程序里面的,所以说是一款框架也可以 因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...
- 基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期 间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有 差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
- 微信小程序之授权登录(附完整源码)
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
- 微信小程序:云开发表情包制作源码
该款小程序是一个表情包制作 内容毕竟丰富,另外自定义制作方面也是特别的自由 支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择 这是一款云开发的小程序,但是安装还是挺简单的 搭建教程: 首先使 ...
- 微信小程序实现天气预报功能(附源码)
目录 前言 效果图 天气API获取 微信小程序后台域名配置 页面代码 注意问题(必看) 留言 前言 最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图 天气API获取 这里我用 ...
最新文章
- 基于vue-cli,做个nuxt脚手架~
- JZOJ 100046. 【NOIP2017提高A组模拟7.14】收集卡片
- HarmonyOS之深入解析图像的编码和解码
- doc文件转换html,HTML+CSS入门 如何使用POI将doc文件转换为HTML
- 超轻型的数据库sqlite
- JDK JRE 区别
- spring boot开发环境搭建
- c++设计一个无法被继承的类
- 七个发布海外媒体稿件的关键点
- 计算机科学的特刊,科学网—SCI收录期刊《IEEE计算机图形与应用杂志》特刊预报 - 万跃华的博文...
- c++ 字符串分割和数字格式化输出
- 【Apache运维基础(5)】Apache的Rewrite攻略(2)
- 自学无果 报班学习的每日知识点总结与回顾 0基础学前端的小伙伴可以进来看看 一起学习一起进步(三)
- 第43期ACM_ICPC亚洲区域赛(焦作站)感想
- java开发的公文管理系统源代码_基于jsp的公文管理系统-JavaEE实现公文管理系统 - java项目源码...
- mysql 时间段天数_ORACLE任意时间段内所有天数日期查询
- 计算机不联网怎么计时,电脑为什么在断网后仍能准确显示时间?
- 简单使用OnlyOffice
- SQL把一个表中数据更新到另一个表的多种方法
- 小程序商城+进销存系统——通用模板