微信天气小程序教程

PingCAP 发布于2019-08-23 14:35 / 884人阅读

摘要：前言这是一个微信天气小程序开发教程，简单易学，半天即可完成。报错不能为空由于位置服务使用的腾讯位置服务微信小程序，请自行申请自己的密钥。审核通过后授权给当前要使用的微信小程序还需将微信小程序域名添加到白名单。

前言

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

欢迎扫码体验：

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

云服务器私有云微信小程序微信小程序支付微信付款小程序微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100817.html

微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

piapia 2019-08-20 11:12 评论0 收藏0
小程序 · 云开发

摘要：课程内容以打造一款拥有天气预报和签到功能的小程序为主线，从基础知识到小程序运行机制，从开发环境搭建到小程序云开发的接口使用调试上线，打通微信小程序开发全流程。 9 月 11 日，微信开发者工具新增小程序「云开发」功能。 showImg(https://segmentfault.com/img/bVbjQLW?w=1000&h=544); 大多数开发者在开发应用时和部署服务时，无论是选择...

nanchen2251 2019-06-28 11:00 评论0 收藏0
超简单！只需简单几步即可为TA定制天气小助理！！

摘要：前提虽然我们每天都会查看天气，但是如果你能够用限制微信每天早上七点定时为推送天气预报，生活指数。重要其中模块是本项目以及后续项目中很重要的模块，就是因为这个开源项目，我们才能使其与微信产生交互。 showImg(https://segmentfault.com/img/remote/1460000019558841?w=1920&h=1279); 前提虽然我们每天都会查看天气，但是如...

NicolasHe 2019-07-31 10:36 评论0 收藏0