uniapp 开发 h5 配置分享微信朋友卡片效果

1、JS-SDK说明文档

文档链接

把JSSDK的js文件下载下来或者直接使用链接

2、封装 初始化 jssdk 的 function

var jweixin = require('../common/jweixin-1.6.0.js');

jssdkConfig: (options, callback) => {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: "加载中..."
		})
		// 请求后端链接，获取所需要的参数
		uni.request({
			url: baseUrl + options.url,
			method: "GET",
			data: options.data || {},
			success: (res) => {
				const s = res.data.data;
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: s.appId, // 必填，公众号的唯一标识
					timestamp: s.timestamp, // 必填，生成签名的时间戳
					nonceStr: s.nonceStr, // 必填，生成签名的随机串
					signature: s.signature, // 必填，签名
					jsApiList: [
						'updateAppMessageShareData',
						'updateTimelineShareData',
						'onMenuShareAppMessage',
						'onMenuShareTimeline',
						'openLocation',
						'chooseWXPay',
						'chooseImage',
						'previewImage'
					], // 必填，需要使用的JS接口列表，多点没坏处，分享功能前四个就行，可以让后端给你返回，就不用自己写了
					openTagList: ['wx-open-launch-weapp'], // 跳转小程序时用到
				});
				jweixin.ready(() => {
					callback();
					uni.hideLoading();
				})

				jweixin.error(() => {
					uni.hideLoading();
				})
			},
			fail: (err) => {
				reject(err);
				uni.hideLoading();
			},
		})
	})
}

export default {
	jssdkConfig
}

3、在页面中使用

<script>
	import api from '../../api/api.js';
	var jweixin = require('../../common/jweixin-1.6.0.js');

	export default {
		data() {
			return {}
		},
		methods: {
			share() {
				api.jssdkConfig({
					url: '',
					data: {}
				},() => {
					const shareConfig = {
						title: '', // 分享标题
						desc: '', // 分享描述
						link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: '', // 分享图标(不能使用相对地址)
						success: (res) => {
							// h5里面一般是成功后弹出引导点击右上角三个点进行分享的弹窗
						},
						fail: (err) => {},
					}
					jweixin.updateAppMessageShareData(shareConfig);
					jweixin.updateTimelineShareData(shareConfig);
					jweixin.onMenuShareTimeline(shareConfig);
					jweixin.onMenuShareAppMessage(shareConfig);
				})
			}
		}
	}
</script>

提示：点击链接进入 h5 分享出来的还是链接，要想分享出来卡片效果，可以把链接做成二维码，或者放在公众号菜单栏中，就有卡片效果