使用股票 APP 在应用中添加股指信息 | 学习笔记

简介: 简介:快速学习使用股票 APP 在应用中添加股指信息

开发者学堂课程【使用 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 {

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

相关文章
|
17天前
|
Java Android开发
Rockchip系列之CAN APP测试应用实现(4)
Rockchip系列之CAN APP测试应用实现(4)
24 1
|
2月前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
|
2月前
uni-app 9.3聊天信息设置页(三)
uni-app 9.3聊天信息设置页(三)
21 0
uni-app 9.3聊天信息设置页(三)
|
2月前
uni-app 9.2聊天信息设置页(二)
uni-app 9.2聊天信息设置页(二)
24 1
uni-app 9.2聊天信息设置页(二)
|
2月前
uni-app 9.1聊天信息设置页(一)
uni-app 9.1聊天信息设置页(一)
38 1
uni-app 9.1聊天信息设置页(一)
|
3月前
|
安全
第二轮学习笔记:三、APP抓包
第二轮学习笔记:三、APP抓包
19 0
|
3月前
|
iOS开发 开发者
苹果iOS App Store上架操作流程详解:从开发者账号到应用发布
很多开发者在开发完iOS APP、进行内测后,下一步就面临上架App Store,不过也有很多同学对APP上架App Store的流程不太了解,下面我们来说一下iOS APP上架App Store的具体流程,如有未涉及到的部分,大家可以及时咨询,共同探讨。
|
3月前
|
存储 iOS开发 开发者
如何在上架App之前设置证书并上传应用
在上架App之前想要进行真机测试的同学,请查看《iOS- 最全的真机测试教程》,里面包含如何让多台电脑同时上架App和真机调试。
|
3月前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
107 0
|
13天前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。