开发者文档 | 开发者文档

代码联调

这里需要从券商sdk仓库里先看一下是否已经存在券商的sdk封装方法

运行终端命令

注意这里如果是分层项目需要 cd src/investoday 再执行

npmyarn

bash

npm install @cixjs/cli -g
cix add sdk # 选择你要联调的券商sdk

npm install @cixjs/cli -g
cix add sdk # 选择你要联调的券商sdk

bash

yarn add @cixjs/cli --global
cix add sdk # 登录gitlab选择你要联调的券商sdk，这里会在src下生成sdk文件夹

yarn add @cixjs/cli --global
cix add sdk # 登录gitlab选择你要联调的券商sdk，这里会在src下生成sdk文件夹

如果没有，这需要参照此仓库中的封装逻辑对券商jsdk文档进行封装，这里可以选择华安证券的sdk【hazq】来参考，所有新增的sdk都要从dev分支开发

联调完成后需要提交至券商sdk仓库

http://192.168.14.111/investoday-c/h5/common/security-sdk/

如果没有此仓库权限请联系 linzh@investoday.com.cn

前置配置

1. 配置sdk alias

// config/index.js

...
alias: {
    ...
    '@/sdk': path.resolve(__dirname, '..', 'src/investoday/sdk'), 
},
...

// config/index.js

...
alias: {
    ...
    '@/sdk': path.resolve(__dirname, '..', 'src/investoday/sdk'), 
},
...

2. 根据文档引入sdk包

这里以华安证券 hazq 的sdk包为例

html

// index.html
<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    ...
    <script src="https://cdn.upchina.com/lib/uphybrid.min-1.0.0.js"></script> 
    <script src="./externalAPP.js"></script> 
</head>
...
</html>

// index.html
<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    ...
    <script src="https://cdn.upchina.com/lib/uphybrid.min-1.0.0.js"></script> 
    <script src="./externalAPP.js"></script> 
</head>
...
</html>

3. 配置sdk平台

下面的 maps 属性是为了处理方法名称不一致的情况，方法映射表，对应具体sdk的方法名称

// configs/CixConfig.ts
...
jsBridge: { 
    platform: 'hazq', 
    maps: {} 
}

// configs/CixConfig.ts
...
jsBridge: { 
    platform: 'hazq', 
    maps: {} 
}

4. 代码中使用

开放功能的方法列表

在任何元素上面新增 open-type 属性来调用开放功能

所有的 data-xxx 都是具体sdk方法的入参，可以找到 Security 仓库或项目文件 @/sdk/xxx 对应的方法来传参

vue

<!-- 跳转股票详情 相当于调用 sdk.toStockDetail('000001') -->
<view open-type="toStockDetail" code="000001">跳转股票详情</view>

<!-- 跳转港股 相当于调用 sdk.toStockDetail('00700') -->
<view open-type="toStockDetail" data-market="HK" code="00700">跳转股票详情</view>

<!-- 跳转场外基金详情 相当于调用 sdk.toFundDetail('159967') -->
<view open-type="toFundDetail" code="159967">跳转基金详情</view>

<!-- 跳转场内基金详情 相当于调用 sdk.toFundDetail('513300', "0", true) -->
<view
    open-type="toFundDetail"
    data-fund-type="0"
    :data-is-inside="true"
    code="513300"
>
  跳转基金详情
</view>

<!-- 获取自选股 相当于调用 sdk.getSelfStock(), 状态通过 store 来获取，字段是 stockList -->
<view open-type="getSelfStock">获取自选股</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const stockList = computed(() => store.state.stockList)
</script>

<!-- 获取状态栏安全高度 相当于调用 sdk.getStatusBarHeight, 也可以直接在 BusinessProxy 中配置 getSafeTop方法 -->
<view open-type="getStatusBarHeight">获取状态栏安全高度</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const safeTop = computed(() => store.state.safeTop)
</script>


<!-- 关闭webview 相当于调用 sdk.closeWebview -->
<view open-type="closeWebview">关闭webview</view>

<!-- 分享 相当于调用，注意：券商的sdk方法入参均不相同，需要自行参考响应入参修改
    sdk.share({
        title: '测试分享标题',
        linkurl: 'https://baidu.com',
        message: '测试分享描述',
        contentType: 'link',
    })
-->
<view
    open-type="share"
    data-title="测试分享标题"
    data-linkurl="https://baidu.com"
    data-message="测试分享描述"
    data-content-type="link"
>
    唤起分享
</view>

<!-- 获取手机用户信息 -->
<view open-type="getPhoneUserInfo">获取手机用户信息</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const phoneUserInfo = computed(() => store.state.phoneUserInfo)
</script>

<!-- 获取资金用户信息 -->
<view open-type="getUserInfo">获取资金用户信息</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const userInfo = computed(() => store.state.userInfo)
</script>

<!-- 唤起手机号登录 -->
<view
    open-type="login"
    open-login-type="phone"
>
    手机号登录
</view>

<!-- 唤起资金账号登录 -->
<view open-type="login">资金账号登录</view>

<!-- 是否手机号登录 -->
<view open-type="isPhoneLogin">判断是否手机号登录</view>

<!-- 是否资金账号登录 -->
<view open-type="isTradeLogin">判断是否资金账号登录</view>

<!-- 设置navbar颜色 相当于调用 sdk.setNavColor('silver') -->
<view
    open-type="setNavColor"
    data-color="silver"
>
    设置navbar颜色为银色
</view>

<!-- 唤起手机以及资金账号登录-->
<view open-type="login">唤起手机以及资金账号登录</view>

<!-- 跳转股票详情 相当于调用 sdk.toStockDetail('000001') -->
<view open-type="toStockDetail" code="000001">跳转股票详情</view>

<!-- 跳转港股 相当于调用 sdk.toStockDetail('00700') -->
<view open-type="toStockDetail" data-market="HK" code="00700">跳转股票详情</view>

<!-- 跳转场外基金详情 相当于调用 sdk.toFundDetail('159967') -->
<view open-type="toFundDetail" code="159967">跳转基金详情</view>

<!-- 跳转场内基金详情 相当于调用 sdk.toFundDetail('513300', "0", true) -->
<view
    open-type="toFundDetail"
    data-fund-type="0"
    :data-is-inside="true"
    code="513300"
>
  跳转基金详情
</view>

<!-- 获取自选股 相当于调用 sdk.getSelfStock(), 状态通过 store 来获取，字段是 stockList -->
<view open-type="getSelfStock">获取自选股</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const stockList = computed(() => store.state.stockList)
</script>

<!-- 获取状态栏安全高度 相当于调用 sdk.getStatusBarHeight, 也可以直接在 BusinessProxy 中配置 getSafeTop方法 -->
<view open-type="getStatusBarHeight">获取状态栏安全高度</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const safeTop = computed(() => store.state.safeTop)
</script>


<!-- 关闭webview 相当于调用 sdk.closeWebview -->
<view open-type="closeWebview">关闭webview</view>

<!-- 分享 相当于调用，注意：券商的sdk方法入参均不相同，需要自行参考响应入参修改
    sdk.share({
        title: '测试分享标题',
        linkurl: 'https://baidu.com',
        message: '测试分享描述',
        contentType: 'link',
    })
-->
<view
    open-type="share"
    data-title="测试分享标题"
    data-linkurl="https://baidu.com"
    data-message="测试分享描述"
    data-content-type="link"
>
    唤起分享
</view>

<!-- 获取手机用户信息 -->
<view open-type="getPhoneUserInfo">获取手机用户信息</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const phoneUserInfo = computed(() => store.state.phoneUserInfo)
</script>

<!-- 获取资金用户信息 -->
<view open-type="getUserInfo">获取资金用户信息</view>
<script lang="ts" setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore()
    const userInfo = computed(() => store.state.userInfo)
</script>

<!-- 唤起手机号登录 -->
<view
    open-type="login"
    open-login-type="phone"
>
    手机号登录
</view>

<!-- 唤起资金账号登录 -->
<view open-type="login">资金账号登录</view>

<!-- 是否手机号登录 -->
<view open-type="isPhoneLogin">判断是否手机号登录</view>

<!-- 是否资金账号登录 -->
<view open-type="isTradeLogin">判断是否资金账号登录</view>

<!-- 设置navbar颜色 相当于调用 sdk.setNavColor('silver') -->
<view
    open-type="setNavColor"
    data-color="silver"
>
    设置navbar颜色为银色
</view>

<!-- 唤起手机以及资金账号登录-->
<view open-type="login">唤起手机以及资金账号登录</view>

测试以及排查

1.下载券商APP，让客户协助配置前端测试环境页面地址

2. 通过前往调试方式了解更多，如果是 Android 手机可以先往下看

这里以 Android 手机为例

chrome://inspect 方式

在券商APP里面打开由客户配置好我们的测试环境地址
手机 usb 连接至电脑（这里默认你已经开启 “开发者模式”）
打开 clash翻墙（必须），需确定能否访问 google.com
在浏览器地址栏输入 chrome://inspect
找到测试地址webview，点击inspect进行调试
在控制台console，打印一下券商提供的jsBridge方法，假设jsdk文档中有个 window.gqjl.jlpGetSelfList 方法,你可以打印 window.gqjl 来判断是否有该对象

这里如果没有该对象，则需要找客户确认是否需要重新下载新的券商APP

在inspect webview地址栏输入 http://192.168.xx.xx:port 来访问本地项目运行地址
之后就可以在本地进行联调了。注意：所有的联调方法都需要封装至http://192.168.14.111/investoday-c/h5/common/security-sdk/

vconsole方式

在券商APP里面打开由客户配置好我们的测试环境地址
假设jsdk文档中有个 window.gqjl.jlpGetSelfList 方法，可以在vconsole输入 window.gqjl 来判断是否有该对象

这里如果没有该对象，则需要找客户确认是否需要重新下载新的券商APP

在vconsole输入 location.href='http://192.168.xx.xx:port' 来跳转至本地项目运行地址
之后就可以在本地进行联调了。注意：所有的联调方法都需要封装至http://192.168.14.111/investoday-c/h5/common/security-sdk/

开放功能方法列表

这里列出常用的开放功能方法，需要扩展联系 linzh@investoday.com.cn

方法名	说明	参数	返回值	vuex store字段
getSelfStock	获取自选股	无	any[]	stockList
toStockDetail	跳转股票详情	stockCode: string	无	无
toFundDetail	跳转基金详情	fundCode: string	无	无
setNavColor	设置导航栏颜色	color: string	无	无
getStatusBarHeight	获取状态栏高度	无	number	无
share	分享	shareData: ShareData	无	无
closeWebview	关闭webview	无	无	无
login	登录	无	any	userInfo
getUserInfo	获取用户信息	无	any	phoneUserInfo
isPhoneLogin	是否手机登录	无	boolean	phoneUserInfo.logined
isTradeLogin	是否资金账号登录	无	boolean	userInfo.logined

代码联调 ​

运行终端命令 ​

前置配置 ​

1. 配置sdk alias ​

2. 根据文档引入sdk包 ​

3. 配置sdk平台 ​

4. 代码中使用 ​

测试以及排查 ​

chrome://inspect 方式 ​

vconsole方式 ​

开放功能方法列表 ​

代码联调

运行终端命令

前置配置

1. 配置sdk alias

2. 根据文档引入sdk包

3. 配置sdk平台

4. 代码中使用

测试以及排查

chrome://inspect 方式

vconsole方式

开放功能方法列表