微信小程序开发实验2

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

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

1.准备工作

1.1 API密匙申请

注册和风天气的账号，在个人的控制台->应用管理界面申请个人认证的key

1.2 API的调用方法

本次实验目的是实现一个可以实时查看城市天气的小程序。可以使用https://free-api.heweather.com/s6/weather/now?[请求参数]查询城市天气。

也可以使用https://devapi.qweather.com/v7/weather/now?[请求参数]来查询城市的天气，但是注意这一个URL的参数中的location只接受城市的ID编号或城市的经纬度，不接受城市名的字符串。

如果需要查询城市的ID可以通过https://geoapi.qweather.com/v2/city/lookup?[请求参数]查询结果。

1.3 使用演示

首先演示通过城市ID查询城市天气的方法。

先通过https://geoapi.qweather.com查询北京的城市ID，查询结果为101010100。

然后通过城市ID查询这个城市的天气。

2.1 服务器的域名配置

每一个小程序在和指定域名进行网络通信时，都要将域名添加到管理员后台的名单中。

2.程序设计

2.1 项目创建

创建一个空白程序，在程序中创建一个images文件夹用来存放图片，程序的目录结构如下。

在和风天气官网下载相关图片，整理到images文件夹下。

2.2 视图设计

2.2.1 导航栏设计

在app.json中写入如下代码，设置导航栏为蓝色，标题文字为白色。

2.2.2 页面设计

计划设计如下图所示的页面。

由图可见，页面整体分为四部分预计使用如下的组件

页面整体view，且class="container"

第一部分picker且mode=’region‘

第二部分text，

第三部分image

第四部分整体view 且class=‘detail’，包含四个view组件 且class=‘bar’，这四个view组件中每个包含三个view组件且class=‘box'。

1）整体

页面的wxml设计如下

在wxss中加入下面的样式

2）第一部分

第一部分实现区域选择，能够让我们自由选择地区。在wxml的代码如下所示

3）第二部分

在第二部分中显示温度和天气状况，wxml代码如下。

加入如下的样式。

3）第三部分

第三部分实现添加一个天气的图标

加入如下的样式

4）第四部分

第四部分显示城市的各种天气信息，wxml如下。

在wxss中加入下面的样式。

2.3 逻辑实现

2.3.1 更换省市自治区信息

对第一部分的代码做如下的修改，表示当选项变化时函数regionchange触发，地区信息由变量region决定。

js文件中加入变量region和函数regionchange

2.3.2 获取天气数据

设置一个函数getweather()，设置一个变量now，当函数getweather触发时，当前城市的天气信息被存入now中。

 

在onload和regionchange中调用getweather函数。这样在页面初始化和城市切换时都能实时的显示当前城市的天气。

注意getweather()函数，因为这里获取实时天气的方法是先获取城市ID再通过城市ID获取城市的天气，所以这里连续发起了两次request请求。当然如果使用ttps://free-api.heweather.com/s6/weather/now?这个接口可以直接用城市名的字符串作为参数发起请求。

2.3.3更新天气数据

在js文件中加入now的初始化数据

对wxml文件做出如下的修改

三、程序运行结果

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

1.默认城市的天气

2.切换城市

3.切换城市的天气

四、问题总结与体会

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

1.问题：https://free-api.heweather.com/s6/weather/now接口不好使，返回信息permission denied

解决：permission denied表示无访问权限，没有购买服务。具体啥原因造成这个报错，我也不知道。可以尝试先查询城市ID再通过ID查询城市天气的方法获取数据。

2.问题：获取城市ID和天气信息后，setdata函数没有成功更新数据？

解决：调用wx.request后在这个函数内部this和函数外部的this是不同的，我们需要将函数外部的this用一个变更记录。例如： var that=this;

.......

{

that.setData({.....});

}