微信天色小顺序教程

媒介

这是一个微信天色小顺序开辟教程，简朴易学，半天即可完成。可根据天色差别，设置差别的背景图片。初始默许及时定位当前位置天色，也可搜刮查询各地区天色。细致完成结果以下：

迎接扫码体验：

源码请戳这里，迎接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

解决要领：

1. 在新建的文件夹中实行 npm init，天生package.json文件（一起回车就好）
2. 实行 npm install regenerator
3. 将node_modules文件夹下的regenerator-runtime文件夹复制到小顺序项目中
4. 在须要运用到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 增加到白名单。