微信小程序开发实战-天气小程序

来源：cnblogs　　作者：飘羽　　时间：2019/9/16 9:17:20　　对本文有异议

园龄6年8个月了，还一篇文章都没写过，惭愧！

最近周末做了个天气预报小程序，在这里整理一下开发过程和注意点，给对小程序开发感兴趣的伙伴们提供点参考。

废话不多说，先上图最终效果：

下面进入正文：

第一步准备

0. 把微信小程序开发文档过一遍。https://developers.weixin.qq.com/miniprogram/dev/framework/ 作为程序员，就要从0开始计数。

1. 下载安装微信开发者工具（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），这个就不多说了。

2. 设计产品原型，我们要把产品做成什么样。

先晒一下第一版的原型，比较丑，见谅。（第一版丑和简陋先忍，后面可以迭代）

下面的代码也会是第一版，功能没有上面扫码看到的那么多。我是希望能从0开始写起，然后把每次迭代也写上，让大家能看到一个项目是怎么从第一版最简陋的功能，逐步功能丰富和完善。这才是一个项目真正的开发过程。一开始就做的很复杂很完备的，往往容易难产。

然后我们接口需要向页面提供的信息就明确了：位置名、实时温度、天气文字、空气文字、今日日期、今日天气状况。

第二步启程开发小程序前端页面

【10点20了，终于下班到家，有时间继续补充了】

1.新建项目

打开微信开发者工具，创建一个新项目。暂起名“miniweather”（名字不重要，以后可以随时改）。如下图：

创建完成后，默认微信开发者工具就把项目编译预览出来了，效果如下。

点击“获取头像昵称按钮”，界面变成如下：

（请忽略我吊炸天的微信名）

2. 编写页面内容

由于咱们这个天气预报只有一个页面，就直接在index这个页面改起，没必要创建新页面了。

删掉index.wxml中的全部代码，稍后重写。

删掉index.wxss中的全部样式代码，稍后重写。

咱们从头写起。如果你熟悉html和css，那么这个wxml和wxss就很容易上手了。

先贴代码如下

index.wxml：

 1 <view class="weather-wrapper">
 2   <view class="location-text">北京</view>
 3   <view class="temp">30°</view>
 4   <view class="weather">
 5     <text class="weather_txt">晴</text>
 6     <text class="air_label">空气优</text>
 7   </view>
 8   <view class="day-weather">
 9     <view class="day-text">2019-09-12</view>
10     <view class="temp-text">晴转多云</view>
11   </view>
12 </view>

上面wxml( 相当于html )就这么12行。把页面需要的元素列出来，并加了对应的class名，稍后我们可以针对class设置样式。

现在的效果是这样的：

页面没有任何样式，但是基本内容都有了。

接下来，编辑index.wxss文件，把样式加上。

仍然是先贴代码：

index.wxss

 1 .weather-wrapper{
 2   position: relative;
 3   padding-top: 20rpx;
 4   padding-bottom: 250rpx;
 5 }
 6 .location-text{
 7   text-align: center;
 8 }
 9 .temp {
10   text-align:center;
11   font-size:200rpx;
12   line-height:280rpx;
13   opacity:0.8;
14 }
15 .weather {
16   text-align: center;
17   font-size: 40rpx;
18   line-height: 56rpx;
19   opacity: 0.65;
20 }
21 .air_label{
22   margin-left: 20rpx;
23   border-radius: 10rpx;
24   padding:8rpx;
25 }
26 .day-weather {
27   display: flex;
28   align-items: center;
29   position: absolute;
30   bottom:50rpx;
31   left: 40rpx;
32   right: 40rpx;
33   height: 90rpx;
34   font-size: 30rpx;
35   line-height: 42rpx;
36   color: rgba(0, 0, 0, 0.5)
37 }
38 .temp-text {
39   flex-grow: 1;
40   padding-right: 30rpx;
41   text-align: right;
42 }