微信WeixinJSBridge的接口使用

以下都要包含weixinApi.js（見底部git里的js文件）

1）、分享

WeixinApi.ready(function(Api) {

    // 微信分享的數據
    var wxData = {
        "appId": "", // 服務號可以填寫appId
        "imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
        "link" : 'http://www.baidufe.com',
        "desc" : '大家好，我是Alien，Web前端&Android客戶端碼農，喜歡技術上的瞎倒騰！歡迎多交流',
        "title" : "大家好，我是趙先烈"
    };

    // 分享的回調
    var wxCallbacks = {
        // 分享操作開始之前
        ready : function() {
            // 你可以在這里對分享的數據進行重組
            alert("准備分享");
        },
        // 分享被用戶自動取消
        cancel : function(resp) {
            // 你可以在你的頁面上給用戶一個小Tip，為什么要取消呢？
            alert("分享被取消");
        },
        // 分享失敗了
        fail : function(resp) {
            // 分享失敗了，是不是可以告訴用戶：不要緊，可能是網絡問題，一會兒再試試？
            alert("分享失敗");
        },
        // 分享成功
        confirm : function(resp) {
            // 分享成功了，我們是不是可以做一些分享統計呢？
            //window.location.href='http://192.168.1.128:8080/wwyj/test.html';
            alert("分享成功");
        },
        // 整個分享過程結束
        all : function(resp) {
            // 如果你做的是一個鼓勵用戶進行分享的產品，在這里是不是可以給用戶一些反饋了？
            alert("分享結束");
        }
    };

    // 用戶點開右上角popup菜單后，點擊分享給好友，會執行下面這個代碼
    Api.shareToFriend(wxData, wxCallbacks);

    // 點擊分享到朋友圈，會執行下面這個代碼
    Api.shareToTimeline(wxData, wxCallbacks);

    // 點擊分享到騰訊微博，會執行下面這個代碼
    Api.shareToWeibo(wxData, wxCallbacks);
});

 

2）、隱藏右上角option menu入口

WeixinApi.ready(function(Api) {
    // 隱藏
    Api.hideOptionMenu();

    // 顯示
    // Api.showOptionMenu();
});

 

3）、隱藏底部工具欄

WeixinApi.ready(function(Api) {
    // 隱藏
    Api.hideToolbar();

    // 顯示
    // Api.showToolbar();
});

 

4）、獲取當前的網絡類型

WeixinApi.ready(function(Api) {
    Api.getNetworkType(function(network){
        /**
         * network取值：
         *
         * network_type:wifi     wifi網絡
         * network_type:edge     非wifi,包含3G/2G
         * network_type:fail     網絡斷開連接
         * network_type:wwan     2g或者3g
         */
    });
});

 

5）、調起客戶端圖片播放組件

WeixinApi.ready(function(Api) {
    // 需要播放的圖片src list
    var srcList = [src1, src2, ..., srcN];
    // 選一個作為當前需要展示的圖片src
    var curSrc = src1;
    // 調起
    Api.imagePreview(curSrc, srcList);
});

 

調起客戶端圖片播放組件，還有一種更屌的方法，不需要依賴這個WeixinApi，直接a標簽實現就行，具體格式：

<a href="weixin://viewimage/`YourImageURL`">AnyThing</a>

 

我們可以用A標簽來嵌套這個img，具體Demo如下：

<a href="weixin://viewimage/http://www.baidu.com/img/bdlogo.gif">
    <img src="http://www.baidu.com/img/bdlogo.gif">
</a>
<a href="weixin://viewimage/http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
    <img src="http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
</a>

 

6）、關掉當前微信公眾頁面窗口

WeixinApi.ready(function(Api) { 
    // 關閉窗口
    Api.closeWindow();
});

 

以上都經過我的測試，完全可以使用哦。

Git：https://github.com/lx65978930

 

檢測微信WeixinJsBridge其他接口

  /**
       * 檢測微信JsAPI
       * @param callback
       */
      function detectWeixinApi(callback){
          if(typeof window.WeixinJSBridge == 'undefined' || typeof window.WeixinJSBridge.invoke == 'undefined'){
              setTimeout(function(){
                  detectWeixinApi(callback);
              },200);
          }else{
              callback();
          }
      }

      detectWeixinApi(function(){
          var html = [];
          for(var key in window.WeixinJSBridge) {
              var js = 'WeixinJSBridge.' + key + ' = ' + window.WeixinJSBridge[key].toString();
              js = js_beautify(js); // 美化一下，看着舒服些
              html.push('<pre class="brush:js;toolbar:false;">' + js + '</pre>')
          }

          document.getElementById('WeixinJsApi').innerHTML = html.join('');

          // 代碼高亮
          SyntaxHighlighter.highlight();
      });