微信JSBridge常用功能开发指南：图片预览、分享与界面控制

微信JSBridge常用功能开发指南：图片预览、分享与界面控制

1.实现网页图片集左右滑动查看功能，示例如下：

JavaScript效果

var pictures = [];
angular.forEach(pitctures,function(k,i){
pictures[i] = k.imgPath;
 });
$scope.previewPics = function(currentUrl){
if (typeof window.WeixinJSBridge != 'undefined') {
//调用微信图片预览功能
WeixinJSBridge.invoke('imagePreview', {
'current':currentUrl, //指定当前查看的图片地址
'urls':pictures //指定图片组列表
            });
} else {
alert( "请在微信中查看", null, function () {});
        }
    }

页面HTML元素结构：

<div class="infoPics">
<div class="picImg" ng-repeat="picture in info.infoContent.pitctures">
<img ng-src="{{picture.imgPath}}" ng-click="previewPics(picture.imgPath)">
</div>
</div>

微信窗口关闭事件处理

2.处理微信窗口关闭事件，实例如下：

WeixinJSBridge.invoke('closeWindow',{},function(res){
//alert(res.err_msg);
 });

网页链接分享功能实现

3.实现网页链接分享至朋友、朋友圈及微博的功能

var lineLink = 'http://../..',
imgUrl = 'http://../..',
shareTitle = '页面标题',
descContent='内容简介',
appid = '';
//检测是否支持微信JS接口
if(typeof WeixinJsBridge == 'undefined'){
if(document.addEventListener){
document.addEventListener('WeixinJsBridgeReady',onBridgeReady,false);
}else if(document.attachEvent){
document.attachEvent('WeixinJsBridgeReady',onBridgeReady);
document.attachEvent('onWeixinJsBridgeReady',onBridgeReady);
　　}
}else{
onBridgeReady();
 }
function onBridgeReady (){
WeixinJsBridgeReady.on('menu:share:appmessage',wx_shareFriend);//绑定分享给朋友事件
WeixinJsBridgeReady.on('menu:share:timeline',wx_shareTimeline);//绑定分享到朋友圈事件
WeixinJsBridgeReady.on('menu:share:weibo',wx_shareWeibo);//绑定分享到微博事件
}
function wx_shareFriend (){
WeixinJsBridge.invoke('sendAppMessage',{
"appid":appid,
"img_url":imgurl,
"img_width":'640',
"img_height":'500',
"link":lineLink,
"desc":descContent,
"title":shareTitle
},function(res){
console.log(res.err_msg);
　　　　}
　　});
}
function wx_shareTimeline (){
WeixinJsBridge.invoke('sendTimeline',{
"appid":appid,
"img_url":imgurl,
"img_width":'640',
"img_height":'500',
"link":lineLink,
"desc":descContent,
"title":shareTitle
},function(res){
console.log(res.err_msg);
　　　　}
　　})
}　　
function wx_shareWeibo (){
WeixinJsBridge.invoke('sendWeibo',{
"appid":appid,
"img_url":imgurl,
"img_width":'640',
"img_height":'500',
"link":lineLink,
"desc":descContent,
"title":shareTitle
},function(res){
console.log(res.err_msg);
　　　　}
　　})
}

网页界面元素控制与网络状态获取

4.隐藏网页右上角菜单按钮

WeixinJsBridge.call('hideOptionMenu');

5.隐藏网页底部导航栏

WeixinJsBridge.call('hideToolbar');

6.获取当前设备网络连接类型：

WeixinJsBridge.invoke('getNetworkType',{},function(e){
console.log(e.err_msg);
　})

7.禁止用户执行分享操作

WeixinJsBridge.invoke('disabledShare',{},function(e){
　　})

8.判断当前页面是否在微信内置浏览器中打开

// 返回 true 或 false
var flag = WeixinApi.openInWeixin();

以上8条即为本文分享的全部内容，希望对微信开发有所帮助。