# JS组件开发指南

# 组件安全说明

每个组件运行在独立的进程中的安全沙箱中，组件之间、组件与客户端主程序之间彼此互不影响
为了安全、合规，组件的功能是受限的，只能调用SmartX客户端SDK提供的API进行行情、交易、策略等方面的正常业务，无法连接外部服务器、本地其他进程，无法接受外部其他输入等
组件分为发布模式(.smart扩展名的包)、开发模式(文件夹形式)，其功能是相同的，开发模式用于开发和调试，发布到组件库的是发布模式的格式
尽管组件使用Web前端技术开发，但组件的代码发布到组件库后(发布模式)，为SmartX客户端特有的格式，其他客户无法得到任何Web资源代码
- 开发模式的组件（文件夹形式）为私有组件，若想发布到组件库，可通过SmartX客户端的开发者界面发布
- 开发模式的组件（文件夹形式）不区分实盘、测试环境，均可使用
- 开发模式的组件（文件夹形式）可与相同plugin_id的发布版本组件一起使用，相互独立，且开发模式的组件无法升级
- 同一台机器上一个资金账号安装的组件，其他资金账号登录也可以使用，同理卸载或升级一款组件，同机器的其他资金账号也受影响
- 从测试环境的组件库下载的组件只能测试环境使用，从生产环境的组件库下载的组件只能生产环境使用

# 组件开发的技术体系

组件使用标准Web前端技术进行开发，按照开发文档的API及接入规范进行开发，即可挂载到SmartX客户端作为私有组件使用，若要将组件上传发布到组件库供其他客户使用，还要通过SmartX客户端的"扩展"功能下的"开发者"界面，进行发布，审核通过其他客户可以在组件库浏览并在线安装后可以使用。进行组件开发主要使用以下技术体系：

Vue(推荐2.5.17版本)
iView开源UI组件(推荐2.13.0)
webpack(推荐4.15.X)+node.js(推荐v10.11.X)进行打包编译
SmartX团队提供的一些公共UI组件，如持仓列表、委托列表、成交列表、可撤列表、五档/十档盘口、BigTable等

# UI及交互体验要求

您开发的组件的UI及交互体验应与SmartX客户端保持一致，参见《SmartX组件UI设计规范》文档，尽可能使用SmartX提供的公共UI组件以提供UI一致性和便于快速开发。

# 申请测试账号

在 XTP官网 (opens new window) 注册用户
注册成功并登陆 (opens new window)后，到 个人中心 (opens new window) 填写测试账户申请单，申请测试系统选中"XTP简单交易客户端"（若您需要使用kungfu进行后台策略的开发，还需要勾选"Kungfu"）
填写完毕申请信息后点击提交申请。系统在一个工作日内将自动将测试账号、密码发到您第一步注册网站用户时填写的邮箱中，请注意查收。
在下载中心 (opens new window)下载 "极速交易客户端(SmartX)"以及操作手册

# 权限申请

若您需要使用客户端JS组件进行策略的开发，需要向客户经理申请开通客户端JS组件权限

# 创建工程

打开SmartX客户端，登录地址选择smarttest.ztqft.com，输入测试账号、密码登录后，在左侧一级菜单的扩展中，选择安装的组件，点击新建扩展组件按钮新建组件，按照提示填写内容完成项目的建立

新建JSDemo组件

# 克隆、导出、导入组件

在已安装的组件列表中点击按钮以当前组件为模板克隆生成新组件
在已安装的组件列表中点击按钮将当前组件压缩为zip包导出到客户指定的目录
在已安装的组件列表中通过复选框选中要批量导出的组件然后点击按钮将选中组件分别压缩为zip包并批量导出到客户指定目录
点击按钮在弹出的文件选择窗口中按住ctrl或shift键批量选中待导入组件的zip包进行组件导入

# 搭建开发环境

安装 node.js官方地址 (opens new window)，项目依赖 node.js运行环境，客户需要在本地安装node.js（10.9.0~12.0.0）
安装完毕后打开命令行工具，进入到保存项目路径 C:\Users\DELL\.xtp-smart\plugins\JSDemo(在已安装的组件列表中点击图标可查看本机保存项目路径)
执行 npm install 安装工程的依赖库
安装完成后，即可执行 npm run build 对当前项目进行构建编译，后续开发的时候也将使用此命令进行构建编译
如果需要开发Kungfu后台策略配合前端组件，参见快速上手中的搭建开发环境章节

安装的JS组件

# 编写代码

进行项目实际VUE代码的开发 Smart SDK的所有API均通过内置对象smart使用，正如window对象为内置对象一样，可直接使用smart对象下的属性及方法具体用法参考Smart SDK API文档以及Smart SDK API示例
一个简单的示例：

//index.js 
import Vue from 'vue'
import App from './js/App'
import iView from './js/iview.js';
Vue.use(iView);
import '!style-loader!css-loader!iview/dist/styles/iview.css';
import '!vue-style-loader!css-loader!sass-loader!@/scss/main.scss'

smart.on_init(function(){
	console.log("onInit");
	const globalApp = new Vue({
        render: h => h(App),
	}).$mount('#app');
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//App.vue
<template>
    
</template>

<script>
export default {
    name:'demo',
    components: {
        
    },
    data: function() {
        
    },
    async created() {
        console.log("App created");
        //接收行情
        smart.current_account.on_quote(quote=>{
            console.log(quote);
        });

        //订阅
        smart.current_account.subscribe('600000', smart.Type.Exchange.SSE);

        //接收委托推送
        smart.current_account.on_order(order=>{
            console.log(order);
        });  

        //接收成交回报推送
        smart.current_account.on_trade(trade=>{
            console.log(trade);
        }); 

        //接收资产变化推送
        smart.current_account.on_assets(assets=>{
            console.log(assets);
        });
        
        //接收持仓变化推送
        smart.current_account.on_position(position=>{
            console.log(position); 
        });

        //委托
        try{
            let result = await smart.current_account.insert_order('600000',smart.Type.Exchange.SSE,'10.56','100',smart.Type.PriceType.Limit,smart.Type.Side.Buy,smart.Type.Offset.Init);
            console.log(result);
         }catch(e){
            console.log(e);
         }
    },
    methods: {
       
        
    }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

前端UI可使用iview的控件以及SmartX团队提供的部分UI控件，在上述代码基础上继续完善

# 运行、调试组件

开发完后，在项目根目录D:\JSDemo下执行npm run build命令对项目源码进行编译、打包、发布到组件运行目录
打开SmartX客户端，登录地址选择smarttest.ztqft.com，输入测试账号、密码登录后，在左侧一级菜单的"扩展"中，即可出现您的组件，点击打开按钮即可运行，点击调试按钮可打开devTools调试器并启动组件，点击？按钮会打开当前引导说明窗口
修改代码后，重新执行npm run build命令，然后到SmartX客户端，重新进入该功能即可执行新修改的代码

# 发布组件

# 发布到测试体验环境

为了便于其他客户先通过测试体验环境试用您要发布的组件，建议您先发布到测试体验环境中
联系您的客户经理，提供测试账号并申请"SmartX组件发布"权限（相同的账号申请过一次权限后，无需再次申请）
申请通过后，打开SmartX客户端，登录地址选择smarttest.ztqft.com，用测试账号、密码进行登录，点击左侧"扩展"，点击"开发者"，点击"发布管理"，点击"发布组件"，进行发布，发布时注意选择上传的目录是plugins目录下的组件编译完的可运行目录，而非项目源码根目录。
提交成功后，等待审核通过，其他客户就可以在体验环境的"扩展"下的"组件库"中浏览到您发布的该组件，点击安装，完毕后在"扩展"下的"已安装的组件"中点击可以使用

# 发布到生产实盘环境

发布方法完全同"发布到测试体验环境"章节，只是登录地址为smartsz.ztqft.com，登录账号为实盘账号，注意实盘账号发布组件也需要申请"SmartX组件发布"权限

# 发布组件的新版本

修改组件项目根目录下的package.json中的version、changeLog，并确保name不要改动，menuText可以变更，若基于更高的smart sdk版本，还需要变更minSmartSdkVersion
按上节"发布组件"的描述重新发布到测试体验环境和生产实盘环境

清单文件 →