您现在的位置是:网站首页>前端技术>VueVue

uniapp H5实现公众号分享封装并跳转回原页面

神夜2020-01-12 17:33:14Vue1259人已围观文章来源:神夜个人博客

简介uniapp做公众号分享时跳转回原页面功能实在困扰了我很久,终于花了两天时间给他弄出来了,也借鉴了网友的方法,我将其封装了一下,可在需要分享的页面去直接调用即可。

uniapp做公众号分享时跳转回原页面功能实在困扰了我很久,终于花了两天时间给他弄出来了,也借鉴了网友的方法,我将其封装了一下,可在需要分享的页面去直接调用即可。

下面进入正题,实现分享必须要先获取授权签名。这些由后台返回。主要前端要传网址给后台获取签名,获取签名成功后,初始化分享配置。主要是分享连接要转码一下 。然后跳转到static文件夹解码,再跳回原页面。


1、封装的方法在util.js文件 

//分享功能
/** title 标题  desc 描述 link 分享连接 img分享图片 debug 开启调试  **/
const h5share = async (title,desc,link,img,debug) => {
			var url = location.href.split('#')[0]
			const json = await api.apiArray.getSgture({method: 'POST',query:{ url: url}})
			if(json.data.returnCode==0){				
				wx.config({
					debug: debug || false,
					appId: json.data.result.appid,
					timestamp: json.data.result.timestamp,
					nonceStr: json.data.result.noncestr,
					signature: json.data.result.sgture,
					jsApiList: [ 						
						'updateAppMessageShareData', // 配置分享好友
						'updateTimelineShareData', // 配置分享朋友圈					
					],
				})
				wx.ready(function(){ 	 		
					let links = api.apiUrl+'/static/share.html?shareUrl='+encodeURIComponent(api.apiUrl+'/#/'+link);	
					if(title==""){ title="镇报"}
					if(desc==""){ desc = '本地一站式便民资讯平台'}
					wx.updateAppMessageShareData({
								title:title,
								desc:desc,
								link:links,
								imgUrl:img, 
					})
					wx.updateTimelineShareData({
							title:title, 
							link:links,
							imgUrl:img
					})
				})
			}
}


2、在.vue页面调用


let url = 'pages/act/index?isshare=true'; //分享URL ,isshare=true 是表示分享进入页面的,可判断 是分享进入的 这时可做一些显示 返回首页 的操作。因为分享进来你点击返回可能就不起作用了。
util.h5share('分享标题','分享描述',url,'分享图片');


3、在项目根目录 static/share.html 下面建一个静态文件 share.html 内容如下:






站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:194条
  • 微信公众号:扫描二维码,关注我们
分享按钮