借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,在H5网页中改变在微信
看效果
JSSDK使用步骤
步骤一:绑定域名
1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,不需要填写协议http或者https。
2.在“开发者中心”查看对应的接口权限,确保公众号能使用微信分享、扫一扫等功能。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问: res2.wx.qq.com/open/js/jweixin-1.6.0.js(支持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);
});
完整代码示例
/**
* 微信分享组件
*/
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);
}
};