前言

       微信分享是uniapp开发中常见的需求,大部分的app或者小程序都会具备微信分享的功能,但微信分享效果并不难实现,因为uniapp本身自带了一个微信分享的api,我们只需要调用微信分享的api即可实现

前置条件

        要完成微信分享首先得打开微信分享的功能,打开manifest.json文件,点击app模块配置,找到微信分享并选中即可

        注意:appid不是必填项,如果appid为空时分享出去的内容来源会显示为HBuilder,如果需要显示的内容来源是自身的app则需自行在各微信平台注册appid,填写注册的appid,打包后生效。

 分享到聊天界面

<template>
	<view>
		<button @click="share">点我微信分享</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle",    // 分享跳转的链接
					title: "微信分享",    // 分享标题
					summary: "微信分享示例",    // 分享内容文字
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7",    //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					}
				});
			}
		}
	}
</script>

<style>

</style>

分享到朋友圈

<template>
	<view>
		<button @click="share">点我微信分享</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle",    // 分享跳转的链接
					title: "微信分享",    // 分享标题
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7",    //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					}
				});
			}
		}
	}
</script>

<style>

</style>

分享到微信收藏

<template>
	<view>
		<button @click="share">点我微信分享</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneFavorite",
					type: 0,
					href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle",    // 分享跳转的链接
					title: "微信分享",    // 分享标题
					imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7",    //分享封面图片
					success: function(res) {
						// 此处是调起微信分享成功的回调
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					}
				});
			}
		}
	}
</script>

<style>

</style>

        以上就是微信分享的基本用法了,关于微信分享更多的信息可以前往uniapp 微信分享查看

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐