uniapp开发的h5在微信以卡片的形式分享

这个项目是微信小程序+H5所以用的uniapp混合开发

实现功能:设置h5分享格式将链接转为卡片

未实现前:

实现后:

来吧 废话不多说,直接上代码!

这里我用的Vue2 使用mixin全局混入,如果只有一个页面设置分享,将代码copy到分享页面即可

// 新建mixins 文件
// npm i weixin-js-sdk -- save 下载微信包

import wx from 'weixin-js-sdk'
let mymixin = {

	onLoad(options) {
		let provider = uni.getStorageSync('provider') //运行环境		
		if (provider != 'H5') {

		} else {

			this.getShareInfo()
		}

	},
	methods: {
		async getShareInfo() {
			//获取url链接（如果有#需要这么获取）
			var url = window.location.href.split("#")[0];
			//获取url链接（如果没有#需要这么获取）
			// var url = encodeURIComponent(window.location.href);

			let res = await uni.$http.post('', { 'url': url }) //接口请求所需参数
			wx.config({
				debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
				appId: res.data.data.appId, // 必填，公众号的唯一标识
				timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
				nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
				signature: res.data.data.signature, // 必填，签名
				jsApiList: [
					"updateAppMessageShareData",
					"updateTimelineShareData"
				] // 必填，需要使用的 JS 接口列表
			});
			wx.ready(() => {
				var pageTitle = document.title;
				var shareData = {
					title: pageTitle,
					desc: "描述",
					link: window.location.href,
					imgUrl: "https://.png",
					success: () => {
						// 用户确认分享后执行的回调函数
						console.log('分享成功');
					},
				};
				//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
				wx.updateAppMessageShareData(shareData);
				//自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
				wx.updateTimelineShareData(shareData);
			});
			//错误了会走 这里

			wx.error(function(res) {
				console.log("微信分享错误信息", res);
			});

		},
		//
	}
}
export default mymixin

然后在main.js实现全局混入

import mixins from '@/mixins/index.js'
Vue.mixin(mixins);

这块涉及到微信公众号,具体的话去看官网,反正前端代码就是这样,有问题就赖后端,或者微信公众号信息没配置.