輕應(yīng)用H5新版JS
H5 版輕應(yīng)用組件調(diào)用
H5 版輕應(yīng)用組件指的是輕應(yīng)用移動(dòng)版（內(nèi)嵌在微博客戶端中）為接入方應(yīng)用提供的、喚起微博原生功能的 JavaScript 功能包。
讓輕應(yīng)用能實(shí)現(xiàn)諸如獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)、獲取定位信息、喚起客戶端二維碼掃描、查看大圖等功能，同時(shí)也提供了一些組件供接入方調(diào)用，如共享地址簿組件。
使用條件
微博 Android 與 iPhone 官方客戶端 5.3.0 以上版本的內(nèi)置瀏覽器。
設(shè)置安全域名
- 點(diǎn)擊頂部我的應(yīng)用，打開需要配置的輕應(yīng)用
- 選擇左側(cè)導(dǎo)航的“應(yīng)用信息”
- 編輯應(yīng)用基本信息，并填寫安全域名后保存
注：配置了安全域名的子域名也會(huì)獲得 JSBridge 的調(diào)用權(quán)限
引入 JS 文件
使用 H5 版 JS API，需要首先引入一個(gè) JS 文件。
該 JS 文件會(huì)使用全局命名空間 WeiboJS，提供了三個(gè) JS 方法：
- ? WeiboJS.init() 用途：調(diào)用 Bridge 前進(jìn)行初始化
- ? WeiboJS.invoke() 用途：調(diào)用 Bridge 的 Action 或組件
- ? WeiboJS.on() 用途：監(jiān)聽 Bridge 的事件
下面，一一進(jìn)行說明：
WeiboJS.init()
通過 `window.WeiboJS` 的 `init` 方法進(jìn)行初始化。
- 參數(shù)列表：
- `appkey`： 必填，輕應(yīng)用的 appkey
- `debug`： 可選，調(diào)試開關(guān)
- `timestamp`： 必填，簽名使用的時(shí)間戳
- `noncestr`： 必填，簽名使用的隨機(jī)字符串
- `signature`： 必填，計(jì)算出的簽名，簽名方法見文檔末尾
- `scope`： 必填，輕應(yīng)用需要調(diào)用的 API 列表，是一個(gè)字符串?dāng)?shù)組
- `callback`： 必填，初始化成功或失敗后的回調(diào)函數(shù)，WeiboJS.invoke() 或者 WeiboJS.on() 都需要等這里回調(diào)成功后，才執(zhí)行
例如：
WeiboJS.invoke()
通過 `window.WeiboJS` 的 `invoke` 方法來調(diào)用 bridge 的 action。
例如：
第一個(gè)參數(shù)為要調(diào)用的 action，第二個(gè)為 參數(shù)列表，第三個(gè)為回調(diào)函數(shù)。
Action 列表
getNetworkType 獲取網(wǎng)絡(luò)狀態(tài)
- 參數(shù)列表：無
- 返回值：`{"network_type": "wwan"}`，`wwan` 代表 2G 或 3G， `wifi` 代表 WIFI, `fail` 代表無網(wǎng)絡(luò)
getBrowserInfo 獲取瀏覽器基本信息
- 參數(shù)列表：無
- 返回值：`{"clientVersion": "5.3.0", "isWeiboClient": true, "browserType": "normal"}` 其中 `clientVersion` 代表客戶端版本號(hào)， `isWeiboClient` 代表當(dāng)前是不是微博客戶端, `browserType` 代表瀏覽器類型：normal=普通瀏覽器，topnav=無底導(dǎo)瀏覽器，infopage=對(duì)象正文頁瀏覽器
checkAvailability 檢查 API 可用性
- 參數(shù)列表：api_list 字符串?dāng)?shù)組，表示需要檢查的 api 列表，例如：["getNetworkType", "setBrowserTitle"]
- 返回值：`{"getNetworkType": true, "setBrowserTitle": true}` 其中 true 表示有權(quán)限調(diào)用， false 表示無權(quán)限調(diào)用
setBrowserTitle 設(shè)置頂導(dǎo)標(biāo)題
- 參數(shù)列表：
- `title`: 新標(biāo)題，必需
- 返回值：無
- 備注：通過此方法設(shè)置的標(biāo)題優(yōu)先級(jí)最高
- 錯(cuò)誤碼：
- `MISSING_PARAMS`: 未傳遞 `title` 參數(shù)
openMenu 打開瀏覽器右上角菜單
- 參數(shù)列表：無
- 返回值：`{"selected_code": 1001, "selected_title": 分享到微博}` 其中 selected_code 表示用戶選擇的按鈕所對(duì)應(yīng)的編碼，未知按鈕為 0，通用按鈕見附錄2， selected_title 表示用戶選擇的菜單的文案
setMenuItems 設(shè)置瀏覽器右上角菜單【分享，加關(guān)注】
- menus：["shareToWeibo","follow"]，菜單的名字，最多 5 項(xiàng)
- content：默認(rèn)文案
- 返回值：無
- 備注： follow關(guān)注的是appkey的所有者
例如 ：
if (success) {
document.write('網(wǎng)絡(luò)狀態(tài)是' + params.network_type);
} else {
if (code == WeiboJS.STATUS_CODE.NO_RESULT) {
// do something.
}
}
});
setSharingContent 設(shè)置分享內(nèi)容
- 參數(shù)列表：{"icon": "", "title": "", "desc": ""} 其中 icon 表示圖片的 URL，title 表示標(biāo)題，desc 表示文案
- 返回值：無
- 備注：此處設(shè)置的是分享到第三方平臺(tái)的默認(rèn)文案
openImage 查看大圖
- 參數(shù)列表：
- `url`: 當(dāng)前選中的圖片src；
- `urls`: 當(dāng)前頁面中的所有圖片src，用于支持橫滑查看
- 返回值：無
- 錯(cuò)誤碼：
- `MISSING_PARAMS`: `url` 與 `urls` 至少需要傳遞一個(gè)
scanQRCode 掃描二維碼
- 參數(shù)列表：無
- 返回值：`{"result": "http://weibo.com"}`
- 錯(cuò)誤碼：
- `USER_CANCELLED`: 用戶取消了掃描
- `SERVICE_FORBIDDEN`: 設(shè)備沒有攝像頭或用戶不允許使用攝像頭
pickImage 獲取照片
- 參數(shù)列表：
- `source`: `camera` 為拍照，其他為從相冊(cè)選擇
- 返回值：`{"base64": "9sa1..."}`
- 錯(cuò)誤碼：
- `USER_CANCELLED`: 用戶取消了選圖
- `SERVICE_FORBIDDEN`: 設(shè)備沒有攝像頭或用戶不允許選圖
pickContact 選擇聯(lián)系人
- 參數(shù)列表：
- `count`: 1，表示最多選擇的人數(shù)
- 返回值：`[{"uid": "1406758883", "screen_name": "Bencalie", "avatar_url" : "
"}]`
- 錯(cuò)誤碼：
- `USER_CANCELLED`: 用戶取消了選擇
- `SERVICE_FORBIDDEN`: 服務(wù)不可用
getLocation 定位
- 參數(shù)列表：無
- 返回值：`{"lat": 100, "long": 100}`
- 錯(cuò)誤碼：
- `SERVICE_FORBIDDEN`: 定位服務(wù)不可用
- `NO_RESULT`: 獲取位置失敗
login 喚起登錄功能
- 參數(shù)列表：
- `redirect_uri`: 登錄后回調(diào)的地址，必需。并且該 URL 必須是 http://apps.weibo.com 開頭，不接受任何其他域名的 URL
- 返回值：無
"redirect_uri" : encodeURIComponent("http://apps.weibo.com/test/1406758883/2I8KtA/demo/game/yangtuo")
}, function (params, success, code) {});
menuItemAvailable獲取可用菜單項(xiàng)
客戶端支持版本：5.4.5
invokeMenuItem觸發(fā)菜單項(xiàng)
客戶端支持版本：5.4.5
audioMetersChange麥克風(fēng)音量變化
客戶端支持版本：5.4.5
cashier微博支付
參數(shù)列表：
sign_type : 簽名類型，目前只支持RSA
sign : 簽名類型
appkey: 商戶的Appkey，區(qū)分商戶不同的業(yè)務(wù)
seller_id: 商戶微博id
out_pay_id: 商戶訂單號(hào)，商戶網(wǎng)站唯一編號(hào)，6-64位
notify_url: 異步通知地址
return_url: 支付完成后的回調(diào)頁面地址
subject: 商品名稱
total_amount: 商品總價(jià)，單位為分
body: 商品描述
返回值：無
調(diào)用示例：
Status Code 列表
狀態(tài)碼會(huì)在 action 的回調(diào)中提供
網(wǎng)頁通過比對(duì)回調(diào)的code值和以上值進(jìn)行處理
// 客戶端沒有獲取到結(jié)果
}
WeiboJS.on()
有時(shí) native 會(huì)給網(wǎng)頁發(fā)送一些事件通知，網(wǎng)頁可以選擇性接收。
document.write('網(wǎng)絡(luò)狀態(tài)已變?yōu)椋?#39; + params.network_type);
});
Event 列表
networkTypeChanged 網(wǎng)絡(luò)狀態(tài)改變
- 返回結(jié)果：
- `network_type`: 改變后的狀態(tài)，`wwan` 或 `wifi` 或 `fail`
menuItemSelected 選擇某個(gè)瀏覽器菜單項(xiàng)
- 返回結(jié)果：
- `selected_code`: 用戶選擇的按鈕所對(duì)應(yīng)的編碼，未知按鈕為 0，通用按鈕見附錄2
- `selected_title: 用戶選擇的按鈕標(biāo)題
orientationChange屏幕旋轉(zhuǎn)事件
- 使用條件：無
- 返回結(jié)果：
- `orientation`: 屏幕方向的狀態(tài)，即 window.orientation 的取值
共享地址簿組件【需申請(qǐng)白名單】
共享地址簿組件用于接入方獲得當(dāng)前微博用戶在微博的收貨地址。目前處于內(nèi)部體驗(yàn)階段，不向所有接入方開放。
組件有兩種形態(tài)：
PC 版：
H5 版：
第一步、使用共享地址簿組件，需要申請(qǐng)，請(qǐng)將 appkey 發(fā)送給 wanglei25@staff.weibo.com 申請(qǐng)?jiān)摻M件的使用權(quán)限。
第二步、代碼開發(fā)。共享地址簿組件提供了兩個(gè) Action 供調(diào)用：
PC 版調(diào)用方法：（也可以點(diǎn)擊這里）
1、獲取默認(rèn)收貨地址
App.trigger('deliverAddress:default', function(addr){ /* 回調(diào)函數(shù) */ });
2、選擇其他的收貨地址（可以增加、刪除、修改地址）
App.trigger('deliverAddress:change', function(addr){ /* 回調(diào)函數(shù) */ });
完整 Web 版調(diào)用范例：
H5 版調(diào)用方法：
1、獲取默認(rèn)收貨地址
WeiboJS.invoke("deliverAddress:default", {}, function(addr){ /* 回調(diào)函數(shù) */ });
2、選擇其他的收貨地址（可以增加、刪除、修改地址）
WeiboJS.invoke("deliverAddress:change", {}, function(addr){ /* 回調(diào)函數(shù) */ });
完整 H5 版調(diào)用范例：
輕應(yīng)用 H5 底導(dǎo)【需申請(qǐng)白名單】
輕應(yīng)用在微博客戶端內(nèi)現(xiàn)在都是在對(duì)象正文頁的內(nèi)置瀏覽器展示（底部有轉(zhuǎn)評(píng)贊按鈕），它是有一定缺陷的，如：
- 不支持內(nèi)頁分享。比如你的應(yīng)用內(nèi)有一個(gè)對(duì)象，點(diǎn)擊對(duì)象內(nèi)的鏈接，iframe 內(nèi)部跳轉(zhuǎn)到一個(gè)非對(duì)象的 URL，這時(shí)候你點(diǎn)轉(zhuǎn)發(fā)，仍然分享的是剛開始進(jìn)來的對(duì)象的信息。
- 不支持定制分享文案。點(diǎn)轉(zhuǎn)發(fā)喚起的發(fā)布器，文案是固定的，你無法修改。
- 可定制性差
目前，輕應(yīng)用提供了一款 H5 底導(dǎo)組件，該組件用 HTML+JavaScript 實(shí)現(xiàn)，和現(xiàn)在的對(duì)象正文頁底導(dǎo) UI 幾乎雷同，但能夠支持內(nèi)頁分享，并且文案可以隨心所欲的定制。目前處于內(nèi)部體驗(yàn)階段，不向所有接入方開放。
接入方式：
第一步、使用輕應(yīng)用 H5 底導(dǎo)，需要申請(qǐng)，請(qǐng)將 appkey 發(fā)送給 wanglei25@staff.weibo.com 申請(qǐng)?jiān)摻M件的使用權(quán)限。
第二步、在需要支持內(nèi)頁分享的頁面內(nèi)，引入輕應(yīng)用組件移動(dòng)版的 JS。
這時(shí)候，你就能直接看到組件了。
第三步、修改默認(rèn)分享文案。
完整范例：
輕應(yīng)用微博運(yùn)動(dòng)數(shù)據(jù)獲取【需要申請(qǐng)白名單】
完整調(diào)用范例：
輕應(yīng)用打賞組件
完整調(diào)用范例：
輕應(yīng)用 H5 組件Demo
請(qǐng)使用微博客戶端掃描下方二維碼查看演示Demo：
Demo中涉及到的接口詳情詳見以下文檔：
微博支付應(yīng)用接入指南：http://open.weibo.com/wiki/微博支付應(yīng)用接入指南
微博API接口文檔：http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI
附錄1、簽名方法
注意：為保證 appsecret 與 ticket 安全性，以下步驟需要在服務(wù)器端完成
調(diào)用開放平臺(tái)接口，傳入 appkey 與 appsecret 生成 ticket：
POST https://api.weibo.com/oauth2/js_ticket/generate?client_id=APPKEY&client_secret=APPSECRET
返回值：
{
"result":true,
"appkey":"",
"js_ticket":"", // 獲取到的 ticket
"expire_time":7199 // ticket 的有效時(shí)間（秒）
}注意：
有效期內(nèi)再次調(diào)用該接口會(huì)導(dǎo)致 ticket 刷新，舊的直接失效。 所以第三方應(yīng)該在服務(wù)器緩存 ticket，將要過期時(shí)才再次請(qǐng)求改接口
生成簽名字符串：
簽名字符串 = "jsapi_ticket=[TICKET]&noncestr=[NONCESTR]×tamp=[TIMESTAMP]&url=[URL]"
注：URL參數(shù)請(qǐng)根據(jù)當(dāng)前webview加載的實(shí)際地址實(shí)時(shí)更新
其中：
[TICKET]: 上一步獲取的 ticket [NONCESTR]: 隨機(jī)字符串，需要和 config 時(shí)的值一致 [TIMESTAMP]: 當(dāng)前UNIX時(shí)間戳，需要和 config 時(shí)的值一致 [URL]: 當(dāng)前頁面的完整 URL (不進(jìn)行 url encode，不包含 # 及 fragment)
使用 sha1 算法生成簽名
簽名 = sha1(簽名字符串)
附錄2、菜單編碼
微博：1001
好友圈：1002
私信 ：1003
微信好友：1004
朋友圈：1005
微米好友：1006
微米圈：1007
來往好友：1008
來往動(dòng)態(tài)：1009
QQ：1010
Qzone：1011
短信：1101
郵件：1102
系統(tǒng)瀏覽器：2001
復(fù)制鏈接：2002
字號(hào)設(shè)置：2003