阅读 176

uniapp开发H5分享好友朋友圈 | 8月更文挑战

这是我参与8月更文挑战的第23天,活动详情查看:8月更文挑战

最近在写这个,弄了好久才解决,现在记录下,主要是微信公众号分享好友,然后好友通过连接点进去看详情,这里涉及进去后如果没登录就要进行登录,登录了就可以直接看。

一、接入sdk

1、全局引入sdk,先把sdk下载下来,然后放在本地工具文件夹下,在main.js里引入就可以全局使用了。下载地址

//main.js
// #ifdef H5
	import wx from '@/utils/jweixin-1.6.0.js';
	Vue.prototype.$wx = wx;
// #endif
复制代码

我是直接点击链接后复制内容到本地js文件里粘贴的。

二、配置权限

1、在需要分享的页面,配置权限,需要后端提供接口来获取配置信息。

这里也有个重要的点,就是**appid一定要一致,微信平台一定要有权限分享,配置了安全域名,IP白名单等,如果还是提示没权限就要问后端是不是签名写的有问题,**我这个一开始就是后端的问题,自己弄了一天!

在onLoad里写入:

onLoad(options) {
	let _this = this;

	// #ifdef H5
	uni.request({
	    url: getApp().globalData.serverUrl+'/sharewx',
	    method: 'GET',
	    data: {
			token: getApp().globalData.token,
			appId: getApp().globalData.appid,
			url: window.location.href //!这里必须是这个,不然就没用!
		}, 
	    success: (res) => {
			let result = res.data.data;
			_this.$wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: result.appId, // 必填,公众号的唯一标识				timestamp: result.timestamp, // 必填,生成签名的时间戳
				nonceStr: result.nonceStr, // 必填,生成签名的随机串
				signature: result.signature,// 必填,签名
				jsApiList: ["updateTimelineShareData","updateAppMessageShareData"] // 必填,需要使用的JS接口列表
			});
	    }
	});
	// #endif	
},
复制代码
  • 通过调用后端接口获取签名,appid,时间戳,随机字符串等信息,对了,这里调接口传的url,可以试试需不需要encodeURIComponent,我这里不需要也可以,如果接口返回错误就自己加encodeURIComponent(window.location.href)加编码再传。

  • 配置jsApiList权限:updateTimelineShareData这个是分享朋友圈,updateAppMessageShareData这个是分享好友的。

  • 权限配置,调试的时候吧debug设置为true,无论成功与否都会弹框提示,成功就提示eMsg: ok,否则就会提示很长一串没权限的。

这个弹框就是启用了debug模式,然后我这个是因为调接口传的url不是当前页面全地址,后来改成了window.location.href就好了。

注意:请求后台接口的时候,传递的url必须是当前全连接,不然会失效,之前我自己写死了,试了大半天,就是没权限,发现不能写死!!!但是这个在开发工具里是可以分享的,但是真机上不行,所以一定要写window.location.href,网上搜了那么多都没有着重提示这个的!

onShow() {
	// #ifdef H5
	setTimeout(()=> {
		this.wxShare();
	},500)
	// #endif	
},
methods: {
	wxShare() {
		let _this = this;
		_this.$wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
			_this.$wx.updateAppMessageShareData({ 
				title: '分享标题', // 分享标题
				desc: '分享邀请', // 分享描述
				link: 'https://abc.com#pages/classroom/classroom?orderId='+_this.orderId, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: "https://stu.acoer.cn/guoshiBgImg/loginIcon.png", // 分享图标,这个必须要写https,不然会提示
				success: function () {
				  // 设置成功
				}
			})
		});	
	}
}
复制代码

然后在onShow生命周期里调用方法,我写setTimeout就是害怕onLoad加载慢就执行了onShow,wxShare这个方法也可以用来放在点击事件里,我的是静默加载的。

三、进入页面判断是否登录进入详情

第二步我在link里传入了orderId,现在好友如果点开链接要获取orderId,一开始以为要从链接里截取,发现并不需要,而且在开发工具里获取参数(window.location.search)都拿不到!没想到可以直接在App.vue中的onLaunch生命周期的options里获取到:

onLaunch: function(options) {
	console.log(options)
	let _this = this;
	// #ifdef H5
		if (options.query.orderId && options.query.orderId != undefined) {
			let orderId = options.query.orderId;
			_this.globalData.orderNum = orderId;
			uni.setStorage({
				key: 'orderId',
				data: orderId
			});
		}
	// #endif	
	})
	
},
onShow: function() {
	let _this = this;
	uni.getStorage({
	    key: 'token',
	    success: function (res) {
	        _this.globalData.token = res.data;
			if(res.data && _this.globalData.orderNum && _this.globalData.orderNum != '') {
				setTimeout(()=> {
					uni.navigateTo({
					    url: '/pages/orderInfo/orderInfo?orderId='+_this.globalData.orderNum
					});
				},1500)
			}else {
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}
	    }
	});
},
复制代码

然后在onShow生命周期里获取token然后判断进行相应的跳转就好啦,如果没有token就跳转到login页面,只要能拿到orderId就好操作了。

就这点代码写了我一两天,被该死的权限弄得烦躁!现在还是很有成就感的,哈哈。

文章分类
前端
文章标签