开发者学堂课程【使用 API 扩展应用功能: 使用股票APP在应用中添加股指信息】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/393/detail/5024
使用股票 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
{
stock
I
nfo:
{ }
,/
/
当前股票实时行情
stockSearchList:
[ ]
,//当前搜索股票结果列表
se
l
ected:
’
002739
’
,//默认显示昆明这里正式环境可以使用ip、gps等
favorite
S
tock
:
[
{
"name":“万达院线“
…} ],
//收藏的地区列表
l
oadingStockinfo:false,//正在读天气的标示
l
oadingSearchList:fa
l
se,//正在读搜索地区的标示
LoadError:
‘ ’,
//读取错误信息
k
l
ineType:
‘ ’
5
’
//K线图类型
}
}
methods:
{
返回异步请求的 pro ise 方便使用数据的地方处理
l
oad
K
line(viewActived
){
If (!viewActived)return;
var ts = this;
ts.
l
oadingStockInfo
=
true
~
request
({
url:
http://stock.market.alicloudapi.com/real
time-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