从零开始的小程序开发之路看这一篇就够了!(适用于有基础)#2-CSDN博客

本文链接：https://blog.csdn.net/Annyufeng/article/details/132430645

一、实验目标

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即可获取天气信息