微信天色小顺序教程

媒介

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

迎接扫码体验:
《微信天色小顺序教程》

源码请戳这里,迎接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 增加到白名单。

    原文作者:HALOH
    原文地址: https://segmentfault.com/a/1190000017808897
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞