微信h5分享

微信h5 分享 微信jssdk

1、前提
必须是微信浏览器才能使用他的jssdk，公众平台账号必须经过微信认证才能使用微信分享的接口权限（微信认证方法登录微信公众平台就能看到或者百度一下）
目前只有uc浏览器和qq浏览器可以获取分享事件，这个网上有插件， 其他浏览器最多点击右上角分享但是获取不到是否点击分享的状态。

2、过程
当时公司的需求就是app内嵌h5往外分享，在网上找了很长时间都是用微信的jssdk来实现，但是确有很多坑他们没有提到，我用的uni_app,微信官方的js-sdk会报错，暂时没找到原因，后来在网上找的 jweixin-module模块
可以npm 安装
也可以直接下载引用 下载地址：jweixin-module

在main.js 全局引用 ，（使用的是下载引用）

const wxjs = require('./utils/wxjs');
Vue.prototype.$wx = wxjs;

定义分享配置

const wxprams = {
		title: '分享标题',
		imgUrl: '分享的图片，貌似只支持网络地址',
		desc: '分享的内容',
		link: '这个注意下，一般填上线后首页的地址链接，因为别人点进你的分享就是跳转这个链接（看需求）',
	}

定义config配置 这个是后端传过来的值

this.$wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: data.appId, // 必填，公众号的唯一标识
					timestamp: data.timestamp, // 必填，生成签名的时间戳
					nonceStr: data.nonceStr, // 必填，生成签名的随机串
					signature: data.signature, // 必填，签名
					jsApiList: [
						"onMenuShareTimeline",
						"onMenuShareAppMessage"
					] // 必填，需要使用的JS接口列表 
				});
				let that = this;
				// 处理验证失败的信息
				this.$wx.error(function(res) {
					alert('验证失败:' + res.toString());
				});
				this.$wx.ready(function() { //需在用户可能点击分享按钮前就先调用
					//分享到朋友圈
					that.$wx.onMenuShareTimeline({
						title: wxprams.title, // 分享标题
						link: wxprams.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: wxprams.imgUrl, // 分享图标
						success: function(res) {
							// console.log("分享成功", res)
						},
						fail: function(res) {
							// console.log('分享失败', res)
						}
					})
					//分享给朋友
					that.$wx.onMenuShareAppMessage({
						title: wxprams.title, // 分享标题
						desc: wxprams.desc, // 分享描述
						link: wxprams.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: wxprams.imgUrl, // 分享图标
						type: '', // 分享类型,music、video或link，不填默认为link
						dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
						success: function(res) {
							// console.log("分享成功", res)
							// 用户点击了分享后执行的回调函数
						},
						fail: function(res) {
							// console.log('分享失败', res)
						}
					});
				});

这个分享并不能在页面的自定义按钮上触发，还是需要在微信浏览器的右上角点击分享才会触发分享成功或是失败， 一般是页面加载就开始调用。

我也是入行不久，不确保我写的都是对的，写的不好也请见谅，希望我能帮到那些和我一样刚接触的，可以少走一些弯路。。。