WEB組件在牛牛桌面端提供了簡單的WEB應用擴展，幫助用戶實現在牛牛桌面端中使用第三方系統提供的輔助投資決策的工具，實現牛牛與用戶自研系統的聯動能力。
本指引旨在幫助開發者快速了解牛牛 WEB 組件以及它所支持的 schema。
1. WEB組件是什麼？
WEB 組件，是富途牛牛桌面端內嵌的瀏覽器。
用戶可以通過 WEB 組件自由訪問第三方網頁，也可以訪問自行開發的 WEB 服務系統，例如：智能選股系統、複盤系統等。
WEB 組件支持在自研的網頁中通過 schema 實現和牛牛系統進行通信。
2. 什麼是schema？
通俗地理解，schema 是用于幫助客戶解決牛牛桌面端與自研系統缺乏聯動的問題。通過schema，您可以快速切到指定股票的報價頁面或者交易頁面，也可以修改同編號組件對應的股票。
3. 如何使用schema?
我們已經擴展出一部分功能給有需求的開發者，只需要在網頁上需要點擊的文字或圖片位置增加相應的超鏈接，就可以實現單擊快速切換到指定頁面的效果。
例：單擊下圖中的藍色字樣，即可快速跳轉到 SBUX.US 的報價頁面。
4. 組件支持哪些schema？
4.1 快速切換報價頁
ftnn://quote/市場ID/股票代碼/
快速切換到報價tab，對應股票為指定股票。
市場ID的定義為：
港股：1
美股：2
滬市：3
深市：4
4.2 快速切換交易頁
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股限價委托、美股的限價單，港股期貨的限價單)。
4.3 快速修改同編號組件對應的股票
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>
