Bootstrap

uniapp开发微信公众号(H5)分享功能

uniapp开发微信公众号(H5)分享功能

新建weixinModel.js
// npm install jweixin-module
var jweixin = require('jweixin-module')

// 避免ios获取不到url
function getSignUrl() {
	var signLink = ''
	var ua = navigator.userAgent.toLowerCase();
	if (/iphone|ipad|ipod/.test(ua)) {
		signLink = uni.getStorageSync('WxCodeUrl');
		if (!signLink) signLink = location.href
	} else {
		signLink = location.href
	}
	return signLink;
}

function WXConfig(_this) {
	//这个URL 路径中不可以带有hash值 即不能又 #后面的的内容(包含#)
	//这里使用到了encodeURIComponent() 
	const sign_url = getSignUrl().split('#')[0];
	let URL = window.encodeURIComponent(sign_url)
	ApiHttp('/comn/jsdk', {
		url: URL
	}, 'POST', true, true).then(res => {
		if (res.code === 0) {
			jweixin.config({ //这里是个函数,非对象
				debug: false, // 调试,发布的时候改为false
				appId: res.data.appId, //后端接口获取
				nonceStr: res.data.nonceStr, //后端接口获取
				timestamp: res.data.timestamp, //后端接口获取
				signature: res.data.signature, //后端接口获取
				jsApiList: [ // 可能需要用到的能力 需要啥就写啥。多写也没有坏处
					'updateAppMessageShareData',
					'updateTimelineShareData',
					'onMenuShareAppMessage',
					'onMenuShareTimeline',
					'openLocation'
				]
			})
			let configComnSv = getStorageSync('configComn') ? JSON.parse(getStorageSync('configComn')) : {};
			let userInfoCv = getStorageSync('userInfo') ? JSON.parse(getStorageSync('userInfo')) : {};
			let referid = userInfoCv.id;
			let link_change = getSignUrl();
			if (location.search) { //避免重复添加referid
				if (link_change.includes('&referid')) {} else {
					link_change += `&referid=${referid}`
				}
			} else {
				if (link_change.includes('?referid')) {} else {
					link_change += `?referid=${referid}`
				}
			}
			let obj = {
				title: configComnSv.share_title ? configComnSv.share_title : '标题', // 分享标题
				desc: configComnSv.share_desc ? configComnSv.share_desc : '描述', // 分享描述
				// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				// link: sign_url, //这里可带参数,必须是同配置的JS安全域名一致
				link: link_change, //这里可带参数,必须是同配置的JS安全域名一致,必须是全部url(不需要去除#),这个地址如果上面向后端置换的URL通过encodeURIComponent编译,后端配置的地址需要decode一下,例如php可以用urldecode函数
				imgUrl: configComnSv.share_pic ? configComnSv.share_pic : '', // 必须是同配置的JS安全域名一致
				success: function() {}
			}
			jweixin.ready(function() {
				if (jweixin.onMenuShareAppMessage) {
					jweixin.onMenuShareAppMessage(obj); //1.0 分享到朋友
					jweixin.onMenuShareTimeline(obj); //1.0分享到朋友圈
				} else {
					jweixin.updateAppMessageShareData(obj); //1.4 分享到朋友
					jweixin.updateTimelineShareData(obj); //1.4分享到朋友圈
				}
			})
		}
	})
}

export default {
	WXConfig
}
app.vue添加url缓存
mounted() {
   uni.setStorage({
				key: 'WxCodeUrl',
				data: location.href
	});
}
分享页面使用
import weixinModule from "@/utils/weixinModel.js"
onLoad() {
			weixinModule.WXConfig(this)
},

补充说明:
分享出去,需要在微信公众后配置自定义菜单,不然分享出去的是一个链接,配置完成后才是模板块,图片+文字

;