• 微信内置浏览器私有接口WeixinJSBridge介绍(转)


    这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友、分享函数、隐藏工具栏、隐藏三个点按钮等功能,需要的朋友可以参考下

    微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了。

    注意:(WeixinJSBridge只能在微信内打开的网页有效)

    按钮一之------发送给好友

     代码如下:

    function sendMessage(){

    WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("发送给好友"); });

    }

    这样,只要在某处调用 sendMessage 函数就可以改变发送好友的按钮响应了,再点击,便会弹出“发送给好友字符串”,是不是很简单。

    分享函数

    复制代码 代码如下:

    WeixinJSBridge.invoke('sendAppMessage',{
    "appid":"", //appid 设置空就好了。
    "img_url": imgUrl, //分享时所带的图片路径
    "img_width": "120", //图片宽度
    "img_height": "120", //图片高度
    "link":url, //分享附带链接地址
    "desc":"我是一个介绍", //分享内容介绍
    "title":"标题,再简单不过了。"
    }, function(res){/*** 回调函数,最好设置为空 ***/});

    注意,如果将这个微信私有函数单独拿出来调用,道理上是讲的通,但是!第一次打开页面直接调用它的话,无论如何是没有任何反映的,必须要手动,点一下右上角分享给好友按钮,待弹出一次通讯录之后,返回来在直接使用,就没有任何问题,似乎内部初始化什么东西一样。所以建议直接嵌入到上面那个 绑定方法中。

    如下:

     代码如下:

    function sendMessage(){
    WeixinJSBridge.on('menu:share:appmessage', function(argv){

    WeixinJSBridge.invoke('sendAppMessage',{

    "appid":"", //appid 设置空就好了。
    "img_url": imgUrl, //分享时所带的图片路径
    "img_width": "120", //图片宽度
    "img_height": "120", //图片高度
    "link":url, //分享附带链接地址
    "desc":"我是一个介绍", //分享内容介绍
    "title":"标题,再简单不过了。"
    }, function(res){/*** 回调函数,最好设置为空 ***/

    });

    });
    }


    这样,你在点击发送给好友按钮,就可以直接弹出通讯录选择 ‘单个' 好友进行分享。

    同理,分享到朋友圈也是调用 invoke 私有函数,只是按钮绑定名称不同而已。

     代码如下:

    function sendMessage(){



    ......//此处省略发送给好友代码



    WeixinJSBridge.on('menu:share:timeline', function(argv){

    WeixinJSBridge.invoke('shareTimeline',{

    "appid":"", //appid 设置空就好了。
    "img_url": imgUrl, //分享时所带的图片路径
    "img_width": "120", //图片宽度
    "img_height": "120", //图片高度
    "link":url, //分享附带链接地址
    "desc":"我是一个介绍", //分享内容介绍
    "title":"标题,再简单不过了。"
    }, function(res){/*** 回调函数,最好设置为空 ***/});

    }); 

    });

    }

    注意,on绑定的是 “menu:share:timeline” 不是 "menu:share:appmessage"。invoke里面也是。

    还一个微博分享,我没试过,不知道有没有用,想玩的试试,一切分享都是调用当前微信帐号分享。

     代码如下:

    WeixinJSBridge.on('menu:share:weibo', function(argv){
    WeixinJSBridge.invoke('shareWeibo',{
    "content":dataForWeixin.title+' '+dataForWeixin.url,
    "url":dataForWeixin.url
    }, function(res){});
    });


    如果微信浏览器内部尚未初始化,所有的接口都会是undefined。为了避免进去马上就调用出错,获取微信初始化完成响应事件,初始化完成调用sendMessage进行绑定。

    如下:

    代码如下:

    if(document.addEventListener){
    document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }

    下面还有几个小功能:
     代码如下:

    WeixinJSBridge.call('hideToolbar'); //隐藏右下面工具栏

    WeixinJSBridge.call('showToolbar'); //显示右下面工具栏

    WeixinJSBridge.call('hideOptionMenu'); //隐藏右上角三个点按钮。

    WeixinJSBridge.call('showOptionMenu'); //显示右上角三个点按钮。


    我是一个菜鸟,写完了,写的不好,请大家多多包含!


    完整测试代码(用微信打开):

     代码如下:

    <!docType html>
    <html>
    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title>微信接口测试</title>

    <script>
    function sendMessage(){
    WeixinJSBridge.on('menu:share:appmessage', function(argv){
    WeixinJSBridge.invoke('sendAppMessage',{

    "appid":"", //appid 设置空就好了。
    "img_url":"", //分享时所带的图片路径
    "img_width":"120", //图片宽度
    "img_height":"120", //图片高度
    "link":"http://www.3lian.net", //分享附带链接地址
    "desc":"极客标签--http://www.jb51.net", //分享内容介绍
    "title":"发现 极客标签 - 做最棒的极客知识分享平台"
    }, function(res){/*** 回调函数,最好设置为空 ***/

    });
    });

    WeixinJSBridge.on('menu:share:timeline', function(argv){

    WeixinJSBridge.invoke('shareTimeline',{

    "appid":"", //appid 设置空就好了。
    "img_url":"", //分享时所带的图片路径
    "img_width":"120", //图片宽度
    "img_height":"120", //图片高度
    "link":"http://www.3lian.net", //分享附带链接地址
    "desc":"极客标签--http://www.jb51.net", //分享内容介绍
    "title":"发现 极客标签 - 做最棒的极客知识分享平台"
    }, function(res){/*** 回调函数,最好设置为空 ***/
    });

    });


    alert("调用成功!现在可以通过右上角按钮分享给朋友或者朋友圈!");

    }

    function hideMenu(){
    WeixinJSBridge.call('hideOptionMenu');
    }

    function showMenu(){
    WeixinJSBridge.call('showOptionMenu'); 
    }

    function hideTool(){
    WeixinJSBridge.call('hideToolbar');
    }

    function showTool(){
    WeixinJSBridge.call('showToolbar');
    }

    if(document.addEventListener){
    document.addEventListener('WeixinJSBridgeReady', sendMessage, false); 
    }else if(document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady' , sendMessage); 
    document.attachEvent('onWeixinJSBridgeReady' , sendMessage); 
    }

    //判断网页是否在微信中被调用
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
    } else {
    alert("调用失败,请用微信扫一扫,扫描下面二维码打开网页!");
    }

    </script>

    </head>

    <body>
    <center>
    <h2>分享请点击右上角</h2>
    <button onclick="hideMenu()" style="100px;height:100px;font-size:16px;">隐藏右上角三个点</button> <br /><br />
    <button onclick="showMenu()" style="100px;height:100px;font-size:16px;">显示右上角三个点</button> <br /><br />
    <button onclick="hideTool()" style="100px;height:100px;font-size:16px;">隐藏下面导条</button> <br /><br />
    <button onclick="showTool()" style="100px;height:100px;font-size:16px;">显示下面导条</button> <br /><br />
    </center>
    </body>

    </html>

  • 相关阅读:
    工厂模式 ioc dom4j 反射之我的一点理解
    hibernate中注解方式中的控制反转
    java中的数据存储(堆,栈) 很重要
    hibernate中映射关系总结
    三极管使用方法
    OC OD介绍
    HP Jack介绍
    Jlink接口的Jtag和SWD接口定义
    什么是域什么是工作组
    Ubuntu安装.run文件
  • 原文地址:https://www.cnblogs.com/lichuntian/p/5128033.html
Copyright © 2020-2023  润新知