uniapp微信小程序自定义分享配置及可能存在的问题及解决方法

微信小程序自定义分享配置

1.创建全局应用的share.js

export default {
	data() {
		return {
			//设置默认的分享参数
			sharedata: {
				title: '分享标题',
				path: '/pages/homePage/homePage',//分享默认跳转到页面地址
				imageUrl: 'https://****/1.png',//分享卡片默认展示的图片
			}
		}
	},
	//发送给朋友
	onShareAppMessage(res) {
	//设置分享的当前页面的地址
		let pageurl = this.sharedata.path;
		if (getCurrentPages().length > 0) {
			let data = getCurrentPages()[getCurrentPages().length - 1]//获取当前页面地址
			let options = ''
			if (Object.keys(data.options).length > 0) {
				for (let i in data.options) {
					options = `${i}=${data.options[i]}&`
				}
			}//当前页面是否携带参数，并获取参数
			pageurl = `${data.$page.fullPath}?${options}`//整合页面地址及页面参数
		}
		return {
			title: this.sharedata.title,
			path: pageurl,
			imageUrl: this.sharedata.imageUrl,
			success(res) {
				console.log(res, 'resresres')
				uni.showToast({
					title: '分享成功',
					duration: 3000
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none',
					duration: 3000
				})
			}
		}
	},

	//uniapp微信小程序分享页面到微信朋友圈
	onShareTimeline(res) {
		return {
			title: this.sharedata.title,
			query: '',
			imageUrl: this.sharedata.imageurl,
			success(res) {
				uni.showToast({
					title: '分享成功',
					duration: 3000
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none',
					duration: 3000
				})
			}
		}
	}

}

2.在main.js中引入

import share from '/share.js' //自定义分享功能
Vue.mixin(share)

3.查看根据当前分享存在的问题及解决方法

1）分享出去的卡片图片无法正常展示

标记文本

1.尽量使用线上的图片链接
2.查看微信公众平台小程序开发管理-开发设置中的安全配置开启再关闭

2）分享出去的卡片点击内容无法展示

标记文本

小程序内容过大进行了分包处理，而当前页面为分包页面，点击不会加载主宝数据，在page.json中设置分包是将参数"independent": true,取消或者设置false就会在加载分包页面是加载主包数据（当前操作会不会影响其它目前还不了解）