微信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();
      });

 

转载于:https://www.cnblogs.com/guangxiaoluo/p/3890103.html