微信小程序实现天气预报功能（内置自动定位）（源码）

最新推荐文章于 2024-04-17 22:08:46 发布

来瓶可乐吧

最新推荐文章于 2024-04-17 22:08:46 发布

阅读量2.9k

点赞数 9

本文链接：https://blog.csdn.net/qq_45059528/article/details/122977249

版权

微信小程序和风天气API 天气预报定位 API Key

关键词由CSDN通过智能技术生成

文章目录

序言

此小程序使用的是最新和风天气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