uniapp中的分享功能实现(APP,小程序，公众号)

news2025/1/25 4:31:51

uniapp中的分享功能实现(APP,小程序，公众号)

1.APP端的分享

图片替换文本

app端的分享可以直接使用uniapp封装的方法uni.share，uni-app的App引擎已经封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。直接上代码。

<!-- #ifdef APP-PLUS -->
<view class="item" @click="appShare('WXSceneSession')">
	<view class="iconfont icon-weixin3"></view>
	<view class="">微信好友</view>
</view>
<view class="item" @click="appShare('WXSenceTimeline')">
	<view class="iconfont icon-pengyouquan"></view>
	<view class="">微信朋友圈</view>
</view>
<!-- #endif -->


appShare(scene) {
	let that = this
	let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
	let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
	uni.share({
		provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
		scene: scene, //场景，可取值参考下面说明。
		type: 0, //分享形式
		href: `${HTTP_IP_URL}${curRoute}&spread=${that.uid}`, //跳转链接
		title: that.storeInfo.storeName, //分享内容的标题
		summary: that.storeInfo.storeInfo, //分享内容的摘要
		imageUrl: that.storeInfo.image, //图片地址
		success: function(res) {
			that.posters = false; //成功后关闭底部弹框
		},
		fail: function(err) {
			uni.showToast({
				title: '分享失败',
				icon: 'none',
				duration: 2000
			})
			that.posters = false;
		}
	});
},

type 值说明

值

说明

provider支持度

0

图文

weixin、sinaweibo

1

纯文字

weixin、qq

2

图片

weixin、qq

3

音乐

weixin、qq

4

视频

weixin、sinaweibo

5

小程序

weixin

scene 值说明

值

说明

WXSceneSession

分享到聊天界面

WXSenceTimeline

分享到朋友圈

WXSceneFavorite

分享到微信收藏

uni.share 在App端各社交平台分享配置说明

  1. 打开 manifest.json -> App模块权限配置，勾选 Share(分享)；
  2. 按如下文档具体配置微信、微博、QQ的参数

在 manifest.json 的 App SDK 配置里，勾选微信消息及朋友圈，并填写 appid，如需在iOS平台使用还需要配置通用链接。
image

2.小程序端的分享

图片替换文本 小程序中的分享有两种，一种是通过右上角的胶囊分享，还可以通过在页面中写button，通过open-type="share"方式分享。

//onShareAppMessage 分享给朋友
//onShareTimeline  分享到朋友圈
// #ifdef MP
onShareAppMessage: function(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    let that = this;
    return {
    	title:'这是标题',
    	imageUrl: '这是描述',
    	path: '/pages/goods_details/index?id=' + that.id, 
    }
},
// #endif

3.公众号的分享

图片替换文本 公众号中的分享需要使用微信的JS-SDK,可以直接下载js文件引入，也可以通过npm下载。 公众号的分享比较繁琐，我们可以将其封装一下，在需要使用的地方传入对应的title,link和jsapi,就可以简便操作。

新建wechat.js,并在main.js中将其挂载到vue的原型上

// #ifdef H5
import WechatJSSDK from "@/plugin/jweixin-module/index.js";


import {
	getWechatConfig,
	wechatAuth
} from "@/api/public";
import {
	WX_AUTH,
	STATE_KEY,
	LOGINTYPE,
	BACK_URL
} from '@/config/cache';
import {
	parseQuery
} from '@/utils';
import store from '@/store';
import Cache from '@/utils/cache';

class AuthWechat {

	constructor() {
		//微信实例化对象
		this.instance = WechatJSSDK;
		//是否实例化
		this.status = false;

		this.initConfig = {};

	}
	
	isAndroid(){
		let u = navigator.userAgent;
		return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
	}
	
	signLink() {
		if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
			  	window.entryUrl = location.href.split('#')[0]
			}
		return  /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
	}


	/**
	 * 初始化wechat(分享配置)
	 */
	wechat() {
		return new Promise((resolve, reject) => {
			// if (this.status && !this.isAndroid()) return resolve(this.instance);
			getWechatConfig()
				.then(res => {
					this.instance.config(res.data);
					this.initConfig = res.data;
					this.status = true;
					this.instance.ready(() => {
						resolve(this.instance);
					})
				}).catch(err => {
					console.log('微信分享配置失败',err);
					this.status = false;
					reject(err);
				});
		});
	}

	/**
	 * 验证是否初始化
	 */
	verifyInstance() {
		let that = this;
		return new Promise((resolve, reject) => {
			if (that.instance === null && !that.status) {
				that.wechat().then(res => {
					resolve(that.instance);
				}).catch(() => {
					return reject();
				})
			} else {
				return resolve(that.instance);
			}
		})
	}
	// 微信公众号的共享地址
	openAddress() {
		return new Promise((resolve, reject) => {
			this.wechat().then(wx => {
				this.toPromise(wx.openAddress).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			}).catch(err => {
				reject(err);
			})
		});
	}

    // 获取经纬度；
	location(){
		return new Promise((resolve, reject) => {
			this.wechat().then(wx => {
				this.toPromise(wx.getLocation,{type: 'wgs84'}).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			}).catch(err => {
				reject(err);
			})
		});
	} 
	
	// 使用微信内置地图查看位置接口；
	seeLocation(config){
		return new Promise((resolve, reject) => {
			this.wechat().then(wx => {
				this.toPromise(wx.openLocation, config).then(res => {
					resolve(res);
				}).catch(err => {
					reject(err);
				});
			}).catch(err => {
				reject(err);
			})
		});
	}
	
	/**
	 * 微信支付
	 * @param {Object} config
	 */
	pay(config) {
		return new Promise((resolve, reject) => {
			this.wechat().then((wx) => { 
				this.toPromise(wx.chooseWXPay, config).then(res => {
					resolve(res);
				}).catch(res => {
					resolve(res);
				});
			}).catch(res => {
				reject(res);
			});
		});
	}
	
	toPromise(fn, config = {}) {
		return new Promise((resolve, reject) => {
			fn({
				...config,
				success(res) {
					resolve(res);
				},
				fail(err) {
					reject(err);
				},
				complete(err) {
					reject(err);
				},
				cancel(err) {
					reject(err);
				}
			});
		});
	}

	/**
	 * 自动去授权
	 */
	oAuth(snsapiBase,url) {
		if (uni.getStorageSync(WX_AUTH) && store.state.app.token && snsapiBase == 'snsapi_base') return;
		const {
			code
		} = parseQuery();
		if (!code || code == uni.getStorageSync('snsapiCode')){
			return this.toAuth(snsapiBase,url);
		}else{
			if(Cache.has('snsapiKey'))
				return this.auth(code).catch(error=>{
					uni.showToast({
						title:error,
						icon:'none'
					})
				})
		}
	}

	clearAuthStatus() {

	}

	/**
	 * 授权登录获取token
	 * @param {Object} code
	 */
	auth(code) {
		return new Promise((resolve, reject) => {
			wechatAuth(code, Cache.get("spread"))
				.then(({
					data
				}) => {
					resolve(data);
					Cache.set(WX_AUTH, code);
					Cache.clear(STATE_KEY);
					// Cache.clear('spread');
					loginType && Cache.clear(LOGINTYPE);
					
				})
				.catch(reject);
		});
	}

	/**
	 * 获取跳转授权后的地址
	 * @param {Object} appId
	 */
	getAuthUrl(appId,snsapiBase,backUrl) {
		let url = `${location.origin}${backUrl}`
				if(url.indexOf('?') == -1){
							url = url+'?'
						}else{
							url = url+'&'
						}
				const redirect_uri = encodeURIComponent(
					`${url}scope=${snsapiBase}&back_url=` +
					encodeURIComponent(
						encodeURIComponent(
							uni.getStorageSync(BACK_URL) ?
							uni.getStorageSync(BACK_URL) :
							location.pathname + location.search
						)
					)
				);
				uni.removeStorageSync(BACK_URL);
				const state = encodeURIComponent(
					("" + Math.random()).split(".")[1] + "authorizestate"
				);
				uni.setStorageSync(STATE_KEY, state);
				return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
				// if(snsapiBase==='snsapi_base'){
				// 	return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=${state}#wechat_redirect`;
				// }else{
				// 	return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
				// }
    }
	
	/**
	 * 跳转自动登录
	 */
	toAuth(snsapiBase,backUrl) {
		let that = this;
		this.wechat().then(wx => {
			location.href = this.getAuthUrl(that.initConfig.appId,snsapiBase,backUrl);
		})
	}

	/**
	 * 绑定事件
	 * @param {Object} name 事件名
	 * @param {Object} config 参数
	 */
	wechatEvevt(name, config) {
		let that = this;
		return new Promise((resolve, reject) => {
			let configDefault = {
				fail(res) {
					if (that.instance) return reject({
						is_ready: true,
						wx: that.instance
					});
					that.verifyInstance().then(wx => {
						return reject({
							is_ready: true,
							wx: wx
						});
					})
				},
				success(res) {
					return resolve(res,2222);
				}
			};
			Object.assign(configDefault, config);
			that.wechat().then(wx => {
				if (typeof name === 'object') {
					name.forEach(item => {
						wx[item] && wx[item](configDefault)
					})
				} else {
					wx[name] && wx[name](configDefault)
				}
			})
		});
	}
	isWeixin() {
		return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
	}
}

export default new AuthWechat();
// #endif

在需要使用的地方：

// 微信分享；
	setOpenShare: function(data) {
		let that = this;
		if (that.$wechat.isWeixin()) {
			let configAppMessage = {
				desc: data.synopsis,
				title: data.title,
				link: location.href,
				imgUrl: data.img
			};
			that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
				configAppMessage);
		}
	},

微信公众号环境中点击右上角三个点就可以分享，所以setOpenShare事件可以提前让他执行，如果需要通过自定义方式通过按钮点击分享，可以将setOpenShare事件放在按钮的点击事件里面。

h5示例: CRMEB-JAVA.
gitee开源地址: CRMEB-JAVA.
都看到这里了，点击上面gitee链接给个star吧

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407831.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Web前端】一文带你吃透CSS(上篇)

【Web前端】一文带你吃透CSS(上篇)

前端学习路线小总结： 基础入门：HTML CSS JavaScript三大主流框架：VUE REACT Angular深入学习：小程序 Node jQuery TypeScript 前端工程化一起学习CSS吧! 一.CSS简介1.什么是CSS？二.CSS语法1.语法规则2.注释三.CSS选择器
阅读更多...
Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程

Vue打包后加载太慢，访问时间太久，记录项目的整个优化过程

问题背景 最近在做一个Vue项目时&#xff0c;在打包上线的时候发现项目部署完第一次访问时间特别慢&#xff0c;整个登录页面加载用了8-10秒&#xff0c;很明显这个速度达不到项目上线的要求&#xff0c;于是开始了对项目打包之后增快加载速度的研究。 未优化前的项目加载时间…
阅读更多...
Vue3 响应式原理

Vue3 响应式原理

响应式原理 Vue2 使用的是 Object.defineProperty Vue3 使用的是 Proxy 2.0的不足 对象只能劫持 设置好的数据&#xff0c;新增的数据需要Vue.Set(xxx) 数组只能操作七种方法&#xff0c;修改某一项值无法劫持。 reactive和effect的实现 export const reactive <T e…
阅读更多...
Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.

Vue 解决报错 You are using the runtime-only build of Vue where the template compiler is not available.

报错信息 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 您正在使用Vue的仅运行时版本，并而模板编译器不可用。 可…
阅读更多...
手把手教你如何对接支付宝支付接口（奶爸级别）

手把手教你如何对接支付宝支付接口（奶爸级别）

支付宝支付接口步骤&#xff1a;第一步&#xff1a;第二步&#xff1a;如何让支付宝将付款成功的通知&#xff0c;回调到你本机&#xff0c;我使用的是内网穿透&#xff1a;Natapp步骤&#xff1a; 第一步&#xff1a;准备支付宝相关的参数&#xff0c;如appId、公私钥 第二步…
阅读更多...
vite中静态资源（css、img、svg等）的加载机制及其相关配置

vite中静态资源（css、img、svg等）的加载机制及其相关配置

什么是静态资源&#xff1f; 简单来说&#xff0c;我们开发完一个项目后&#xff0c;需要把它打包&#xff08;一般是dist文件夹&#xff09;&#xff0c;并部署在服务器上。那么&#xff0c;这个打包后的dist文件夹都是静态资源&#xff1b;在我们写项目时&#xff0c;图片、…
阅读更多...
JS类型转换

JS类型转换

JS中的类型转换方式一般分为三类&#xff1a;转为String型&#xff0c;转为数字型&#xff0c;转为布尔型。 一.转为String型 1.toString() 通过变量.toString()可以将其他类型的变量转换为字符串型&#xff08;null和undefined没有toString()方法&#xff09; let age 18;…
阅读更多...
如何运行vue项目

如何运行vue项目

一、 1、下载node.js 安装完成后分别在cmd中执行node -v查看是否安装成功&#xff0c;出现版本号就安装成功了 2、安装 webpack npm install webpack -g 安装完成后分别在cmd中执行npm -v查看是否安装成功&#xff0c;出现版本号就安装成功了 3、安装vue-cli脚手架 cnpm i…
阅读更多...
【vue3】使用canvas

【vue3】使用canvas

canvas是什么&#xff1f; 一个html5支持的新标签&#xff0c;见名知意&#xff0c;canvas就是画板的意思&#xff0c;可以在canvas上画画。css画三角形很简单&#xff0c;但是要画五角星呢&#xff0c;不妨试试canvas。 在html中使用canvas 1、canvas是html5中的一个标签。…
阅读更多...
前端之CSS

前端之CSS

目录 一.CSS是什么 二.CSS的基本语法规范 三.CSS的引入方式 1.内部样式 2.内联样式 3.外部样式 四.CSS的基本用法 1.基础选择器 1.1 标签选择器 1.2 类选择器 1.3 id选择器 1.4 通配符选择器 2.复合选择器 2.1 后代选择器 2.2 子选择器 2.3 并集选择器 2.4 伪类…
阅读更多...
【实战篇】最详细的Rollup打包项目教程

【实战篇】最详细的Rollup打包项目教程

介绍 本文带你一起使用 Rollup 打包项目&#xff0c;实现以下功能&#xff1a; 自动将 dependencies 依赖声明为 externals支持处理外部 npm 依赖支持基于 CommonJS 模块引入支持 typescript&#xff0c;并导出声明文件支持 scss&#xff0c;并添加前缀支持自动清除调试代码打…
阅读更多...
怒肝最新保姆级前端学习路线，速成贴心全面！

怒肝最新保姆级前端学习路线，速成贴心全面！

这份学习路线并不完美&#xff0c;也不会有最终形态&#xff0c;正如前端不可预见、永无止境的未来。 大家好&#xff0c;我是鱼皮&#xff0c;肝了几天终于完成了这份保姆级前端学习路线。 &#x1f482; &#x1f4bb; &#x1f474;&#x1f3fd; 先放一张图&#xff1a…
阅读更多...
JS原型与原型链详细解释

JS原型与原型链详细解释

文章目录一、JS原型链简要解释二、JS原型链详细解释1.构造函数2.原型对象3.__proto__4.原型链总结一、JS原型链简要解释 原型是function对象上的一个属性, 它表示构造函数构造出来的对象的共有祖先, 被通过构造函数构造出来的对象上有一个__proto__属性指向该函数的prototype,…
阅读更多...
JSON.parse和JSON.stringify的用法

JSON.parse和JSON.stringify的用法

平时我们在接收后端返回的json对象通常是一个字符串类型的object&#xff0c;所以一般我们要对这个object进行类型转化后&#xff0c;我们才能使用object里面的数据&#xff0c;而这其中涉及到两个必不可少的方法就是JSON.parse和JSON.stringify JSON.parse()JSON.parse()方法将…
阅读更多...
vue 控制元素的显示和隐藏

vue 控制元素的显示和隐藏

方法&#xff1a; 使用 v-if 指令&#xff0c;通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素&#xff1b;使用 v-show 指令&#xff0c;通过设置DOM元素的display样式属性来控制显隐。v-if 指令与 v-show 指令都可以根据值动态控制DOM元素显示隐藏&#xff0…
阅读更多...
文档库开发之-vite打包优化

文档库开发之-vite打包优化

背景 首次进行组件库文档打包&#xff0c;遇到了一些ts打包报错和css打包警告&#xff0c;记录下处理过程。并且发现打包后的主包的体积过大&#xff0c;有一定优化空间 ts报错处理 当时有好奇为什么开发环境下都不报错&#xff0c;构建才产生这么多ts错误。大致猜想可能vite…
阅读更多...
英雄联盟轮播图自动轮播

英雄联盟轮播图自动轮播

六月过去了&#xff0c;七月还会远吗&#xff1f;不知不觉到了六月底的最后一天。你好&#xff0c;七月&#xff01; 大家好&#xff0c;我是小陈陈呀&#xff0c;上次写了一篇英雄联盟轮播图手动轮播&#xff0c;当天晚上有很多大朋友小朋友私信小陈陈&#xff1a;可以在上次…
阅读更多...
【微信小程序】一文读懂页面导航

【微信小程序】一文读懂页面导航

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新了呀&#xff0c;今天的内容是微信小程序的页面导航&#xff0c;非常重要&#xff0c;赶紧拿起小本本记起来呀&#xff01; 文章目录一&#xff0c;页面导…
阅读更多...
【项目问题定位】前端请求不到资源报错ERR_CONTENT_LENGTH_MISMATCH的解决

【项目问题定位】前端请求不到资源报错ERR_CONTENT_LENGTH_MISMATCH的解决

文章目录问题简述问题背景问题定位初始报错定位好像是网络问题ERR_CONTENT_LENGTH_MISMATCH 200 是什么原因&#xff1f;原来是Nginx报错了为何没有权限&#xff1f;nobody的原因问题解决原因总结知识点问题简述 前端页面加载资源时&#xff0c;出现ERR_CONTENT_LENGTH_MISMAT…
阅读更多...
前端异常：“Uncaught SyntaxError: missing ) after argument list“真的只是参数列表后面缺少 “)”？

前端异常：“Uncaught SyntaxError: missing ) after argument list“真的只是参数列表后面缺少 “)”？

案发现场 我们在写JS的时候&#xff0c;有时候报错"Uncaught SyntaxError: missing ) after argument list"&#xff0c;字面翻译过来的意思&#xff1a;语法错误: 参数列表后面缺少 )。 这真的就是缺少括号的意思吗&#xff1f;然而只是真的缺少括号才会出现这样的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023