微信小程序——通过百度API查询天气情况

文件结构和效果预览

index.wxml代码

<!--index.wxml-->
<view class='page'><view class='top'><view class='input'><input placeholder='输入城市名进行搜索' bindinput="bindKeyInput"></input></view><view class='icon'><icon type='search' size='25' bindtap='search'></icon></view></view><view class='body'><view class='city'><text>{{city}}</text></view><view class='today'><text>今日</text></view><view><image src='{{pic}}' mode='aspectFit' style='width:400rpx;height:400rpx'></image></view></view><view class='bottom'><view class='weather'><text>{{weather}}</text></view><view class='right'><view class='wind'><text>{{wind}}</text></view><view class='temp'><text>{{temp}}</text></view></view></view>
</view>

icon属性官方文档

index.css代码

/**index.wxss**/.page {margin: 0rpx 0rpx 50rpx 50rpx;
}.top {display: flex;flex-direction: row;
}.input {width: 80%;background-color: gainsboro;
}.icon {width: 10%;
}.body {text-align: center;display: flex;flex-direction: column;
}.city {font-size: 100rpx;
}.today {font-size: 70rpx;
}.bottom {display: flex;flex-direction: row;align-items: center;text-align: center;
}.weather {font-size: 80rpx;width: 50%;
}.right {display: flex;flex-direction: column;
}.wind {font-size: 60rpx;
}.temp {font-size: 60rpx;font-family: Arial, Helvetica, sans-serif;
}

index.js代码

//index.js
var defaultcity, getweather, gettemp, getwind, getpic, city, weather, temp, wind
Page({data: {},//默认载入onLoad: function(e) {var that = thisdefaultcity = '北京'wx.request({url: 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=1a3cde429f38434f1811a75e1a90310c&location=' + defaultcity,success: function(res) {getweather = res.data.results[0].weather_data[0].weathergettemp = res.data.results[0].weather_data[0].temperaturegetwind = res.data.results[0].weather_data[0].windgetpic = res.data.results[0].weather_data[0].dayPictureUrlthat.setData({city: defaultcity,weather: getweather,temp: gettemp,wind: getwind,pic: getpic})}})},//获取输入bindKeyInput: function(e) {defaultcity = e.detail.value},//搜索城市search: function(e) {var that = thiswx.request({url: 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=1a3cde429f38434f1811a75e1a90310c&location=' + defaultcity,success: function(res) {getweather = res.data.results[0].weather_data[0].weathergettemp = res.data.results[0].weather_data[0].temperaturegetwind = res.data.results[0].weather_data[0].windgetpic = res.data.results[0].weather_data[0].dayPictureUrlthat.setData({city: defaultcity,weather: getweather,temp: gettemp,wind: getwind,pic: getpic})}})}})

百度地图API接口官网

注意请求第三方接口时需要加入合法request服务器域名

部分网址不支持https协议，需要勾选上不校验合法域名

微信小程序——通过百度API查询天气情况相关推荐

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
微信小程序利用百度api达成植物识别
看完本文你可学会: 如何使用百度智能云如何在微信小程序中去接入百度api,达成植物识别的效果如何使用百度智能云? 官网:https://cloud.baidu.com 进入官网,在用户中心下选择图 ...
【微信小程序调用百度API实现图像识别功能】----项目实战
本章主要讲述: 如何更快的上手小程序如何搭建一个页面以及跳转到另一个页面如何调用百度API接口实现图像识别技术如何在微信小程序的后台添加合法域名私信获取源码,有问题可以关注留言或私信,计算机毕 ...
微信小程序自动推送当天天气情况Java版
针对网上小程序推送天气消息进行二次优化与细节调整,更快速与方便的进行完成自己功能的开发注意全文是在别人代码基础之上做的二次优化教程开始: 1.注册微信测试账号第二步: 彩虹屁平台注册拉代码修 ...
微信小程序+OLAMI自然语言API接口制作智能查询工具--快递、聊天、日历等
微信小程序最近比较热门,再加上自然语义理解也越来越被人关注,于是我想赶赶潮流,做一个小程序试试.想来想去快递查询应该是一种比较普遍的需求. 如果你也在通过自然语言接口做点什么,希望我的这篇博客能帮到你 ...
微信小程序项目实战之豆瓣天气
概述微信小程序项目实战之豆瓣天气详细代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
微信小程序利用百度AI实现扫描身份证获取信息功能
目录前言百度端创建应用实现过程结语前言微信小程序集成百度图像识别功能,实现对上传或拍照的身份证进行扫描,并获取身份证信息. 百度端创建应用访问网址https://login.bce.ba ...
微信小程序转百度小程序修改
微信小程序转百度小程序修改百度小程序很多兼容性问题已修复,具体细节请参考官方开发文档:https://smartprogram.baidu.com/docs/develop/fuctionlist/ ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...

微信小程序——通过百度API查询天气情况

文件结构和效果预览

index.wxml代码

index.css代码

index.js代码

微信小程序——通过百度API查询天气情况相关推荐

最新文章

热门文章