uniapp vue分享功能集成

最新推荐文章于 2024-07-17 18:05:15 发布

熊佳龙

最新推荐文章于 2024-07-17 18:05:15 发布

阅读量561

点赞数 13

分类专栏： uniapp VUE 文章标签： vue.js uni-app javascript

本文链接：https://blog.csdn.net/qq_36635270/article/details/139679318

版权

uniapp 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

VUE

5 篇文章 0 订阅

订阅专栏

分享必须通过button设置open-type="share"拉起

<view class="img horizontal center" style="margin-right: 20rpx;">
	<image class="img" :src="src" @click="onTapClick('xxx')" 
		style="z-index: 1;" />
	<button v-if="curBarrier > 5" class="share-btn transparent" open-type="share"
		style="z-index: 2; position: absolute;">
	</button>
</view>

	.share-btn {
		width: 170rpx;
		height: 56rpx;
		border: none !important;
		plain: true;
		background: transparent;
		//不加这个属性，隐藏边框抖音可以，快手失效了
		box-shadow: none;
		&::after {
			border: none;
		}
	}

基本逻辑就是在某个按钮上面覆盖一个全透明button，这样更方便实现UI设计和交互，z-index则是控制view层级的，越大的再上面，然后position：absolute 设置不受其他view影响，重叠view时也用这个设置

再然后写一个全局通用的分享回调的js方法：

export default {

	async onShareAppMessage(options) {
		//options.from 有menu button两个值
		//options.channel 分享为空‘’， 拍抖音为‘video’
		console.log(TAG, "onShareAppMessage options:", options)
		let path = '/' + this.$mp.page.route
		console.log(TAG, 'onShareAppMessage path:', path)
		let title = "进入"
		let finalParam = {
			title: title,
			path: path
		}
		
		if ('button' == options.from && 'video' == options.channel) {
		}
		console.log(TAG, 'onShareAppMessage finalParam：', finalParam)
		return finalParam
	},
	methods: {
	}
}

然后在 main.js app入口文件中混入这个js 方法
import Share from ‘modules/mod_account/Share’
Vue.mixin(Share)
不了解混入机制的参考：(https://blog.csdn.net/qq_41809113/article/details/121912330)

需要重写的在对应vue文件的data 同级下重写onShareAppMessage方法即可
onShareAppMessage(options) {
console.log(TAG,“onShareAppMessage 点击options:” , options)
},