一、实验目标
1、开发一个可以查看任意地址当前天气的小程序
二、实验步骤
1. 导航栏编辑
在app.js文件中 修改color和titletext为#3883FA以及"今日天气"
2. 构建架构
先搞一个小region
在index.wxml文件里加上基本的组件 这里的图片https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/demo2_file.zip 路径可改
<view class="container"> <picker mode="region"> <view>{{region}}</view> </picker> <text>27℃晴</text> <image src="/pages/images/weather_icon_s1_color/100.png" mode="widthFix"/> </view>
在加上css
text{ font-size: 80rpx; color: #3C5F81; } image{ width: 220rpx; } //写在app.wxss .container { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
再把下半部分写好
<view class="detail"> <view class="bar"> <view class="box">湿度</view> <view class="box">气压</view> <view class="box">能见度</view> </view> <view class="bar"> <view class="box">{{now.humidity}}%</view> <view class="box">{{now.pressure}}hPa</view> <view class="box">{{now.vis}}km</view> </view> <view class="bar"> <view class="box">风向</view> <view class="box">风速</view> <view class="box">风力</view> </view> <view class="bar"> <view class="box">{{now.windDir}}</view> <view class="box">{{now.windSpeed}}km/h</view> <view class="box">{{now.windScale}}级</view> </view> </view> .detail{ width: 100%; display: flex; flex-direction: column; } .bar{ display: flex; flex-direction: row; margin: 20rpx 0; } .box { width: 33.3%; text-align: center; }
但是现在没有内容,接下来我们调用和风天气的api即可获取天气信息
3. 获取天气信息
首先我们在和风天气注册账号 并且添加一个免费的key,后面要用到
然后我们在微信的开发管理和设置中为和风天气添加两个服务器域名白名单
有个这个前期准备 我们就可以与开的开始玩耍了
由于getweather的接口升级 我们的参数不在能是中文,所以需要我们先使用getloc函数获取到locationID然后作为参数放到getweather里
用wx的request 记得把key设为自己的key 成功之后传回参数即可 data如下所示
在onload和regionChange函数里调用getloc() 如果报错可以试试游客模式
是不是信息就有了 剩下就是填空了
三、程序运行结果
虚拟机为iphone 13
四、问题总结与体会
学会了简单的container布局以及api调用,是需要进行白名单操作的
学会了获取信息,存储信息,并把他输出出来
还是挺有成就感的