微信js運行環境源碼分析

源碼還有註釋放到github上了https://github.com/a951055/weixin-js-bridge-code

 備註:非惡意拆解,僅用來檢查微信真實支持接口

微信真實可用接口(能在 jsbridge 中,找到的)

 // 以下是微信jsBridge 對外拋出的接口
        shareTimeline: "onMenuShareTimeline",
        sendAppMessage: "onMenuShareAppMessage",
        shareQQ: "onMenuShareQQ",
        shareWeiboApp: "onMenuShareWeibo",
        shareQZone: "onMenuShareQZone", // 以上部分可能是調用 分享的 方法, 貌似可以動過 JsBrige 直接調用? 還沒測試櫃規則是否允許
        "menu:share:timeline": "onMenuShareTimeline", // 分享到朋友圈回調
        "menu:share:appmessage": "onMenuShareAppMessage", // 分享到好友回調
        "menu:share:qq": "onMenuShareQQ", // 分享到qq回調
        "menu:share:weiboApp": "onMenuShareWeibo", // 分享到 微博回調
        "menu:share:QZone": "onMenuShareQZone", // 分享到 qq空間回調
        preVerifyJSAPI: "config", // 預先驗證配置?
        imagePreview: "previewImage", // 預覽圖片
        geoLocation: "getLocation", // 獲取 地址
        openProductViewWithPid: "openProductSpecificView", // 跳轉微信商品頁
        batchAddCard: "addCard", // 添加卡券到微信卡包
        batchViewCard: "openCard", // 打開卡券
        getBrandWCPayRequest: "chooseWXPay", // 調用微信支付
        showPickerView: "showPickerView", //  選擇視圖  一般是底部選項菜單? android 和ios 應該不一樣吧,但是應該調用的是微信的.
        showDatePickerView: "showDatePickerView" // 打開時間選擇器

 

tips

1. jsBridge 源碼是從微信開發者工具粘出來的.
2. 微信通過 e.preventDefault(), e.stopPropagation(); 阻斷 瀏覽器的 拖拽,拖放操作, 這個理論上能解決左右劃切出網頁問題,沒有具體測試。 參考 wx.js line:410
3. jsBridge 根據不同環境,有不同程度的 window 方法覆蓋,參考 wx.js line: 125
4. 微信阻斷了網頁間通信邏輯,通過 window.addEventListener("message")實現,理論上可以通過移除或者重寫這個事件,來解決這個問題.
5. 微信 js 對象真實支持情況參考 wx.js func:237
6. 裏面有兩個 socket 20 和 49,猜測是根據開發者工具和 微信內,各自用各自的.
7. 猜測小程序的發佈流程 跟 vue 打包類似,只不過 App 這個對象是微信對 window 的封裝，因爲很可能小程序也是用 chrome 的核然後,外面套了個 jsBridge 的皮,放出來的.
8. 微信的 js api 現在應該是支持了 Promise 的 ,可以 asnyc(await) 了。但是文檔裏面好像沒有說.

微信 jsBridge 運作流程分析

1. 到網頁加載完成後,加載 jsBridge 的代碼,如果沒加載完,就放在 對應的 ready事件裏調用.
2. 判斷不同環境,然後覆蓋 window 對象,暴露出微信允許的變量.
3. 源碼裏面有幾個 創建 class 的方法,猜測這幾個就是 api 的操作類
4. 在 微信處理好 window 對象後,會去 創建 webSocket, 目測是連接到本地的 9974 端口(微信監聽端口).
5. socket 創建後,會先掃一下 queue 看看有沒有在 socket 建立前發起的 api 請求,有的話發送給微信
6. 剩下的就是監聽 socket 請求,然後發送了。他們發送的 socket 報文應該有個格式,具體是什麼沒看出來。裏面有些拆分字符串的邏輯,搜 match() 可以搜到

jsBridge 大致方法描述 wx.js

代碼閱讀邏輯可以不用考慮 69 行以前的代碼,這部分是拋出對象方法用的 下方的方法閱讀 按照方法名(就方法名的數字(源碼是什麼,不知道,具體功能是根據代碼操作猜出來的))

20: 這個方法應該是打開跟微信 通信的 socket 用的 (猜測微信開發者工具使用)
233: 這個方法 使用來 獲取 userAgent 標識, 以及判斷不同環境下,要封禁的 window 的一些屬性用的, 注意,小程序有單獨的處理邏輯的
234: 監聽 window消息推送,但是對於位置選擇器會有一個特殊的處理邏輯,但是其他情況下不允許界面通信
235: 用來覆蓋window對象,就api中微信允許使用的對象,這裏是直接給window對象改了,像alert彈窗這些方法,也在這裏面被覆蓋了
236: 這個方法 是用來過濾window對象允許操作的規則的. 大概屬於 235的 子方法
237：這個方法是用來定義window 規則的. 跟236類似,在js裏面調用的對象,實際支持情況就在這裏面
238: 阻斷拖拽,拖放事件
239: 阻斷 ctrl 鍵 + 鼠標滾輪縮放網頁用的
240: 阻斷網頁右鍵菜單,因爲微信用的 chrome的核,
241: 清理 window touch相關事件,然後將 WeixinJSBridge 掛到window對象上拋出 * 注意:這個應該是一個入口方法,因爲後面的邏輯好像都從這裏出去的
242: 242 是封裝了一個 jsBridge 的對象殼,打印出來的就是這個
243: jsBridge invike 操作相關
244: 獲取 sdk 支持接口列表 ? 猜測
245: 開放api列表 和 不能顯示的api配置?
246: 應該是debug方法的註冊完成回調, 猜測 65是 dubug的邏輯
247: 這裏看起來是處理插件相關的邏輯
248: 跟socket有關,看下面代碼 應該是創建一個跟 微信通信的操作類
249: 插件相關,通過 wechat ide 對插件進行操作
49: 這裏也是個跟 socket 相關的,可能微信調試環境用的這個?
65: 可能是發送debug 相關的 內容吧 ? 猜的

// 20 應該是 微信開發者工具用的, 49 那個是 微信用的

jweixin js-sdk

源碼大概拆了下,只有兩個邏輯 判斷 WeixinJSBridge 對象是否存在 和 調用 invike 和 on 方法 官網的 api 跟 sdk 的差不多,但是跟 JsBridge 支持的 差了些內容。具體開發 以 JsBridge 爲準就好了.