uniApp 自定义分享到微信、朋友圈

新建组件share-posters

uniapp自定义分享到微信好友、朋友圈组件

// An highlighted block
<template>
	<view class="">
		<view class="batch-num" :class="isShow ? 'on' : ''">
			<view class="batch-body">
				<view class="share-main-btn">
					<view class="share-box-title">分享到：</view>
					<view class="flex-sb-cent">
						<view class="item-btn" @click="onShare('WXSceneSession')">
							<view class="item-btn-img">
								<image src="@/static/images/xs-share01.png" mode=""></image>
							</view>
							<text>微信好友</text>
						</view>
						<view class="item-btn" @click="onShare('WXSceneTimeline')">
							<view class="item-btn-img">
								<image src="@/static/images/xs-share02.png" mode=""></image>
							</view>
							<text>朋友圈</text>
						</view>
					</view>
				</view>
				<view class="cancle-btn" @click="onCancel">取消</view>
			</view>
		</view>
		<view class="mask" v-show="isShow" @click="onCancel"></view>
	</view>
</template>

<script>
	import {share} from '@/api/common.js'
import { cancel } from '../api/user'
	export default {
		name: "batchNum",
		props: {
			isOpen: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {
				isShow: false,
				config: {
					"appId": "",
					"url": "",
					"name": "",
					"logo": "",
					"describe": "",
					config: {},
					"user": {
						"name": "",
						"avatar": ""
					}
				}
			}
		},
		watch: {
			isOpen(newv, oldV) {
				this.isShow = true
			}
		},
		created() {
			this.config = JSON.parse(this.$cache.get('share-config'))
			share().then(data => {
				this.$cache.set('share-config', data, 86400)
				this.config = data
			})
			
		},
		methods: {
			onShare(scene) {
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					type: 0,
					scene,
					title: this.config.name,
					imageUrl: this.config.logo,
					href: this.config.url,
					summary: this.config.describe,
					success: res=> {
						console.log(res)
						this.onCancel()
					},
					fail: res=> {
						if(res.code == -8) {
							this.$showToast('您未安装微信','fail')
						}
						this.onCancel()
					},
				})
				// #endif
				// #ifdef H5
				jWeixin.config(this.config.config)
				let that = this
				jWeixin.ready(()=> { 
					let shareData = {
						title: this.config.name,
						imgUrl: this.config.logo,
						link: this.config.url,
						desc: this.config.describe,
						success: function(res) {
							that.$showToast('分享成功')
						},
						cancel: function(res) {
							that.$showToast(JSON.stringify(err),'fail')
						}
					}
					if (scene=='WXSceneSession') {
						// 分享给微信好友
						jWeixin.updateAppMessageShareData(shareData)
					} else {
						// 分享给微信朋友圈
						jWeixin.updateTimelineShareData(shareData)
					}
				})
				jWeixin.error((res)=>{
					this.$showToast(JSON.stringify(res),'fail')
				})
				// #endif
				
				
			},
			onCancel() {
				this.isShow = false
			},
		}
	}
</script>

<style lang="less" scoped>
	.batch-num {
		width: 100%;
		// height: 624rpx;
		// background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		overflow: hidden;

		&.on {
			transform: translate3d(0, 0, 0);
		}

		.batch-body {
			padding: 20rpx;
		}

		.item-btn {
			width: 50%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 26rpx;
			text-align: center;

			.item-btn-img {
				width: 72rpx;
				height: 72rpx;
				margin: 0 auto;
				margin-bottom: 12rpx;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;

				image,
				img {
					width: 72rpx;
					height: 72rpx;
					pointer-events: none;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
			}
		}

		.share-main-btn {
			width: 100%;
			height: 248rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 12rpx;
			padding: 32rpx 48rpx;
			margin-top: 40rpx;

			.share-box-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 32rpx;
				padding-bottom: 30rpx;
			}
		}

		.cancle-btn {
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2E73FF;
		}
	}

	// 分享
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.7;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999 !important;
	}
</style>

在项目中index.html文件中引入jWeixin

我们首先要安装一个模块（jweixin-module）我用的第二种方法引入的

//引入方式有多种
// 1 npm下载
 npm install jweixin-module
 // 2 将jweixin-module放到html中
 <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" ></script>

在父组件中使用

引入父组件中

<template>
	<view>
		<sharePosters :isOpen="isOpenShare"></sharePosters>
	</view>
</template>
<script>
	import sharePosters from '@/components/share-posters.vue'
	export default {
		components: {
			sharePosters,
		},
		data() {
			return: {
				isOpenShare: false,
			}
		},
		methods: {
			onPickAddress() {
				this.isOpenShare= true
			},
			
		}
	}
</script>

此分享需要后端配合，后端写接口返回config想管数据和方法签名等才能分享，app则需要发布的报名以及签名一直才能分享成功。