原文地址：http://www.3lian.com/edu/2015/05-25/216227.html

这篇文章主要介绍了微信内置浏览器私有接口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="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>

微信内置浏览器私有接口WeixinJSBridge介绍的更多相关文章

  1. 微信内置浏览器私有接口WeixinJSBridge介绍（转）

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

  2. 微信内置浏览器私有接口WinXinJsBridge介绍

    关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一 ...

  3. 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

    微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...

  4. 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏

    微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface) ...

  5. 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

    原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...

  6. 【微网站开发】之微信内置浏览器API使用

    最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般 ...

  7. 微信内置浏览器的JS API

    /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...

  8. 微信内置浏览器WebApp开发，踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub

    最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...

  9. ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别

    最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...

随机推荐

  1. 会调色了不起吗？ SORRY，会调色真的了不起！

    其实,现实的世界,大部分都是非常普通和常见的.所以调色师才有他们发挥的空间.如何把镜头中的世界变成梦幻一般. 把画面的颜色统一之后,逼格马上提升了很多! 发现表情不对,从其他照片把表情P回来,哈哈 这 ...

  2. Python编程笔记（第二篇）二进制、字符编码、数据类型

    一.二进制 bin() 在python中可以用bin()内置函数获取一个十进制的数的二进制 计算机容量单位 8bit = 1 bytes 字节,最小的存储单位,1bytes缩写为1B 1KB = 10 ...

  3. python线程池

    https://blog.csdn.net/qq_33961117/article/details/82587873#!/usr/bin/python # -*- coding: utf- -*- f ...

  4. zookeeper相关

    1.zookeeper应用:集群节点间的数据同步(资源管理),分布式锁(主要是利用客户端在一个会话中在zookeeper中创建一个znode节点,然后再去执行自己的业务代码,比如去更新数据库,其他客户 ...

  5. Windows 8风格应用-触控输入

    参考:演练:创建您的第一个触控应用程序 http://msdn.microsoft.com/zh-cn/library/ee649090(v=vs.110).aspx win8支持多点触摸技术,而我们 ...

  6. 软件工程网络15个人作业4--Alpha阶段个人总结

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  7. ARM cortexM4中断优先级的一点理解。

    根据手册PM0214 40页.213页.200.195.interrupt priority grouping. 根据手册EM0090 第371页. stm32f42xxx除掉fpu部分,有91个可屏 ...

  8. 52.tableViewCell重用机制避免重复显示问题

    表刷新超出页面显示的内容会重复出现 -(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSInd ...

  9. Python图表绘制：matplotlib绘图库入门（转）

    matplotlib 是Python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 它的文档相当完备,并 ...

  10. Spring Boot项目Maven Build报错的解决方法

    问题1, [ERROR]Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.21.0:test (defau ...