WEB组件在牛牛桌面端提供了简单的WEB应用扩展，帮助用户实现在牛牛桌面端中使用第三方系统提供的辅助投资决策的工具，实现牛牛与用户自研系统的联动能力。
本指引旨在帮助开发者快速了解牛牛 WEB 组件以及它所支持的 schema。
WEB 组件，是富途牛牛桌面端内嵌的浏览器。
用户可以通过 WEB 组件自由访问第三方网页，也可以访问自行开发的 WEB 服务系统，例如：智能选股系统、复盘系统等。
WEB 组件支持在自研的网页中通过 schema 实现和牛牛系统进行通信。
通俗地理解，schema 是用于帮助客户解决牛牛桌面端与自研系统缺乏联动的问题。通过schema，您可以快速切到指定股票的报价页面或者交易页面，也可以修改同编号组件对应的股票。
我们已经扩展出一部分功能给有需求的开发者，只需要在网页上需要点击的文字或图片位置增加相应的超链接，就可以实现单击快速切换到指定页面的效果。
例：单击下图中的蓝色字样，即可快速跳转到 SBUX.US 的报价页面。
ftnn://quote/市场ID/股票代码/
快速切换到报价tab，对应股票为指定股票。
市场ID的定义为：
港股：1
美股：2
沪市：3
深市：4
1）trade
ftnn://trade/市场ID/
市场ID的定义为：
港股：1
美股：2
沪市：3
深市：4
ftnn://trade/市场ID/股票代码/
参数中带上可交易股票的代码，则自动跳转到报价tab下的快捷交易面板，并自动填
指定的股票代码，默认不修改订单类型。
2）conditionTrade
ftnn://conditionTrade/市场ID/
市场ID的定义为：
港股：1
美股：2
沪市：3
深市：4
① ftnn://conditionTrade/市场ID/股票代码/
若参数中有相关可交易股票代码，则自动跳转到条件交易界面并自动填充指定的股票代码和当前的市价，类型为「条件单(定点触发)」。
② ftnn://conditionTrade/市场ID/股票代码/股数/价格/
若参数中有相关可交易股票代码、股数和价格，则自动跳转到条件交易界面并自动填充股票代码和数量价格，类型为「条件单(定点触发)」。
3）normalTrade
ftnn://normalTrade/市场ID/股票代码
市场ID的定义为：
港股：1
美股：2
沪市：3
深市：4
① ftnn://normalTrade/市场ID/股票代码/
参数中带上可交易股票的代码，则自动跳转到报价 tab 下的快捷交易组件，并自动填指定的股票代码，类型为普通订单(港股的限价单（增强）、港股期权的限价单，A股限价委托、美股的限价单，港股期货的限价单)。
② ftnn://normalTrade/市场ID/股票代码/股数/价格/
若同时带上可交易股票的代码、股数和价格，则自动跳转到报价 tab 下对应市场的交易组件，并自动填充指定的股票代码、数量、价格，类型为普通订单(港股的限价单（增强）、港股期权的限价单，A股限价委托、美股的限价单，港股期货的限价单)。
ftnn://groupStock/市场ID/
市场ID的定义为：
港股：1
美股：2
沪市：3
深市：4
1）ftnn://groupStock/市场ID/股票代码/
修改相同编号组件对应的股票
2）ftnn://groupStock/市场ID/股票代码/股数/价格/
修改相同编号组件对应的股票，如果该组件需要填写股数和价格（如交易组件），则自动填入
Schema 代码样例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时筛选摆盘价差为1的涡轮</title>
<style>
.panel {
width: 400px;
border: 2px solid orange;
}
.panel-title {
background-color:whitesmoke;
}
.stock-info {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
}
.stock-info input {
padding: 2px;
border: 1px solid orange;
line-height: 1.2em;
width: 6em;
font-size: inherit;
}
.stock-info .stock-name {
padding: 2px 0 2px 4px;
border: 1px solid transparent;
width: 8em;
line-height: 1.2em;
background-color: whitesmoke;
}
.stock-info .stock-price-all {
margin-left: 8px;
border-bottom: 1px solid whitesmoke;
color: red;
}
.stock-info .stock-price {
font-size: 16px;
font-weight: bold;
}
.stock-info .stock-price-change {
font-size: 12px;
}
.stock-turnover-condition input {
width: 6em;
border-top: 0;
border-left: 0;
border-bottom: 1px solid lightgray;
border-right: 0;
margin: 0 4px;
}
.stock-turnover-condition span {
margin-right: 4px;
}
table {
margin-top: 10px;
width: 100%;
border-collapse: collapse;
border-color: whitesmoke;
}
td, th {
padding: 4px;
font-weight: normal;
text-align: right;
border-color: lightgray;
}
tbody a {
color: inherit;
text-decoration: none;
}
tbody .price-up {
color: red;
}
tbody .price-down {
color: green;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-title">实时筛选摆盘价差为1的涡轮</div>
<div class="stock-info">
<input type="text" value="00700" />
<div class="stock-name">腾讯控股</div>
<div class="stock-price-all">
<div class="stock-price">349.000</div>
<div class="stock-price-change">+9.000 +2.65%</div>
</div>
</div>
<div class="stock-turnover-condition">
<span>成交量(K)</span><input type="text" />至<input type="text" />
</div>
<table border="1">
<thead>
<tr><th>代码</th><th>名称</th><th>最新价</th><th>涨跌额</th></tr>
</thead>
<tbody>
<tr><td>12651</td><td><a href="ftnn://quote/1/12651">腾讯中银零四沽C.P</a></td><td class="price-down">0.044</td><td class="price-down">-0.018</td></tr>
<tr><td>12896</td><td><a href="ftnn://normalTrade/1/12896">腾讯瑞信零四沽B.P</a></td><td class="price-down">0.052</td><td class="price-down">-0.020</td></tr>
<tr><td>11748</td><td><a href="ftnn://trade/1/11748">腾讯中银零三购F.C</a></td><td class="price-down">0.045</td><td class="price-down">-0.020</td></tr>
<tr><td>11755</td><td><a href="ftnn://conditionTrade/1/11755">腾讯中银零三购G.C</a></td><td class="price-up">0.127</td><td class="price-up">+0.038</td></tr>
<tr><td>12327</td><td><a href="ftnn://groupStock/1/12327">腾讯摩通零四沽C.P</a></td><td class="price-down">0.045</td><td class="price-down">-0.017</td></tr>
</tbody>
</table>
</div>
</body>
</html>