精华内容
下载资源
问答
  • uniapp 小程序分享功能

    万次阅读 2019-11-12 23:06:42
    最近用uniapp写了一个小程序,之前都是用它来写app的,这次要求兼容微信小程序以及QQ小程序,那肯定就少不了分享这个功能,所以记录下来方便自己以后看,也希望能帮到更多的人 onShareAppMessage: function(e) { ...

    最近用uniapp写了一个小程序,之前都是用它来写app的,这次要求兼容微信小程序以及QQ小程序,那肯定就少不了分享这个功能,所以记录下来方便自己以后看,也希望能帮到更多的人

    onShareAppMessage: function(e) {
    				let title = '恭喜dog.东西获得成功'
    				return {
    					title: title,
    					path: 'pages/cart/exchangeSc'
    				}
    			}
    

    很简单吧,什么都不用设置,在methods中 定义这个函数,小程序右上角三个点中就会出现转发,分享的功能。分享出去的内容描述就是 title 然后返回出去就可以了。

    结果展示:
    在这里插入图片描述

    如果担心用户不会去点右上角分享,想在页面中设置分享,还有第二种方法:

    <button v-if="isMe" class="fx" data-name="shareBtn" open-type="share">分享</button>
    

    这样可以直接调用分享

    展开全文
  • 主要介绍了使用 UniApp 实现小程序的微信登录功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • uniapp 微信小程序全局分享功能

    千次阅读 2021-03-12 13:44:39
    分享业务逻辑 export default { onShareAppMessage(res) { return { path:'/pages/welcome/welcome', success(res) { uni.showToast({ title: '分享成功' }) }, fail(res) { uni....

    思路 在全局配置文件 main.js 文件中配置 全局mixin

    直接上代码

    分享业务逻辑

    export default {
    	onShareAppMessage(res) {
    		return {
    			path:'/pages/welcome/welcome',
    			success(res) {
    				uni.showToast({
    					title: '分享成功'
    				})
    			},
    			fail(res) {
    				uni.showToast({
    					title: '分享失败',
    					icon: 'none'
    				})
    			}
    		}
    	}
    }
    

    main.js 中使用

    import Vue from 'vue'
    import App from './App'
    import store from './store'
    
    import share from './mixins/share.js'
    import './ajax/index.js'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$store = store
    Vue.mixin(share)
    App.mpType = 'app'
    
    const app = new Vue({
    	store,
    	...App
    })
    app.$mount()
    

    题外话

    1 注意自己的文件路径

    2 单个页面有定制化分享业务时 在该页面中重写就好了

    例如

    在home.vue中我有特定的分享业务逻辑

    export default {
    ...
    		onShareAppMessage() {
    			var data = this.info
    			var type = this.type
    			if(type == 0){
    				var path = '/pages/articleDetail/articleDetail?id=' + data.id
    			} else {
    				var path = '/pages/articleDetail/articleDetail?id=' + data.id+'&from=case'
    			}
    			
    			return {
    				title: data.title,
    				// path: '/pages/articleDetail/articleDetail?id=' + data.id
    				path
    			}
    		},
    	}
    ...
    
    展开全文
  • HTML <button open-type="share"></button> JS onShareAppMessage(){ return { title:'测试项目', path:'/Index' } } //与methods同级
    HTML
    <button open-type="share"></button>
    
    
    JS
    onShareAppMessage(){
        return {
             title:'测试项目',
             path:'/Index'
               }
    }  //与methods同级
    
    

    展开全文
  • uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信、QQ、微博的分享SDK,开发者可以直接调用相关功能。可以分享到...

    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吧

    展开全文
  • uni-app - 小程序分享功能

    千次阅读 2020-09-27 17:04:18
    uni-app与小程序分享朋友圈功能实操 1、首先明白,uni-app 与 小程序的工作原理,熟知API文档,在开发中有很大的必要性。[文档:uni-app官方文档] 2、微信朋友圈分享,废话不多说,直接上代码?[小程序API:官方...
  • //设置默认的分享参数 //如果页面不设置share,就触发这个默认的分享 share: { title: ’全局默认标题', path: `/pages/index/index`, //默认跳转首页 imageUrl: '', //可设置默认分享图,不...
  • 1、页内自定义分享 2、页面右上角“…”分享行为 ...uniapp 自定义分享单页面朋友 <button class="fenxiang rounded" open-type="share">分享</button> export default { onShareAppMessage(res) {
  • 微信小程序分享功能、传参、接收参数
  • uniapp 小程序分享海报保存图片踩坑

    千次阅读 2019-08-01 11:00:40
    前言:第一次写的时候,思路。 1:获取权限>...但是在开发小程序开发工具中在图片暂存出现问题,因为开发工具内downloadFile正常,到了手机微信报错,因为只能下载http文件,二手机返回的是“wx...
  • uniapp微信小程序自定义分享按钮

    千次阅读 2020-07-22 14:18:02
    1.在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈并填写相关微信 appkey。 2. 代码里面调用: ...分享</button> <script> export defafult{ onShareAppMessage(res) { return {
  • 1.用户点击右上角分享按钮 /** * 用户点击右上角分享 */ onShareAppMessage: function () { const nickName = uni.getStorageSync('user').nickName ? uni.getStorageSync('user').nickName: '您的好友' ...
  • 主要介绍了uni-app使用微信小程序云函数的步骤示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 小程序uniapp项目之分享好友功能

    千次阅读 2020-06-10 16:19:58
    点击分享好友或者微信好友,都分享给微信好友 二、code 都一样,需要调用微信提供的open-type=“share” <button class="btn share_friends" open-type="share">{{dialogTipInfo.btnTxt}}</button>
  • uniapp接口封装框架、以及答题模板(详情看本人文章标题为:uniapp答题考试框架总结) 喜欢的话可以给个关注给个赞 作者开发不易 给个关注给个赞吧 我会继续努力分享资源的。我也只是一个小白 大神勿喷
  • 业务需求,一个下载按钮...从后台下载文件后,保存到本地,然后打开,让用户分享给好友 uni.downloadFile({ url: '',//这里是文件的下载地址 success: (res) => { if (res.statusCode === 200) { uni.saveFile
  • 微信小程序分享 使用方法: onLoad(){ wx.showShareMenu({ withShareTicket:true, //设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击 menus:["shareAppMessage","shareTimeline"] ...
  • title: '',//分享标题 path: ''//分享页面路径 imageUrl: '',//分享图标 desc:'',//自定义分享描述 } }, //分享朋友圈 onShareTimeline() { }, 二.全局配置 1.创建share.js文件 module.exports = { ...
  • 哪个页面需要分享功能,就放在哪个页面,具体文档地址在这里 ==> 文档地址 // 发送给朋友 onShareAppMessage(){ return { title: '全能簿', // 标题 path: '/pages/index/index', // 要分享的页面 imageUrl...
  • 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实现 1.技术点: vueX 、 Vue.mixin 、 路由监听(uni.onAppRoute)、 async await 2.实现思路: 用户登录后立即获取分销 ...
  • uniapp微信小程序分享

    2021-06-26 14:12:47
    // 微信小程序端 onShareAppMessage(res) { if (res.from === 'button') {// 来自页面内分享按钮 console.log(res) } return { title: '分享标题', path: '/pages/index/index', // 跳转页面
  • 1、uniapp微信小程序分享页面到微信好友 跟onLoad()同级,直接添加代码onShareAppMessage() {} 即可激活微信小程序菜单栏的分享微信好友功能,即转发按钮。 2、uniapp微信小程序分享页面到微信朋友圈 这个...
  • 之前找过插件里面的组件,发现了里面有点问题,添加了常用的功能分享给大家 话不多说,上代码: <template> <view class="signa"> <view class="btn"> <view class="cancel-btn" @...
  • 最近在写微信小程序,写到分享的时候出现了问题,用户从分享点击进入后无法回到首页,退出小程序后再点击进去依然无法回到首页
  • 内容需求: 小程序端生成一个海报,海报内容包括当前授权账号的头像,当前授权账号的邀请码,一张特定图片,分享页面的带对应参数的小程序二维码;生成的海报需要保存到本地 功能方法: 1.前端用canvas绘图转为图片 ...
  • uni-app小程序--授权登录、分享页面

    千次阅读 2019-12-30 15:51:30
    uni-app--授权登录、分享
  • 今天通过一个案例给大家分享微信小程序连续签到7天积分获得功能,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,感兴趣的朋友一起学习吧
  • 创建了一个js,如下 export default{ data(){ return { //设置默认的分享参数 share:{ title:'', path:'/pages/home/home', imageUrl:'', desc:'', conten

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 984
精华内容 393
关键字:

uniapp小程序分享功能