【uniapp】uniapp小程序分享功能(App分享)

文章目录

  • 小程序分享
    • 分享页面(part1)
      • 分享触发
      • 分享跳转页面
    • 分享到朋友圈
      • 开关
      • 触发
  • uniApp分享
    • 分享页面
    • 分享到朋友圈

小程序分享

分享页面(part1)

分享触发

在分享触发的地方,如下函数
onShow()onLoad()同级

onShareAppMessage:function(option){
		const that = this;
		//来自页面按钮内的分享
		if(option.from === 'button'){
			//方法
		}
		return {
			title:'【'+this.companyName+'】'+'正在邀请您加入**!',//分享的标题
			path:'/pages/my/getSessionKey?shareCode='+that.shareCode,//好友点击分享之后跳转的页面/传参数
			imageUrl:"https://img2.woyaogexing.com/2022/12/07/f6980578ce23442940f5c85e29f646f4.jpeg",//分享的图片(地址需要为可访问的图片地址)
		}//一定要返回对象
},

分享跳转页面

在实际开发中,我选择了一个页面作为中间页面,进行参数的接收
用户在点击分享链接的时候,就会先进入这个页面再进行跳转到目标页面,实际也不需要,可以直接在目标页面进行参数接收

<template>
	<view>

	view>
template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs
	} from 'vue';
	import {
		toasting
	} from '../../utils';
	import Api from '../../service/api'
	export default defineComponent({
		name: 'sharePage',
		onLoad(options) {
			this.shareCode = options.shareCode
			uni.setStorageSync('shareCode', this.shareCode)
		},
		onShow(){
			this.ifLogin()
		},
		setup() {
			const state = reactive({
				haveLogin: false,
				shareCode: ''
			})
			const ifLogin = () => {
				uni.navigateTo({
					url: '/pages/my/getSessionKey'
				})
			}
			return {
				...toRefs(state),
				ifLogin,
			}
		}
	})
script>

<style lang="less" scoped>
	.joinButton{
		width: 100%;
		text-align: center;
		button{
			width: 90%;
			background-color: #32a4e6;
			color: #fff;
		}
	}
style>

分享到朋友圈

开关

onLoad(){
    wx.showShareMenu({
		withShareTicket:true,
		menus:["shareAppMessage","shareTimeline"]
	})
}

触发

//小程序分享到朋友圈
onShareTimeline() {
	return {
		title: "分享标题",//标题
		imageUrl: "",//封面
		query:"abc="+this.abc+"&series="+this.series//传递多个参数书写方式,不用写页面位置
	};
}

ps:这里的分享到朋友圈,虽然不需要指定页面,但是默认在其他人访问分享时,是一个单页面,所以这个页面需要进行接口的适配和参数的处理

uniApp分享

小程序中的写法有的在uniapp中可以直接写,例如part1的实现

分享页面

uni.share({
	provider:'weixin',//分享服务提供商(即weixin|qq|sinaweibo)
	scene:"WXSceneSession",//WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
	type:4,//0是文件,4是视频
	title:"分享视频标题",//标题
	summary:"",
	href:"https://xxx.mp4",//分享跳转地址
	mediaUrl:"https://xx.mp4",//分享视频
	imageUrl:"",//分享图片路径(必须是线上可访问图片:http://xxx、https://xxx等)
	success:function(res){
		console.log("success:" + JSON.stringify(res));
	},
	fail:function(err){
		console.log("fail:" + JSON.stringify(err));
	}
})

分享到朋友圈

uni.share({
	provider: 'weixin', //分享服务提供商(即weixin|qq|sinaweibo)
	scene: "WXSceneTimeline", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
	type: 0,//分享文件为0,分享视频为4
	href: "https://xxxxxx.mp4", //分享跳转地址
	title: "文件标题",
	summary: "",
	imageUrl: "", //分享图片路径(必须是线上可访问图片:http://xxx、https://xxx等)
	success: function(res) {
		// console.log("success:" + JSON.stringify(res));
	},
	fail: function(err) {
		// console.log("fail:" + JSON.stringify(err));
	}
});

你可能感兴趣的:(Vue,uni-app,小程序,javascript)