先看下最终的效果(默认可以获得未来三天数据):

第一:首先准备条件(必须):

1.小程序已认证,有appID

2.必须把https://api.map.baidu.com 添加到小程序的合法域名列表中

上面两个条件缺一不可,满足后 继续往下看

第二:在百度开放平台上创建一个应用,拿到Ak(前提有百度账号)。申请地址:http://lbsyun.baidu.com/apiconsole/key

应用创建成果:

第三:万事俱备,只欠东风,引入官方提供的JS文件(下载地址:http://lbsyun.baidu.com/index.php?title=wxjsapi/wxjs-download),该文件中已经写好了请求数据的代码,我们只需要将数据取出来就好了

例如:

// 引用官方文件
var map = require('../../bmap-wx.min.js'); Page({
data:{
ak:"你的AK",
// 用于保存当日天气信息
TayData:'',
// 用于保存未来天气信息
futureWeather:[]
},
onLoad:function(options){
var that = this;
// 新建bmap对象
var BMap = new bmap.BMapWX({
ak: that.data.ak
}); var success = function(data) {
console.log(data); var weatherData = data.currentWeather[];
var futureWeather = data.originalData.results[].weather_data;
console.log(futureWeather);
weatherData = '城市:' + weatherData.currentCity + '\n' + 'PM2.5:' + weatherData.pm25 + '\n' +'日期:' + weatherData.date + '\n' + '温度:' + weatherData.temperature + '\n' +'天气:' + weatherData.weatherDesc + '\n' +'风力:' + weatherData.wind + '\n';
that.setData({
TayData: weatherData,
futureWeather: futureWeather
});
} // 发起weather请求
BMap.weather({
fail: fail,
success: success
});
}
})

自己手动请求数据:

Page({
data: {
// 用于保存当日天气数据
Tad_weather: [],
// 用于保存未来天气数据
future_weather: []
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var that = this;
wx.request({
url: 'https://api.map.baidu.com/telematics/v3/weather?location=西安市&output=json&ak=申请的ak',
header: {
'Content-Type': 'application/json'
},
success: function (res) {
console.log(res.data.results);
that.setData({
Tad_weather: res.data.results[].index
future_weather: res.data.results[].weather_data
})
}
})
}
})

小程序引入百度api天气预报的更多相关文章

  1. 微信小程序项目实战之天气预报

    概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...

  2. 微信小程序接入百度OCR(身份证识别)

    微信小程序接入百度OCR(身份证识别) 1.接口描述 支持对二代居民身份证正反面所有8个字段进行结构化识别,包括姓名.性别.民族.出生日期.住址.身份证号.签发机关.有效期限,识别准确率超过99%:同 ...

  3. 小程序引入多个e-charts

    小程序引入e-charts图表 这里是狗尾草第一次发表掘金文章,日后望各位大佬多多支持~ 前言:运营助手,见名知意,没有图表数据的展示,看上去是有多空白.因此,俺们UI做了很好的交互,一个页面来了4个 ...

  4. 微信小程序转换为百度小程序

    据粗略预估,微信小程序和百度小程序,有至少90%以上的相似代码,而且api的参数和返回的数据都是一致的,有一些不一致的将做如下介绍:.wxml文件,改成后辍名.swan.wxss文件,改成后辍名为.c ...

  5. 微信小程序的Web API接口设计及常见接口实现

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...

  6. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  7. 「小程序JAVA实战」小程序和后台api通信(28)

    转自:https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuhehoutaiapitongxin28/ 开发最重要的就是实操! 小 ...

  8. 微信小程序转百度小程序修改

    百度小程序对比微信小程序(最初版):[设备]项里没有内存监控.iBeacon.wifi.蓝牙.用户截屏.手机联系人.NFC[位置]项里没有打开地图选择位置[界面]项里没有绘图功能.没有节点信息获取功能 ...

  9. Django2.0+小程序技术打造微信小程序助手百度云

    加Q[965546358]获取资源 第1章 课程导学 第2章 小程序开发入门 从几个方面介绍小程序开发相关的内容,包括小程序开发者账号注册.小程序开发流程.小程序开发规范.小程序常用的API,例如网络 ...

随机推荐

  1. svn 钩子应用 - svn 提交字符限制, 不能为空

    一.版本库钩子 1.1 start-commit  开始提交的通知 输入参数:传递给你钩子程序的命令行参数,顺序如下: 1.  版本库路径 2.  认证过的尝试提交的用户名 3.  Depth,mer ...

  2. BugPhobia开发篇章:Beta阶段第VII次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第七次Scrum Meeting 敏捷开发起始时间 2015/12/19 00:00 A.M. 敏捷开发终止时间 2015/12/21 23 ...

  3. 软工+C(2): 分数和checklist

    // 上一篇:题目设计.点评和评分 // 下一篇:超链接 教学里,建立清晰明确的评分规则并且一开始就公布,对于教师.助教.学生都是重要的. 公布时机 在课程开始的时候,就需要确定并公布评分机制,随着课 ...

  4. Kubernetes一键部署利器:kubeadm

    要真正发挥容器技术的实力,你就不能仅仅局限于对 Linux 容器本身的钻研和使用. 这些知识更适合作为你的技术储备,以便在需要的时候可以帮你更快的定位问题,并解决问题. 而更深入的学习容器技术的关键在 ...

  5. powershell 函数, foreach中格式化

    function testArg { $n = 1; if($args.Count -eq 0) { "No arg!" } else { $args | foreach {&qu ...

  6. 如何批量修改网页 更新网站 一键保存 windows查看和排序

    批量打开需要修改的网页,一键保存:一个网站会由很多网页组成,当需要大量更新的时候,如果一个个进行打开修改,效率会很低,内容修改不多,且容易修改的时候,可以用editplus这种小编辑软件批量打开,批量 ...

  7. python 高阶函数之 map

    以例子来理解 用法1:如函数 f(x) = x * x,用python实现如下 >>> def f(x): ... return x * x >>> r = map ...

  8. POJ--3349 Snowflake Snow Snowflakes(数字hash)

    链接:Snowflake Snow Snowflakes 判断所有的雪花里面有没有相同的 每次把雪花每个角的值进行相加和相乘 之后hash #include<iostream> #incl ...

  9. Apache Flink:特性、概念、组件栈、架构及原理分析

     2016-04-30 22:24:39    Yanjun Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时(Flink Runtim ...

  10. 从零开始学习微信小程序

    1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...