一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.首先和上次实验一样，删除给的模板文件使得界面清空，同时新建images文件夹用于存放显示天气的图片

2.创建导航栏

①我将标题文字改为今日天气，字体颜色未设置默认为白色

②将背景颜色设置为玫瑰粉，RGB配比为b1:31:4a

代码为：（app.json中）

效果如下：

3.编写wxml和wxss（index中）

①wxml部分

因为是显示天气情况，所以总共分有四个区域和多个组件：

页面整体调用了组件，并定义class=’container’

1.地区选择器区域：组件

2.温度和天气文字说明区域：组件

3.天气图标区域：组件

4.分行显示的具体天气状况区域：最为复杂，首先是一个组件，定义class=’detail’，里面分有4个内单元行组件定义为class=’bar’，每个单元行内有分有3个内单元格组件，定义为class=’box’,这样的嵌套结构，能显示具体的湿度，气压，能见度等等信息

代码为：

②编写wxss

也就是给各个数据布局在合适的位置和调整适宜的尺寸，container，text，image还是老样子，还要设置的就是区域四的detail，bar以及box，比如detail中每个单元格占满每一行100%，并且垂直分布column，也就是每一行一组bar，弹性分布flex；bar设置弹性布局flex，并且横排显示row，并调整外边距margin为20rpx；

box每行显示三个信息，每个数据占用三分之一，并且保持居中排列

代码为：

效果图如下：（此时还没有数据）

4也就是本次最重要的，通过调用api，获取和风天气的实时更新的天气信息，并且将这些信息存入我们设置的变量中，最后通过读取变量的值反馈在小程序页面上。

设置默认初始地区为安徽省芜湖市镜湖区，然后通过调用得到具体天气信息存放到weather变量中。这里不同于老师给的文档，不能直接通过region获取位置，要具体到省市区的id查询，也就是region:event.detail.value才行；先通过和风天气的城市信息查询查找城市ID。城市信息查询的location参数使用“区县”，adm参数使用“市”，这样可以查询到区县的ID。

代码为：

效果图为：

三、程序运行结果

列出程序的最终运行结果及截图。

运行结果：

首先是默认城市，安徽省芜湖市镜湖区的天气状况

接下来选择其他城市看看，我选了山东省青岛市市南区，也就是鱼山校区那边的天气状况以及江苏省扬州市宝应县的天气状况

获取天气成功

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3895 人正在系统学习中