实验记录：微信天气小程序

一、实验目标

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

二、实验步骤

2.1调整文件内容与目录结构：

• 删除utils文件夹，pagres文件夹中的logs目录，并且将素材文件夹images导入项目当中，此处为调整后的文件树

• 清空index，wxml和index.wxss，index.js,app.wxss,app.js中的代码,并且对app.js和inde.js进行自动生成，

2.2视图设计：

• 先对导航栏的样式进行调整，此处调整app.json文件，代码如下：

{
  "pages": [
    "pages/index/index"  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTitleText": "今日天气",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• 对主页的样式排本进行设计,此处的改动主要涉及index.wxml

<view class="container">
    <!--区域1：地区选择器-->
    <picker mode="region">
        <view>北京市</view>
    </picker>
    <!--区域2：温度-->
    <text>19℃晴</text>
    <!--区域3：天气图标-->
    <image src="..//images/weather_icon_s1_color/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">0km</view>
            <view class="box">0级</view>

        </view>



    </view>

</view>

• 更改index.wxss，对页面排版进行调整，代码如下

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

.detail{
    width: 100%;
    display: flex;
    flex-direction: column
}

.bar{
    display: flex;
    flex-direction: row;
    margin: 20rpx 0;
}
.box{
    width: 33.3%;
    text-align: center;
}

• 此时页面效果如下：

2.2 添加交互逻辑

• 此处交互逻辑主要是通过和风天气的接口获取天气数据，由于和风天气的数据接口出现了改变，我采用的方式是先查询城市的id，然后通过城市的id再去查找该城市id所对应的城市的天气，具体实现函数如下

 getWeather:function(){
    var that=this
    wx.request({
        //获取城市id
        url:"https://geoapi.qweather.com/v2/city/lookup?",
        data:{
            location:that.data.region[1],
            key:"your key"
        },  
        success:function(res){
            //用城市id查询1当地天气
            wx.request({
                url:"https://devapi.qweather.com/v7/weather/now?",
                data:{
                    location:res.data.location[0].id,
                    key:"yor key"
                },
                success:function(res){
                     that.setData({now:res.data.now})
                }
            })

        }   
    })

  },

• 同时也需要调整index.wxml的代码，确保前端代码可以有效调用后端数据

三、实验结果