开发者学堂课程【使用 API 扩展应用功能: 使用天气 API 在应用中添加天气信息】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/393/detail/5025
使用天气 API 在应用中添加天气信息
内容介绍：
一、简介与相关资料说明
二、订购获取易源天气 API 免费版使用权限
三、编码调用 API 制作简单天气预报 H5 界面
一、简介与相关资料说明
易源数据作为一家专业的 api 数据提供商，在阿里云数据市场创建初期即合作入驻阿里云数据市场，见证并参与了阿里云数据市场的建设发展。是数据市场 api 使用人数最多、用户最为认可的服务商。
我们发现在云市场 API 实际使用上还是缺少一个"HELLOWORLD"为更好服务于用户，特此制作包含完整 api 使用流程的演示"H5天气
预报”
二、订购获取易源天气 API 免费版使用权限
（一）演示内容：
·实操视频
·讲解 PPT
·H5 天气的源代码（请求 api 数据部分）与 demo
（二）源码开发环境与相关技术框架：
·开发环境：MacOS、Intellij IDEA、chrome
·开源技术框架：PHP、Node、Webpack、Vuejs、Echarts、mint-ui 等等
（三）获取流程：
1.注册并登录阿里云
2.到数据市场选购 API，这里为直接查看易源数据的天气预报 AP
3.完成购买，这里为免费订购易源数据的天气预报 API
4.在 api 测试界面确认订购授权有效，实际测试数据是否满足需求5.查看自己的密钥，准备着手开发测试
（四）选购 API 注意事项：
·数据是否满足业务需求
·API 描述是否详尽清晰
·API 的用户数量如何，一般用的多的在稳定性、易用性、服务上会好些
·是否有额外的增值服务提供。比如易源数据提供额外的 SDK 、部分数据提供离线数据如股票历史等
·用户评价如向
·售前售后服务如何。例如有部分服务商客服旺旺长期不在线
·API 价格因素考虑。这里需要注意 API 是复杂商品，不一定只看便宜。比如返回信息丰富、数据覆盖厂，调用灵活实用性强等都需要考虑
·另外一定要实际测试货比三家。服务商一般都会提供免费或者便宜的测试套餐，可以在测试界面实际使用测试后在决定使用那家的
三、编码调用 API 制作简单天气预报 H5 界面
（一）demo 需求:
●查询特定城市的天气预报
●可以搜索添加城市到我的收藏
●使用 H5 在手机上展示
（二）调用易源天气 API 的数据:
●查询地名对应的 id:用于搜索城市列表
●id 或地名查询7天预报:用于获取天气预报信息
（三）实现思路：
1、利用 PHP 作为代理访问阿里云接口数据（阿里不支持跨域无法使用is直接调用，同时为了保密授权的 APPCODE ，所以需要 PHP 代理中转
2、PHP 实现为通用代理（proxyAPl.php），透传所有参数，仅仅是添加 request 头Authorization 用来做阿里鉴权
3、考虑是 Demo 展示。PHP 尽量简单仅实现 GET 方式访问数据；is 部分将 API 数据请求独立出来（apiStore.js）方便阅读理解
4、展现部分使用了 Vueis、Echarts、mint-ui 等 is 库
5、使用 node、Webpack 打包应用
header String 'Content-type: application/json;charset=utf-8 ’）；
//设置返回头
$error = '{"showapi_res_code"：-1,"showapi_res_error"：“参数不对”}；
if（is_array（$_GET) && isset（$_GET["url"]）}
／/判断请求中是否有接口地址参数
{
$url = $_GET["url"];
$query = $_SERVER["QUERY_STRING"];
//取查询串
$query = remove_querystring_var($query， key "url")；
//移除url参数
echo request (url $url. “?”.$query,$appcode)；
} else {
echo ‘{"showapi_res_code"：-1,"showapi_res_error"：“请传入接口地址ur"}'；
}
Scurl = curl_init（）；
curl_setopt($curl, option:C LOPT_C STOM EQ EST,$method）；
curl_setopt($curl, option:C LOPT_ L, $url）；
curl_setopt($curl, option:C LOPT_HTTPHEADE , &headers）；
curl_setopt($curl, option:C LOPT_FAILONE 0 , Value false）；
curl_setopt($curl, option:C LOPT_ ET NT ANSFE , value true）；
curl_setopt($curl, option:C LOPT_HEAD , value true）；
return {
weather：{ }，//当前天气对象
areaSearchList：[ ]，//当前搜索地区的结果列表
selected：'101290101，
//默认显示昆明这里正式环境可以使用ip、gps
favoriteArea:["prov": “云南”…}]，／／收藏的地区列表
loadingWeather：false，//正在读天气的标示
loadingSearchList:false, / / 在读搜索地区的标示
loadError：//读取错误信息
methods:{
getWeatherByAreaId[areaId]
／/返回异步请求的pro ise方便使用数据的地方处
var ts=this；
ts.LoadingWeather=true
request({
url:"http://saweather.market.alicloudapi.com/area-to-weather
areaid:areaId || ‘101290101’，
//地名参数 如果没有传默认使用昆明对应的
needIndex："1"，//需要指数参数
needMoreDay:"1"//需要7天天气参数
}).done(function(data){
if（data,showapi_res_code==0／／接口系统正确
let business=data.showapi_res_body
if（business.ret_code==0){／／接口业务成功
business.day=business.fl.index；
let index= 1,temp=[ ]；
while(true){
var day=business['f' +(index++）]；
If(day){
Temp.push(day);
