Hbuildx 使用vue打包的App实现微信分享功能

最新推荐文章于 2022-09-19 17:24:19 发布

sslcsq

最新推荐文章于 2022-09-19 17:24:19 发布

阅读量798

点赞数

文章标签： App vue plus Hbuildx 微信分享

本文链接：https://blog.csdn.net/sslcsq/article/details/119534115

版权

前言：
本文章使用的是vue+h5+plus技术，结合hbuildx打包的App，实现在App中分享页面到朋友圈以及好友。

下面贴码介绍：

<nut-popup v-model="isVisible" position="bottom">
		分享到
		<div class="custom-wrap">
				<div @click="shareWX('WXSceneSession')">
					<img src="@/assets/images/weixin.png" alt="">
					<div>微信</div>
				</div>
				<div style="margin-left:20px;" @click="shareWX('WXSceneTimeline')">
					<img src="@/assets/images/pengyouquan.png" alt="">
					<div>朋友圈</div>
				</div>
		</div>
</nut-popup>

在shareWX()这个方法中，如果是分享到好友传值'WXSceneSession'分享到朋友圈传值'WXSceneTimeline'

shareWX(scene){
	let _this=this
	let msg = {
		type: "web",
		thumbs: ['@/assets/images/cxy28.jpg'],
		title:_this.detailHtml.title,
		content:_this.detailHtml.title,
		href: `https://xxxxxxxxxxx/#/detail/${_this.shareDatatype}/${_this.shareDataarticleId}/${_this.shareDataexpertId}/${_this.shareDatastatus}/${_this.shareDatasynMatchId}/${_this.shareDatamatchType}`,
		extra: {
			scene:scene
		}
	}
	let t = this 
	plus.share.getServices(function(e) {
		//在这个数组里 找到属于微信的对象 循环匹配查找
		for (var i in e) {
			if ('weixin' == e[i].id) {
				t.sharewx = e[i] //保存到变量里 （之后即可使用该对象发起分享）
				t.getsend(msg)
			}
		}
	})
}

getsend(msg){
	this.sharewx.send(msg,(res)=>{
		let _t=this
		_t.$toast.success('分享成功');
		_t.isVisible=false //关闭弹框
	},(error)=>{
		this.$toast.fail('分享失败,请重新分享')
	})
}

参数介绍详看share

注意点：
href：分享的链接。【这个参数值不用直接使用window.location.href，因为在App环境中不支持也获取不到，推荐使用链接+拼参形式】

type：分享消息的类型
在这里插入图片描述