小白入门第二个微信小程序：天气查询

大家好，欢迎来到IT知识分享网。

小白入门第二个微信小程序：天气查询

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

5.导航栏设计，在app.json中

 "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "今日天气", "navigationBarBackgroundColor": "#3883FA" }, 

6.页面设计，在index.wxss中设计布局参数：

container{ height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:space-around; } 

在index.wxml中设计布局，先设计地区选择：

<view class='container'> <!--区域1：地区选择器--> <picker mode='region'> <view>北京市</view> </picker> <text>19度 晴</text> </view> 

在wxss中再一次添加：

text{ font-size:80rpx; color:#3C5F81; } 

继续迭代设计布局，在wxml中设计天气和天气图标：

<view class='container'> <!--区域1：地区选择器--> <picker mode='region'> <view>北京市</view> </picker> <!--区域2：单行天气--> <text>19度 晴</text> <!--区域3：天气图标--> <image src='/images/weather_icon/999.png'mode='widthFix'></image> </view> 

在wxss中：

image{ width:220rpx; } 

最后在下方添加多行天气信息：

<view class='container'> <!--区域1：地区选择器--> <picker mode='region'> <view>北京市</view> </picker> <!--区域2：单行天气--> <text>19度 晴</text> <!--区域3：天气图标--> <image src='/images/weather_icon/999.png'mode='widthFix'></image> <!--区域4：多行天气--> <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'>0 %</view> <view class='box'>0 hpa</view> <view class='box'>0 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'>0</view> <view class='box'>0 km/h</view> <view class='box'>0 级</view> </view> </view> </view> 

在wxss中：

container{ height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:space-around; } text{ font-size:80rpx; color:#3C5F81; } image{ width:220rpx; } .detail{ width:100%; display:flex; flex-direction:column; } .bar{ display:flex; flex-direction:row; margin:20rpx 0; } .box{ width:33.3%; text-align:center; } 

<view class='container'> <!--区域1：地区选择器--> <picker mode='region'bindchange='regionChange'> <view>{ 
  {region}}</view> </picker> 

在js中：

Page({ / * 页面的初始数据 */ data: { region:['安徽省','芜湖市','镜湖区'] }, regionChange:function(e){ this.setDate({region:e.detail.value}); }, 

Page({ getWeather: function() { var that = this; // 第一步：通过地理位置搜索 API 获取城市编号 wx.request({ url: 'https://geoapi.qweather.com/v2/city/lookup', data: { location: that.data.region[2], // 使用城市名称（例如：芜湖市） key: '8ed2bfafb7f53598b88936df' }, success: function(res) { if (res.data && res.data.code === "200") { var cityId = res.data.location[0].id; // 获取第一个匹配的城市编号 // 第二步：使用获取的城市编号获取天气信息 wx.request({ url: 'https://devapi.qweather.com/v7/weather/now', data: { location: cityId, // 使用城市编号 key: '8ed2bfafb7f53598b88936df' }, success: function(res) { console.log(res.data); that.setData({ now: res.data.now }); }, fail: function(error) { console.error("获取天气信息失败：", error); } }); } else { console.error("城市编号获取失败：", res.data.code); } }, fail: function(error) { console.error("地理位置搜索失败：", error); } }); }, / * 页面的初始数据 */ data: { region: ['安徽省', '芜湖市', '镜湖区'], now: { temp: 0, text: '未知', icon: '999', humidity: 0, pressure: 0, vis: 0, windDir: 0, windSpeed: 0, windScale: 0 } }, regionChange: function(e) { this.setData({ region: e.detail.value }); this.getWeather(); }, / * 生命周期函数--监听页面加载 */ onLoad: function(options) { this.getWeather(); }, / * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, / * 生命周期函数--监听页面显示 */ onShow: function() { }, / * 生命周期函数--监听页面隐藏 */ onHide: function() { }, / * 生命周期函数--监听页面卸载 */ onUnload: function() { }, / * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, / * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, / * 用户点击右上角分享 */ onShareAppMessage: function() { } }) 

9.将数据改为动态数据，以便更新天气信息：

<view class='container'> <!--区域1：地区选择器--> <picker mode='region'bindchange='regionChange'> <view>{ 
  {region}}</view> </picker> <!--区域2：单行天气--> <text>{ 
  {now.temp}}°C{ 
  {now.text}}</text> <!--区域3：天气图标--> <image src='/images/weather_icon/{ 
  {now.icon}}.png'mode='widthFix'></image> <!--区域4：多行天气--> <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> </view> 

ok全部完成

三、程序运行结果

四、问题总结与体会

2.编译器下方一直提示网络层渲染错误，反复修改后发现是data的默认变量的变量名与now中传来的数据并不匹配，修改后便消失了。