概述
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，在H5网页中改变在微信中的分享内容，以卡片的形式传播，为微信用户提供更优质的网页体验。
JSSDK使用步骤
步骤一：绑定域名
1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，不需要填写协议http或者https。
2.在“开发者中心”查看对应的接口权限，确保公众号能使用微信分享、扫一扫等功能。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）
引入成功之后会在window上挂载wx对象，从而使用wx中的方法进行校验和后续的操作。
步骤三：权限验证
当网页需要以卡片形式分享时，在页面加载时先注入配置信息，进行校验，否则将无法成功调用后续的分享等功能。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ['updateAppMessageShareData','updateTimelineShareData',...] // 必填，需要使用的JS接口列表,可参考开发文档中的列表
});
步骤四：注册事件
当wx.config注册成功后,会返回errMsg: “config:ok” 信息,以及有权限调用的jsApiList列表;
如果返回的jsApiList为空,请核对公众号是否有对应事件的权限
{
errMsg: "config:ok",
jsApiList: ['updateAppMessageShareData','updateTimelineShareData',....]
}
配置成功后,开始注册事件
const setting = {
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: () => {
if (success && typeof success === 'function') success();
},
cancel: () => {
if (cancel && typeof cancel === 'function') cancel();
},
};
window.wx.ready(() => {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
window.wx.updateAppMessageShareData(setting);
window.wx.updateTimelineShareData(setting);
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
success：接口调用成功时执行的回调函数。 fail：接口调用失败时执行的回调函数。 complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。 cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。 trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。 备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
调用成功时：”xxx:ok” ，其中xxx为调用的接口名
用户取消时：”xxx:cancel”，其中xxx为调用的接口名
调用失败时：其值为具体错误信息
常见错误及解决方法
1. invalid url domain
当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号（一个appid可以绑定三个有效域名）
2.invalid signature签名错误，最常见
-
确认签名算法正确，可用mp.weixin.qq.com/debug/cgi-b… 页面工具进行校验。
-
确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
-
确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认)，包括’http(s)://’部分，以及’？’后面的GET参数部分,但不包括’#’hash后面的部分。
-
确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
-
确保一定缓存access_token和jsapi_ticket。
-
确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#’hash部分的链接（可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
-
确保获取签名的url和服务端去获取signature一致,当url上携带多个参数时,有可能导致与服务端注册的url不一致,所以建议使用encodeURIComponent先处理传入的url,通过服务端接口获取签名参数时,最后也返回注册的url,用于比较,确保两者一致
3.the permission value is offline verifying
确保config正确执行，或者调用的JSAPI有传入config的jsApiList参数
4.permission denied
该公众号没有权限使用这个JSAPI,或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用）,但是这种一般会报错invalid signature
完整代码示例
微信分享组件
/**
* 微信分享组件
*/
import { get } from './request';
export default class WXShare {
constructor(config) {
this.config = {
// 标题
title: '',
// 描述
desc: '',
// 注册链接
link: '',
// 分享链接
sharkLink: '',
// 图片
imgUrl: '',
...config,
};
this.init();
}
// 注册微信配置
setConfig(configData) {
window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数。
appId: configData.appId, // 必填，公众号的唯一标识
timestamp: configData.timestamp, // 必填，生成签名的时间戳
nonceStr: configData.nonceStr, // 必填，生成签名的随机串
signature: configData.signature, // 必填，签名，见附录1
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
window.wx.error((err) => {
window.console.log('err', err);
});
const { title, desc, sharkLink, imgUrl, success = null, cancel = null } = this.config;
const setting = {
title,
desc,
link: sharkLink,
imgUrl,
success: () => {
if (success && typeof success === 'function') success();
},
cancel: () => {
if (cancel && typeof cancel === 'function') cancel();
},
};
window.wx.ready(() => {
window.wx.updateAppMessageShareData(setting);
window.wx.updateTimelineShareData(setting);
window.wx.onMenuShareQQ(setting);
window.wx.onMenuShareWeibo(setting);
window.wx.onMenuShareQZone(setting);
});
}
// 获取微信配置
init() {
get(`/*******?url=${this.config.link}`)
.then((res) => {
const { code, data } = res || {};
if (code === 0) {
this.setConfig(data);
}
})
.catch((err) => {
window.console.log('err', err);
});
}
}
环境判断以及调用
import WxShare from './wxShare';
/**
* 是否在微信中打开
* @return {Boolean} true-是 false-否
*/
export const isWxOpen = () => {
const isWx = window.navigator.userAgent.match(/MicroMessenger/i);
// 是否在微信中打开
if (isWx && isWx[0] === 'MicroMessenger') {
return true;
}
return false;
};
/**
* 配置微信分享
* @param {Object} params 配置信息
* @param {String} params.title 标题
* @param {String} params.desc 简介
* @param {String} params.sharkLink 分享的链接，可以与注册的链接不一致，但需要是相同域名下的
* @param {String} params.imgUrl 缩略图
* @param {Function} params.success 成功回调
* @param {Function} params.cancel 失败回调
*/
export const registerWx = (params) => {
// 优先注册
if (isWxOpen()) {
const {
title = '蝶恋花',
desc = '衣带渐宽终不悔,为伊消得人憔悴',
imgUrl = '',
success = null,
cancel = null,
sharkLink = window.location.href // 分享链接,
} = params || {};
const config = {
title,
desc,
link: encodeURIComponent(window.location.href), // 注册的链接
sharkLink,
imgUrl:
imgUrl || 'https://****favicon.ico',
success,
cancel,
};
// eslint-disable-next-line no-new
new WxShare(config);
}
};
效果预览
原文链接：https://juejin.cn/post/7317091895172136960 作者：抛个呆萌
