微信小程序快速入门+四个实战小程序（三）——实战项目二

一）实战项目二
  1）创建项目
  2）项目的效果图
  3）项目二的实现
   a）项目二的实现——死的无需连网
   b）项目二的实现——活的需要连网
     I）前期准备工作
     II）正式开始完成
     III）最终效果图
  4）总结
  5）问题解决————————————————————————————————————————————————————————

一）实战项目一

1）创建项目：

点击 “ 小程序 ”中的 + 号：

填写相关信息：


其中的 APPID就是在 “ 微信公众平台 ”登录后的页面中选择 “ 开发工具 ”的“ 开发管理 ”中的“ 开发设置 ”：


此时点击 “ 新建 ”就创建成功了：

此时关闭项目就会在我们的微信开发者工具中看到我们的项目test2：


2）项目的效果图：


3）项目二的实现

项目二中页面划分是：

a）一个选择器去选择不同区域；
b）文字，显示所选择的区域当前的气温和天气状况（多云、阴雨等）；
c）图片，显示所选择的区域当前的天气状况（多云、阴雨等）所对应的图片；
d）一个新的容器中存放4个纵向的项目，而每个横向项目中又存在3个横向项目。

a）项目二的实现——死的无需连网

设置app的头部（app.json）：

接着根据页面需要显示的内容进行设计 “选择器——文字——图片——容器”（index.wxml）：






此时页面的效果：

此时开始实现页面样式的设计（index.wxss）：

此时得到的页面效果：

接着对页面的布局再做调整：

让下面的容器去到底部（下面不要留空），同时不要让城市顶到顶部：

让气温和天气状况的文字和图片适合：

调整之后效果图：

接着开始对地区选择器进行设计，我们点击“北京市”之后虽然有弹出其他选择的区域但是选择之后并不会发生变化所以我们在picker选择器的mode属性值为region中再添加bindchage（当选择的城市发生变化时就会触发change事件（我们自定义的函数changeregion）），同时，我们的 “北京市” 是一个常量不可变的，我们要将它设计为一个变量，而 “北京市” 是变量的初始值。

此时选择其他地区就会变化了：

但是我们初始值只要 “北京市”，但是选择器中默认是一个数组包含省市区，所以再对初始值做一下修改：


b）项目二的实现——活的需要连网

前半部分我们实现的小程序中的天气状况是不会随着实际情况进行变化的，而且底部的容器中的具体天气数据也是不会随着实际情况变化的，所以此时我们需要实现小程序的连网并从网上获取对应的实时数据。

I）前期准备工作

浏览器搜索 “ 和风天气 ” ，网站中提供了详细的天气信息：

进行注册：





激活成功之后就登录：







把key值copy放置到一个文档中：

我们不同天气对应的图片也在网站中提供了：


之后把下载的压缩包进行解压（解压到项目的image文件夹中），我们只需要其中的100.png~999.png 其他的不需要用到。

如果用户没有连网那么显示的图片初始值应该是未知天气的图片，所以对image初始值进行修改为999.png：

效果图：

使用方法：

我们把免费版的提供的url进行copy，然后根据使用方法的提示将{weather-type}替换为图中提供的值，此小程序我们需要的是 “实时天气”，所以{weather-type}---->now，{parameters}---->location 和key

https://free-api.heweather.net/s6/weather/now?location=beijing&key=xxxx

此时这个url就是一个可以正常访问的网页了：

此时我们第二个小程序还剩最后一个准备工作：要将这个能提供天气数据的网站放到我们的微信小程序中，使得微信小程序可以访问：

浏览器搜索 “微信公众平台” ，并登录：

左边菜单栏中找到 “开发 ”——“开发设置”——“服务器域名”——“开始配置”：

request合法域名就是我们刚刚构造好的和风天气的url的前半部分：


II）正式开始完成

在项目正式开始实现连网操作时，我们要先确保我们的准备工作完成的是有效的，如何验证是否有效呢？

打开项目面板右上角有一个 “详情”：

如果 “详情”中的“域名信息”中的“request合法域名”还没有更新为我们刚刚设置的和风天气的域名那么证明我们的准备工作是无效，需要检查问题出在哪。

此时我们正式开始实现连网，我们在index.js 中直接创建一个函数getWeather用于实现连网：

但是会发现我们之前构造的和风天气的url是只能访问beijing的天气信息而无法实现地区选择器中的访问全国各地的天气，所以我们还要给此url设置变量：


其中的location值是region[1]是因为前面我们的选择器是“省市县”的顺序进行选择，而在和风天气的url只用介绍中说明了只要提供市就可以查询了，而市就是前面region数组中的第二个元素所以是1。

此时我们只实现访问信息但是没有设置如何将接收到的信息返回：


谁来调用此函数呢？因为其实我们是希望当我们将选择器中的地区发生变化后就要相应的将天气对应变化，所以其实就是当我们的changeRegion函数执行完之后就要调用getWeather函数：


所以总的就是在index.wxml的picker选择器如果我们改变了地区就会触动changeRegion函数，而changeRegion函数又会调用getWeather函数，而getWeather函数会让将获取到到的信息显示在控制台上。


最后的首尾工作：将首页中写死的参数变成变量：









我们想要实现页面一旦加载，就是只要我们运行小程序就会自动执行天气结果，此时我们需要用到一个监听页面加载的函数：

最终效果图：


4）总结：


这是手动选择地区之后才能显示天气状况，那么如何实现开启定位之后自动显示当前所在地区的天气状况呢？我们后续的文章会进行详解。

5）问题解决：

在最终编译之后会出现如下的报错：

[渲染层网络层错误] Failed to load local image resource /image/Weatherpic/.png 
 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 

解决方法参见：
[渲染层网络层错误]导致图片无法成功加载显示 (HTTP/1.1 500 Internal Server Error)