微信网页自定义分享wx.config

具体参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限

 

步骤二：引入jweixin-module模块

直接使用npm在内网下载jweixin-module可能会因为超时而失败。可以使用外网或者淘宝镜像cnpm下载模块。

// 安装cnpm（已经安装cnpm请忽略）:
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 安装jweixin-module
cnpm install jweixin-module

由于我是在.js文件中引用的。　

在此.js文件开头引入模块：

var WeixinApi = require('@/node_modules/jweixin-module/lib/index.js')

　

步骤三：通过config接口注入权限验证配置

WeixinApi.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

　　

注意事项

1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2. 签名用的url必须是调用JS接口页面的完整URL。

3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

关于与签名相关的参数和appid由后台提供。

关于jsApiList配置（任选）：

jsApiList:[

updateAppMessageShareData, //1.6.0 版接口， 分享到微信好友/qq好友

updateTimelineShareData，//1.6.0 版接口， 分享到微信朋友圈/qq空间

onMenuShareTimeline，//（即将废弃）分享到微信好友

onMenuShareAppMessage，//（即将废弃）分享到微信朋友圈

onMenuShareQQ，//（即将废弃）分享到qq好友

onMenuShareWeibo，//分享到微博

onMenuShareQZone //分享到qq空间

]

jsApiList中选项还需要配套监听（注意：link的参数该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，此链接不能带#，h5路由使用hash的需要注意，有必要的话可以在跳转后修改链接）：

WeixinApi.onMenuShareTimeline({
		title: shareTitle, // 分享标题
		desc: descContent, // 分享描述
		link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl: imgUrl,
		success: function (res) {
			// 用户确认分享后执行的回调函数
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 用户取消分享后执行的回调函数
			uni.showToast({
				title: '分享失败',
				icon: false
			})
		}
	});
 
	/* 分享给朋友 */
	WeixinApi.onMenuShareAppMessage({
		title: shareTitle, // 分享标题
		desc: descContent, // 分享描述
		link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl: imgUrl, // 分享图标
		// type: '', // 分享类型,music、video或link，不填默认为link
		// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		success: function () {
			// 用户确认分享后执行的回调函数
			uni.showToast({
				title: '分享成功'
			})
		},
		 
		cancel: function () {
			// 用户取消分享后执行的回调函数
			uni.showToast({
				title: '分享失败',
				icon: false
			})
		}
	});
 
	/*分享到qq */
	WeixinApi.onMenuShareQQ({ 
		title: shareTitle, // 分享标题
		desc: descContent, // 分享描述
		link: url, // 分享链接
		imgUrl: imgUrl, // 分享图标
		success: function () {
			// 用户确认分享后执行的回调函数
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 用户取消分享后执行的回调函数
			uni.showToast({
				title: '分享失败',
				icon: false
			})
		}
	});
 
	/* 分享到qq空间 */
	WeixinApi.onMenuShareQZone({
		title: shareTitle, // 分享标题 
		desc: descContent, // 分享描述
		link: url, // 分享链接
		imgUrl: imgUrl, // 分享图标
		success: function () {
			// 用户确认分享后执行的回调函数
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 用户取消分享后执行的回调函数
			uni.showToast({
				title: '分享失败',
				icon: false
			})
		} 
	});
	/* 分享到微博 */
	WeixinApi.onMenuShareWeibo({
		title: shareTitle, // 分享标题 
		desc: descContent, // 分享描述
		link: url, // 分享链接
		imgUrl: imgUrl, // 分享图标
		success: function () {
			// 用户确认分享后执行的回调函数
			uni.showToast({
				title: '分享成功'
			})
		},
		cancel: function () {
			// 用户取消分享后执行的回调函数
			uni.showToast({
				title: '分享失败',
				icon: false
			})
		}
	});

// ...具体看需求

　　

 如果需要根据不同页面，改变分享卡的标题和描述。可以重新配置WeixinApi.onMenuShareTimeline、WeixinApi.onMenuShareAppMessage等等这些（标题和描述）。