微信小程序开发文档写在前面：百度地图API

吴珏在前面写的微信小程序开发文档：本文参考刘轩的文档，使用百度地图API进行定位，使用和风天气API获取天气信息。 在其工作的基础上，增加了以下内容：7天天气概览、今日天气每小时预报（绘制动态曲线）、今日天气生命指数（借鉴王路岳的思路）。 结果展示： 实验内容： 1、文件目录：放置其中用到的图片资源，pages为小程序的页面，目录下的三个页面通过切换来切换。 pages/index目录是最近天气概览的源代码，pages/hour目录是每小时天气预报的源代码。 page/today 是今日生活索引的源代码。 配置pages，在app.json文件中，代码如下： {"pages":["pages/index/index","pages/logs/logs","pages/today/index","pages/hour /索引"],"":{"":"light","": "#fff","xt": "","le":"black"},"": {"color": "# ","": "#","": "#","": "白色","list": [{"":"pages/index/index","":"/.png"," " :"/.png","text": "最近天气概览"},{"": "页数/小时/索引","": "/.png","": "/.png"," text ": "每小时天气预报"},{"": "pages/today/index","": "/.png","": "/.png","text": "今日生活指数"} ]}}近期天气概览（目录）：2.pages/index 如果您想获取未来7天的天气以及每小时天气预报，您需要在禾丰天气网页（ ）认证为个人开发者。 认证通过后，就可以调用API了。

点击主页上的注册按钮，选择单个开发者进行注册，然后按照网页上提供的信息一步步进行。 注册后需要一段时间的审核。 审核通过后，点击首页控制台按钮，可以看到账户类型为认证开发者。 显示7天天气的方法与显示3天天气的方法类似（参考刘轩的文档），这里不再赘述，仅说明补充内容。 因为调用 API得到的json数据只有日期信息，没有星期几信息。 这里我们使用微信封装的日期计算工具。 在需要计算日期的页面导入util.js，导入代码如下： var util = ('../../utils/util.js'); 执行代码，可以看到utils目录下自动生成了util.js文件，util.js的代码如下： const = date => { = date.() = date.() + day = date.() const hour = date.() const = date.() const = date.() [年月日].map().join('/')+ ' ' + [小时, ,].map().join(':') } const = n => { n = n.() n[1] ? n : '0' + n } const = 日期 => {const 年 = 日期.() const 月 = 日期.() + 日 = 日期.() [年、月、日].map().join(' -') }在文件中添加函数()和()：用于获取当前时间，并计算从当前时间推回的日期，并计算星期几。

代码如下： (days, ) {var = [];for (var i = 0; i < days; i++) {var = (, i);.push()} ; } (日期，稍后) {let = { };let = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');let date = new日期(日期);日期.(日期.() + 稍后);让日 = 日期.();让 = 日期.();让月 = ((日期.() + 1) < 10 ? ("0" + (日期.() + 1)) : 日期.() + 1);let = (日期.() < 10 ? ("0" + 日期.()) : 日期.());.时间 = + '-' + 月 + '-' + ;.周 = [日]; ; 需要注意的是：所有功能需要稍后生效，在util.js文件中写入： 。 = {: ,: } 在index.js文件中，修改函数，使用函数获取当前日期，然后使用函数计算星期几，并为保存七的对象添加属性当日天气信息：let time = util.(new Date()); 让日期 = util.(7, 时间); for(var i=0;i{{item.time}}{{item.tmp}}°|{{item.}}| ;降水量:{{item.pop}}%{{item.} 添加 }: {{item.}} 级别到index.wxss: .{: 15px 0px 0px 0px;-left: 30rpx;-right: 30rpx;-:0. rgb(241,229,229);color:white;flex- : row;- :space-;font-size: 32rpx; }由于微信小程序本身框架的限制，很难集成现有的图表工具，这里我们使用微信小程序图表插件（wx-）。

它基于绘图，体积较小，支持多种图表类型，包括：饼图、折线图、柱状图等。需要自行下载.js（下载地址：//wx-.git）。 将wx-/dist/.js文件复制到utils目录下，即可使用wx-plug-in。 在index.js中导入.js，并定义要绘制的图表：var Chart = null; var = ('../../utils/.js'); 通过函数获取各个时间段的天气信息： : (city) {var that = this;var url = "/s6/";var = {: city,key: "13"}wx.({url: url ,data: ,: (res) {var hour = res.data.[0].;var tmp = res.data.[0].now.tmp;.log(hour);.log(hour[0].时间);for(var i=0;i

TAG标签：小程序开发文档