墨迹天气api接口_微信小程序开发实战-天气小程序

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

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

下面进入正文：

第一步 准备

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了，终于下班到家，有时间继续补充了】

0.新建项目

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

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

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

(请忽略我吊炸天的微信名)

1. 编写页面内容

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

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

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

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

先贴代码如下

index.wxml：

 1  2   北京 3   30° 4    5     晴 6     空气优 7    8    9     2019-09-1210     晴转多云11   12 

上面wxml( 相当于web开发的html )就这么12行。把页