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

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

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. 【Swift】iOS开发笔记(一)

    前言 边开发边学习,边攒经验,汇总一下记录到这里 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblog ...

  2. 基于Flask 实现Web微信登陆

    网页版微信登陆网址 https://login.wx.qq.com/ 获取微信登陆的二维码 在浏览器中访问登陆接口 https://login.wx.qq.com/ 我们查找二维码的图片可以看到 其中 ...

  3. zabbix异常信息修改已确认,为未确认

    问题知悉只能知悉一次知悉了之后就不能再次知悉了,但又不想再创建新的异常怎么办呢.....直接改数据库数据.首先找到acknowledges表这里边存放的全是已经知悉的异常然后找events表,even ...

  4. 【转】How to create a new user and grant permissions in MySQL

    MySQL is one of the most popular database management systems. In this tutorial we will cover the ste ...

  5. idea打开项目,没有项目文件,文件报红

    删除项目文件夹中的.idea文件,重启idea,再执行如下操作.

  6. JS-JAVASCRIPT的eval()方法

    Lodop的传统模版是JS语句,如果储存的这种JS模版,可用javascript的eval()方法获取,该方法属于JS的范畴,并不是lodop语句,由于这个方法很多程序员可能不常用,对于这个JS方法不 ...

  7. kubernetes 安装metrics-server

    metrics-server文件下载: https://github.com/kubernetes/kubernetes/tree/master/cluster/addons/metrics-serv ...

  8. 【XSY2843】「地底蔷薇」 NTT什么的 扩展拉格朗日反演

    题目大意 给定集合\(S\),请你求出\(n\)个点的"所有极大点双连通分量的大小都在\(S\)内"的不同简单无向连通图的个数对\(998244353\)取模的结果. \(n\le ...

  9. Makefile 常用函数表

    Makefile  常用函数表 一.字符串处理函数1.$(subst FROM,TO,TEXT)函数名称:字符串替换函数—subst.函数功能:把字串“TEXT”中的“FROM”字符替换为“TO”.返 ...

  10. 监控MySQL|Redis|MongoDB的执行语句(go-sniffer)

    上节回顾:https://www.cnblogs.com/dotnetcrazy/p/9986873.html 以CentOS为例: 1.环境 PS:如果不需要Golang环境,可以编译后把执行文件c ...