微信天气小程序教程

意外金喜 2019-06-30

前言

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

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

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

相关推荐

戴翔的技术 / 0评论 2020-02-03