使用股票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使用常见问题整理