微信内置浏览器私有接口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.jb51.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.jb51.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="width:100px;height:100px;font-size:16px;">隐藏右上角三个点</button> <br /><br />
<button onclick="showMenu（）" style="width:100px;height:100px;font-size:16px;">显示右上角三个点</button> <br /><br />
<button onclick="hideTool（）" style="width:100px;height:100px;font-size:16px;">隐藏下面导条</button> <br /><br />
<button onclick="showTool（）" style="width:100px;height:100px;font-size:16px;">显示下面导条</button>    <br /><br />
</center>
</body>
</html>