最近在做微信的项目,遇到需要转发到朋友圈功能,有需要的朋友可以参考
首先看页面源代码:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>发送红包</title>
<link href="css/style.css?time=1.5" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ibs/page/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/ibs/page/js/myibs.js"></script>
<script type="text/javascript" src="/ibs/page/hongbao/js/hb_sharetofriend.js"></script>
<script type="text/javascript" src="js/WeixinApi.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#tips").click(function () {
$('#tips').hide();
}) });
$(function(){
$(".grzx_fhb_button").click(function () {
$('#tips').show();
})
});
});
</script>
<body style="background-color:#F2F2F4 ">
<div id="tips">
<div class="tip1"><img src="../images/tip1.png" ></div>
<div class="tiptext">"点击右上角，将红包分享至朋友圈"</div>
<div class="tip2"><img src="../images/tip2.png"></div>
</div>
<div class="toubu"><a href="javascript:void(0);" onClick="javascript:history.go(-2);"><img style="float:left;margin-top:5px;padding-left:10px;width:28px;height:28px" src="images/jiantou.png"></a><span style="position:fixed;left: 130px;top: 0px;">发送红包</span></div>
<div><img src="images/hb_sharetofriend.jpg"></div>
<div style="position: absolute;left: 60px;top: 55px;font-family:微软雅黑;text-align:center" id="content"></div>
<br/>
<div style="margin-left:30px;"><img src="images/sharetofriend.png"></div>
<br/>
<br/>
<div class="grzx_fhb_button"><a href="javascript:void(0)">给好友发红包</a></div>
</body>
</html>标红色的是需要引入的JSWeixinApi.js代码如下:
/**!
* 微信内置浏览器的Javascript API，功能包括：
*
* 1、分享到微信朋友圈
* 2、分享给微信好友
* 3、分享到腾讯微博
* 4、新的分享接口，包含朋友圈、好友、微博的分享（for iOS）
* 5、隐藏/显示右上角的菜单入口
* 6、隐藏/显示底部浏览器工具栏
* 7、获取当前的网络状态
* 8、调起微信客户端的图片播放组件
* 9、关闭公众平台Web页面
* 10、判断当前网页是否在微信内置浏览器中打开
* 11、增加打开扫描二维码
* 12、支持WeixinApi的错误监控
* 13、检测应用程序是否已经安装（需要官方开通权限）
* 14、打开微信内置地图（认证过的公众号可用）
* 15、发送电子邮件
*
* @author zhaoxianlie(http://www.baidufe.com)
*/
(function (window) {
"use strict";
/**
* 定义WeixinApi
*/
var WeixinApi = {
version:3.2
};
// 将WeixinApi暴露到window下：全局可使用，对旧版本向下兼容
window.WeixinApi = WeixinApi;
/// CommonJS /
if (typeof define === 'function' && (define.amd || define.cmd)) {
if (define.amd) {
// AMD 规范，for：requirejs
define(function () {
return WeixinApi;
});
} else if (define.cmd) {
// CMD 规范，for：seajs
define(function (require, exports, module) {
module.exports = WeixinApi;
});
}
}
/**
* 对象简单继承，后面的覆盖前面的，继承深度：deep=1
* @private
*/
var _extend = function () {
var result = {}, obj, k;
for (var i = 0, len = arguments.length; i < len; i++) {
obj = arguments[i];
if (typeof obj === 'object') {
for (k in obj) {
result[k] = obj[k];
}
}
}
return result;
};
/**
* 内部私有方法，分享用
* @private
*/
var _share = function (cmd, data, callbacks) {
callbacks = callbacks || {};
// 分享过程中的一些回调
var progress = function (resp) {
switch (true) {
// 用户取消
case /\:cancel$/i.test(resp.err_msg) :
callbacks.cancel && callbacks.cancel(resp);
break;
// 发送成功
case /\:(confirm|ok)$/i.test(resp.err_msg):
callbacks.confirm && callbacks.confirm(resp);
break;
// fail 发送失败
case /\:fail$/i.test(resp.err_msg) :
default:
callbacks.fail && callbacks.fail(resp);
break;
}
// 无论成功失败都会执行的回调
callbacks.all && callbacks.all(resp);
};
// 执行分享，并处理结果
var handler = function (theData, argv) {
// 新的分享接口，单独处理
if (cmd.menu === 'menu:general:share') {
// 如果是收藏操作，并且在wxCallbacks中配置了favorite为false，则不执行回调
if (argv.shareTo == 'favorite' || argv.scene == 'favorite') {
if (callbacks.favorite === false) {
return argv.generalShare(theData, function () {
});
}
}
argv.generalShare(theData, progress);
} else {
WeixinJSBridge.invoke(cmd.action, theData, progress);
}
};
// 监听分享操作
WeixinJSBridge.on(cmd.menu, function (argv) {
if (callbacks.async && callbacks.ready) {
WeixinApi["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
if (WeixinApi["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
WeixinApi["_wx_loadedCb_"] = new Function();
}
callbacks.dataLoaded = function (newData) {
// 这种情况下，数据仍需加工
var theData = _extend(data, newData);
if (cmd.menu == 'menu:share:timeline' ||
(cmd.menu == 'menu:general:share' && argv.shareTo == 'timeline')) {
theData = {
"appid":theData.appId ? theData.appId : '',
"img_url":theData.imgUrl,
"link":theData.link,
"desc":theData.title,
"title":theData.desc,
"img_width":"640",
"img_height":"640"
};
}
WeixinApi["_wx_loadedCb_"](theData);
handler(theData, argv);
};
// 然后就绪
if (!(argv && (argv.shareTo == 'favorite' || argv.scene == 'favorite') && callbacks.favorite === false)) {
callbacks.ready && callbacks.ready(argv, data);
}
} else {
// 就绪状态
if (!(argv && (argv.shareTo == 'favorite' || argv.scene == 'favorite') && callbacks.favorite === false)) {
callbacks.ready && callbacks.ready(argv, data);
}
handler(data, argv);
}
});
};
/**
* 分享到微信朋友圈
* @param {Object} data 待分享的信息
* @p-config {String} appId 公众平台的appId（服务号可用）
* @p-config {String} imgUrl 图片地址
* @p-config {String} link 链接地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的标题
*
* @param {Object} callbacks 相关回调方法
* @p-config {Boolean} async ready方法是否需要异步执行，默认false
* @p-config {Function} ready(argv, data) 就绪状态
* @p-config {Function} dataLoaded(data) 数据加载完成后调用，async为true时有用，也可以为空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失败
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.shareToTimeline = function (data, callbacks) {
_share({
menu:'menu:share:timeline',
action:'shareTimeline'
}, {
"appid":data.appId ? data.appId : '',
"img_url":data.imgUrl,
"link":data.link,
"desc":data.title,
"title":data.desc,
"img_width":"640",
"img_height":"640"
}, callbacks);
};
/**
* 发送给微信上的好友
* @param {Object} data 待分享的信息
* @p-config {String} appId 公众平台的appId（服务号可用）
* @p-config {String} imgUrl 图片地址
* @p-config {String} link 链接地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的标题
*
* @param {Object} callbacks 相关回调方法
* @p-config {Boolean} async ready方法是否需要异步执行，默认false
* @p-config {Function} ready(argv, data) 就绪状态
* @p-config {Function} dataLoaded(data) 数据加载完成后调用，async为true时有用，也可以为空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失败
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.shareToFriend = function (data, callbacks) {
_share({
menu:'menu:share:appmessage',
action:'sendAppMessage'
}, {
"appid":data.appId ? data.appId : '',
"img_url":data.imgUrl,
"link":data.link,
"desc":data.desc,
"title":data.title,
"img_width":"640",
"img_height":"640"
}, callbacks);
};
/**
* 分享到腾讯微博
* @param {Object} data 待分享的信息
* @p-config {String} link 链接地址
* @p-config {String} desc 描述
*
* @param {Object} callbacks 相关回调方法
* @p-config {Boolean} async ready方法是否需要异步执行，默认false
* @p-config {Function} ready(argv, data) 就绪状态
* @p-config {Function} dataLoaded(data) 数据加载完成后调用，async为true时有用，也可以为空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失败
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.shareToWeibo = function (data, callbacks) {
_share({
menu:'menu:share:weibo',
action:'shareWeibo'
}, {
"content":data.desc,
"url":data.link
}, callbacks);
};
/**
* 新的分享接口
* @param {Object} data 待分享的信息
* @p-config {String} appId 公众平台的appId（服务号可用）
* @p-config {String} imgUrl 图片地址
* @p-config {String} link 链接地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的标题
*
* @param {Object} callbacks 相关回调方法
* @p-config {Boolean} async ready方法是否需要异步执行，默认false
* @p-config {Function} ready(argv, data) 就绪状态
* @p-config {Function} dataLoaded(data) 数据加载完成后调用，async为true时有用，也可以为空
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失败
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.generalShare = function (data, callbacks) {
_share({
menu:'menu:general:share'
}, {
"appid":data.appId ? data.appId : '',
"img_url":data.imgUrl,
"link":data.link,
"desc":data.desc,
"title":data.title,
"img_width":"640",
"img_height":"640"
}, callbacks);
};
/**
* 加关注（此功能只是暂时先加上，不过因为权限限制问题，不能用，如果你的站点是部署在*.qq.com下，也许可行）
* @param {String} appWeixinId 微信公众号ID
* @param {Object} callbacks 回调方法
* @p-config {Function} fail(resp) 失败
* @p-config {Function} confirm(resp) 成功
*/
WeixinApi.addContact = function (appWeixinId, callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke("addContact", {
webtype:"1",
username:appWeixinId
}, function (resp) {
var success = !resp.err_msg || "add_contact:ok" == resp.err_msg
|| "add_contact:added" == resp.err_msg;
if (success) {
callbacks.success && callbacks.success(resp);
} else {
callbacks.fail && callbacks.fail(resp);
}
})
};
/**
* 调起微信Native的图片播放组件。
* 这里必须对参数进行强检测，如果参数不合法，直接会导致微信客户端crash
*
* @param {String} curSrc 当前播放的图片地址
* @param {Array} srcList 图片地址列表
*/
WeixinApi.imagePreview = function (curSrc, srcList) {
if (!curSrc || !srcList || srcList.length == 0) {
return;
}
WeixinJSBridge.invoke('imagePreview', {
'current':curSrc,
'urls':srcList
});
};
/**
* 显示网页右上角的按钮
*/
WeixinApi.showOptionMenu = function () {
WeixinJSBridge.call('showOptionMenu');
};
/**
* 隐藏网页右上角的按钮
*/
WeixinApi.hideOptionMenu = function () {
WeixinJSBridge.call('hideOptionMenu');
};
/**
* 显示底部工具栏
*/
WeixinApi.showToolbar = function () {
WeixinJSBridge.call('showToolbar');
};
/**
* 隐藏底部工具栏
*/
WeixinApi.hideToolbar = function () {
WeixinJSBridge.call('hideToolbar');
};
/**
* 返回如下几种类型：
*
* network_type:wifi wifi网络
* network_type:edge 非wifi,包含3G/2G
* network_type:fail 网络断开连接
* network_type:wwan 2g或者3g
*
* 使用方法：
* WeixinApi.getNetworkType(function(networkType){
*
* });
*
* @param callback
*/
WeixinApi.getNetworkType = function (callback) {
if (callback && typeof callback == 'function') {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
// 在这里拿到e.err_msg，这里面就包含了所有的网络类型
callback(e.err_msg);
});
}
};
/**
* 关闭当前微信公众平台页面
* @param {Object} callbacks 回调方法
* @p-config {Function} fail(resp) 失败
* @p-config {Function} success(resp) 成功
*/
WeixinApi.closeWindow = function (callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke("closeWindow", {}, function (resp) {
switch (resp.err_msg) {
// 关闭成功
case 'close_window:ok':
callbacks.success && callbacks.success(resp);
break;
// 关闭失败
default :
callbacks.fail && callbacks.fail(resp);
break;
}
});
};
/**
* 当页面加载完毕后执行，使用方法：
* WeixinApi.ready(function(Api){
* // 从这里只用Api即是WeixinApi
* });
* @param readyCallback
*/
WeixinApi.ready = function (readyCallback) {
if (readyCallback && typeof readyCallback == 'function') {
var Api = this;
var wxReadyFunc = function () {
readyCallback(Api);
};
if (typeof window.WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
}
} else {
wxReadyFunc();
}
}
};
/**
* 判断当前网页是否在微信内置浏览器中打开
*/
WeixinApi.openInWeixin = function () {
return /MicroMessenger/i.test(navigator.userAgent);
};
/*
* 打开扫描二维码
* @param {Object} callbacks 回调方法
* @p-config {Function} fail(resp) 失败
* @p-config {Function} success(resp) 成功
*/
WeixinApi.scanQRCode = function (callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke("scanQRCode", {}, function (resp) {
switch (resp.err_msg) {
// 打开扫描器成功
case 'scan_qrcode:ok':
callbacks.success && callbacks.success(resp);
break;
// 打开扫描器失败
default :
callbacks.fail && callbacks.fail(resp);
break;
}
});
};
/**
* 检测应用程序是否已安装
* by mingcheng 2014-10-17
*
* @param {Object} data 应用程序的信息
* @p-config {String} packageUrl 应用注册的自定义前缀，如 xxx:// 就取 xxx
* @p-config {String} packageName 应用的包名
*
* @param {Object} callbacks 相关回调方法
* @p-config {Function} fail(resp) 失败
* @p-config {Function} success(resp) 成功，如果有对应的版本信息，则写入到 resp.version 中
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.getInstallState = function (data, callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke("getInstallState", {
"packageUrl":data.packageUrl || "",
"packageName":data.packageName || ""
}, function (resp) {
var msg = resp.err_msg, match = msg.match(/state:yes_?(.*)$/);
if (match) {
resp.version = match[1] || "";
callbacks.success && callbacks.success(resp);
} else {
callbacks.fail && callbacks.fail(resp);
}
callbacks.all && callbacks.all(resp);
});
};
/**
* 从网页里直接调起微信地图
*
* @param {Object} data 打开地图所需要的数据
* @p-config {String} latitude 纬度
* @p-config {String} longitude 经度
* @p-config {String} name POI名称
* @p-config {String} adress 地址
* @p-config {String} scale 缩放
* @p-config {String} infoUrl 查看位置界面底部的超链接
*
* @param {Object} callbacks 相关回调方法
* @p-config {Function} fail(resp) 失败
* @p-config {Function} success(resp) 成功
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.openLocation = function (data, callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke('openLocation', {
"latitude":data.latitude,
"longitude":data.longitude,
"name":data.name,
"address":data.address,
"scale":data.scale || 14,
"infoUrl":data.infoUrl || ''
}, function (resp) {
if (resp.err_msg === "open_location:ok") {
callbacks.success && callbacks.success(resp);
} else {
callbacks.fail && callbacks.fail(resp);
}
callbacks.all && callbacks.all(resp);
});
};
/**
* 发送邮件
* @param {Object} data 邮件初始内容
* @p-config {String} subject 邮件标题
* @p-config {String} body 邮件正文
*
* @param {Object} callbacks 相关回调方法
* @p-config {Function} fail(resp) 失败
* @p-config {Function} success(resp) 成功
* @p-config {Function} all(resp) 无论成功失败都会执行的回调
*/
WeixinApi.sendEmail = function (data, callbacks) {
callbacks = callbacks || {};
WeixinJSBridge.invoke("sendEmail", {
"title":data.subject,
"content":data.body
}, function (resp) {
if (resp.err_msg === 'send_email:sent') {
callbacks.success && callbacks.success(resp);
} else {
callbacks.fail && callbacks.fail(resp);
}
callbacks.all && callbacks.all(resp);
})
};
/**
* 开启Api的debug模式，比如出了个什么错误，能alert告诉你，而不是一直很苦逼的在想哪儿出问题了
* @param {Function} callback(error) 出错后的回调，默认是alert
*/
WeixinApi.enableDebugMode = function (callback) {
/**
* @param {String} errorMessage 错误信息
* @param {String} scriptURI 出错的文件
* @param {Long} lineNumber 出错代码的行号
* @param {Long} columnNumber 出错代码的列号
*/
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber) {
// 有callback的情况下，将错误信息传递到options.callback中
if (typeof callback === 'function') {
callback({
message:errorMessage,
script:scriptURI,
line:lineNumber,
column:columnNumber
});
} else {
// 其他情况，都以alert方式直接提示错误信息
var msgs = [];
msgs.push("额，代码有错。。。");
msgs.push("\n错误信息：", errorMessage);
msgs.push("\n出错文件：", scriptURI);
msgs.push("\n出错位置：", lineNumber + '行，' + columnNumber + '列');
alert(msgs.join(''));
}
}
};
})(window);index.js代码如下:
$(function(){
initParam();
});
function initParam(){
var red_packet_id = getParam("red_packet_id");
WeixinApi.ready(function(Api) {
// 微信分享的数据
var wxData = {
"appId": "", // 服务号可以填写appId
"imgUrl" : 'http://60.174.248.242:9013/ibs/page/hongbao/images/redPacket.jpg',
"link" : 'http://60.174.248.242:9013/ibs/page/hongbao/getredpacket.html?redPacketId='+red_packet_id,
"desc" : '我在家家帮抢红包赚了很多钱，加入家家帮，一起抢红包吧!',
"title" : "抢红包"
};
// 分享的回调
var wxCallbacks = {
};
// 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks);
// 点击分享到朋友圈，会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks);
// 点击分享到腾讯微博，会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks);
// iOS上，可以直接调用这个API进行分享，一句话搞定
Api.generalShare(wxData,wxCallbacks);
// 有可能用户是直接用微信“扫一扫”打开的，这个情况下，optionMenu是off状态
// 为了方便用户测试，我先来trigger show一下
var elOptionMenu = document.getElementById('optionMenu');
elOptionMenu.click(); // 先隐藏
elOptionMenu.click(); // 再显示
});
}代码中加了一个遮罩层,用来指引用户分享到朋友圈的入口,是这段代码:
<div id="tips">
<div class="tip1"><img src="../images/tip1.png" ></div>
<div class="tiptext">"点击右上角，将红包分享至朋友圈"</div>
<div class="tip2"><img src="../images/tip2.png"></div>
</div>所用样式为:
/*规则*/
#tips {
width: 100%;
height: 100%;
display: none;
background: url(../images/002.png) repeat center;
position: fixed;
padding-top: 10%;
z-index: 1000;
}
.tip1 {
width: 100%;
}
.tip1 img {
width: 30%;
float: right;
margin-right: 20%;
}
.tiptext {
width: 100%;
height: 1em;
margin: 2em 0;
float: right;
font-size: 16px;
color: #fff;
text-align: center;
text-height: 2em;
}
.tip2 {
width: 100%;
}
.tip2 img {
width: 30%;
float: right;
margin: 0 35%;
}遮罩层用到的图片是下面2个
图片1:->
图片2->
上面有两张,底色为白色,所以看的不是很清楚
下面是效果图:
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
