微信H5网页分享功能实现详解

时间：2023-05-21 09:54:02 | 来源：网站运营

时间：2023-05-21 09:54:02 来源：网站运营

微信H5网页分享功能实现详解：最近做了一个小项目，需要做微信分享功能，然后查了一通微信文档，具体步骤如下：

• 1. 步骤一：绑定域名
• 2. 步骤二：引入JS文件
• 3. 步骤三：通过config接口注入权限验证配置
• 4. 步骤四：通过ready接口处理成功验证
• 5. 步骤五：通过error接口处理失败验证

第一步：绑定域名和设置IP白名单

在微信公众号里，设置IP白名单和JS安全域名：

设置JS安全域名：

二、引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

如果是VUE项目：

npm install weixin-js-sdk

引入：

var wx = require('weixin-js-sdk');

三、通过config接口注入权限验证配置

wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识，填自己的！
timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
});

四、通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

//分享到朋友圈
wx.onMenuShareTimeline({
title: "title", // 分享时的标题
desc: des,
link: theUrl, // 分享时的链接
imgUrl: shareImgUrl,// 分享时的图标
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口调用完成时执行的回调函数，无论成功或失败都会执行。
console.log("complete" + JSON.stringify(res));
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: "title",
desc: des,
link: theUrl,
imgUrl: shareImgUrl, //分享图标
type: "",
dataUrl: "",
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口调用完成时执行的回调函数，无论成功或失败都会执行。
console.log("complete" + JSON.stringify(res));
}
});




五、通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

完整代码：





/*
* 注意：
* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 如有问题请通过以下渠道反馈：
* 邮箱地址：weixin-open@qq.com
* 邮件主题：【微信JS-SDK反馈】具体问题
* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
*/
// 发送给朋友并返回结果
/* wx.checkJsApi({
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'],
success: function(res) {
alert(reg);
}})
// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}});
}) */

openShare() {
let that = this;
let des = this.$dict.DESC;
let theUrl = window.location.href.split("#")[0];
let shareImgUrl ="logo.png"
getShareSign({ url: theUrl }).then(res => {
if (res.data.code == 200) {
let appId = res.data.data.appid;
let timestamp = res.data.data.timestamp;
let nonceStr = res.data.data.nonceStr;
let signature = res.data.data.signature;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId, // 必填，公众号的唯一标识，填自己的！
timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
nonceStr: nonceStr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
});

wx.ready(function() {
//分享到朋友圈
wx.onMenuShareTimeline({
title: "title", // 分享时的标题
desc: des,
link: theUrl, // 分享时的链接
imgUrl: shareImgUrl, // 分享时的图标
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口调用完成时执行的回调函数，无论成功或失败都会执行。
console.log("complete" + JSON.stringify(res));
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: "",
desc: des,
link: theUrl,
imgUrl: shareImgUrl,
type: "",
dataUrl: "",
success: function() {
console.log("分享成功");
},
cancel: function() {
console.log("取消分享");
},
fail: function(res) {
console.log("fail" + JSON.stringify(res));
},
complete: function(res) {
//接口调用完成时执行的回调函数，无论成功或失败都会执行。
console.log("complete" + JSON.stringify(res));
}
});
that.showLayer = true;
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log("myerr:" + JSON.stringify(res));
});
} else {
this.$message.error("获取签名失败");
}
});
},

流星消逝，还有宁静美好的夜空；昙花凋零，还有来年绽放的期许；蒲公英飘走了，还有随风飞舞的风姿；你、若有梦想，请坚持下去…