微信天气小程序教程

前言

这是一个微信天气小程序开发教程，简单易学，半天即可完成。可根据天气不同，配置不同的背景图片。初始默认实时定位当前位置天气，也可搜索查询各地区天气。具体实现效果如下：
微信天气小程序教程

欢迎扫码体验：
微信天气小程序教程

源码请戳这里，欢迎star~

初始化项目

首先要注册小程序、以及安装微信开发工具，这些在小程序开发文档中都有详细说明，这里就不赘述了。
安装好微信开发者工具，填好申请到的小程序AppID，选好项目目录，初始化一个普通小程序目录结构，得到以下项目初始目录：

|-- pages
      |-- index
          |-- index.js        // 首页js文件
          |-- index.json      // 首页json文件
          |-- index.wxml      // 首页wxml文件 相当于html
          |-- index.wxss      // 首页wxss文件 相当于css
      |-- logs
          |-- logs.js         // 日志页js文件
          |-- logs.json       // 日志页json文件
          |-- logs.wxml       // 日志页wxml文件
          |-- logs.wxss       // 日志页wxss文件
  |-- utils
      |-- util.js             // 小程序公用方法
  |-- app.js                  // 小程序逻辑
  |-- app.json                // 小程序公共配置
  |-- app.wxss                // 小程序公共样式表
  |-- project.config.json     // 小程序项目配置

可以看到，项目文件主要分为.json，.wxml，.wxss和.js类型，每一个页面由四个文件组成，为了方便开发者减少配置，描述页面的四个文件必须具有相同的路径与文件名。

配置文件描述

app.json是小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。其他配置项细节可以参考文档小程序的配置 app.json 。
project.config.json是项目工具配置，对工具做的任何配置都会写入这个文件，使得只要载入同一个项目代码包，开发则工具会自动恢复当时你开发项目时的个性设置。这里面需要配置小程序的appid。其他配置项细节可以参考文档开发者工具的配置。
page.json是每个页面对应的配置，让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。其他配置项细节可以参考文档
页面配置。

页面代码

具体页面源码请戳这里查看。

常见问题

使用 ES7 的 async/await 时报错：ReferenceError: regeneratorRuntime is not defined

解决方法：

在新建的文件夹中执行 npm init，生成package.json文件（一路回车就好）
执行 npm install regenerator
将node_modules文件夹下的regenerator-runtime文件夹复制到小程序项目中
在需要使用到async await的.js文件引入regenerator-runtime文件夹下的runtime.js文件

报错：https://free-api.heweather.com 不在以下 request 合法域名列

解决方法：
到小程序开发页面，点击左侧开发 -> 开发设置 -> request合法域名，添加 https://free-api.heweather.com https://apis.map.qq.com 者两个合法域名，目的是为了允许使用腾讯位置服务 API 和和风天气 API。

报错：key不能为空

由于位置服务使用的腾讯位置服务-微信小程序JavaScript SDK，请自行申请自己的密钥（key）。审核通过后授权给当前要使用的微信小程序（APP ID）,还需将微信小程序域名 servicewechat.com 添加到白名单。