学习中心> 使用API扩展应用功能> 正文

使用API扩展应用功能

2课时 |
1372人已学 |
免费
课程介绍

API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。阿里云市场中提供了大量数据API供开发者使用,通过这些API,你可以在网站或应用中快速增加相关的功能,以及在线使用海量的数据信息。

本课程主要讲解这些API的使用方法。更多数据API:https://market.aliyun.com/data

 

使用股票APP在应用中添加股指信息

 

内容介绍:

一、简介与相关资料说明

二、订购获取易源股票API免费版使用权限

三、编码调用API制作股票H5界面

四、云市场API使用常见问题整理

 

一、简介与相关资料说明

 

二、订购获取易源股票API免费版使用权限

 

三、编码调用API制作股票H5界面

(一)demo需求:

查看股票实时行情

查看股票k线图

根据名称搜索收藏股票    

使用H5在手机上展示

 

(二)调用易源股票API的数据:

  获取股票行情数据:用于行情展示

  根据名称或编码查询股票信息:搜索和收藏

  股票实时K线图:展示K线图

  股票实时分时线数据:展示分时线

 

(三)最终展示效果:

k线图、行情速记、搜索界面收藏、收藏夹

 

(四)实现思路

1、利用PHP作为代理访问阿里云接口数据(阿里不支持跨域无法使用is直接调用,同时为了保密授权的APPCODE,所以需要PHP代理中转

2、PHP实现为通用代理(proxyAPl.php),透传所有参数,仅仅是添加request头Authorization用来做阿里鉴权

3、考虑是Demo展示。PHP尽量简单仅实现GET方式访问数据;is部分将API数据请求独立出来(apiStore.js)方便阅读理解

4、展现部分使用了Vuejs、Echarts、mint-ui等is库

5、使用node、Webpack打包应用

 

(五)源码目录

1、打包的目标文件夹

2、源码目录

3、请求数据的js文件

4、代理数据的php文件

实际使用时应将appcode替换为自己的appcode

设置一个返回头:

header(string’Content-type: application/json;charset=Ute-8 ‘);

$error = ‘{“showapi  res_code”:  -1,”showapi_res_error”:”参数不对”}

判断请求中是否有口地址参数:

if {is_array($_GET)  && isset($_GET[“url”]) }  

取查询串:

$url = $_GET[“url”]

$query = $_SERVER[“QUERY_STRING”]

移除url参数:

$query = remove_querystring_var[$query, key”url”]

设置返回头规则:

headers, var:”Authorization:APPCCODE ” , ¥appcode);

阿里云平台返回时判断特定规则:

返回时状态码为200时表示此次返回为成功有效的,进行计费扣件字数:若状态码非200,则不会对余额进行扣费

状态码555为专门针对阿里云设置的

data部分:

export default  {

data( ) {

return {

stockInfo:{ },//当前股票实时行情

stockSearchList:[ ],//当前搜索股票结果列表

selected:’002739’,//默认显示昆明这里正式环境可以使用ip、gps等

 

favoriteStock: [{"name":“万达院线“…} ],//收藏的地区列表

loadingStockinfo:false,//正在读天气的标示

loadingSearchList:false,//正在读搜索地区的标示

LoadError:‘ ’,//读取错误信息

klineType: ‘ ’5’//K线图类型

  }

}

methods: {

返回异步请求的pro ise 方便使用数据的地方处理

loadKline(viewActived){

If (!viewActived)return;

var ts = this;

ts.loadingStockInfo  =  true~

request({    

       url:http://stock.market.alicloudapi.com/realtime-k”,

code:ts.selected,//股票编码

time: ts.kLineType,

BeginDay: getKLineStartTime(ts.kLineType)

}).done(function  (data)  {      

if(data.showapi res code== 0 //接口系统正确            

Let business = data.showapi_res body        

if(business.ret.code==0)//接口业务成功                

ts.stockInfo=business.stockMarket;        

yelset              

console.error("业务错误",business.error llbusiness                

 ts.LoadError = business.error li business.remark                      

 

 

四、云市场API使用常见问题整理