邀请有礼(小程序和web端)

it2023-06-25  88

一、小程序端

小程序端邀请一般分为小程序右上角转发邀请和小程序码邀请

1.小程序右上角邀请

invite.wxml

<button class="invite-btn canDisabledButton" open-type="share">立即邀请微信好友</button>

 invite.js

/** * 用户点击右上角分享 */ onShareAppMessage: function () { return { title:"欢迎来到光临", // imageUrl: "",//如果配置imageUrl分享出去图片就为此图,没有配置显示当前页面样式 path: '/pages/index/index?refereeId='+ this.data.memberId,//分享出去带的参数,这个直接按页面跳转的方式在指定页面接收参数就行 success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } }

index.js

//在index页面接收跳转所带过来的参数 onLoad: function (options) { if (options.refereeId) { // 邀请有礼 app.globalData.refereeId = options.refereeId //如果只是在本页面使用可以直接使用,在其他页面使用放在全局变量或者缓存里面在需要的地方使用 } },

2.小程序邀请码

小程序码通过后端调用微信api生成小程序码,微信文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9,要注意的是生成小程序码数量无限制的接口页面参数限制了32个字符

通过小程序码中page页面所配置的扫码调到小程序正式版,开发过程中可以先发一版正式版用来生成小程序码,调试可以使用上传文件解析二维码的方式进行调试

这是小程序码配置跳转的页面:

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { if(decodeURIComponent(options.scene)){ //decodeURIComponent(options.scene)为小程序码中所带的参数,用decodeURIComponent解析,否则参数可能会多出两位24之类的,然后就可以对小程序码中带过来的参数进行操作//进行全局或者缓存存储,或者直接操作 } },

二、web端

web端的邀请链接一般都是拼在路由上面的,例如:http://****/#/recruitdetails/34?code=acf08df984a24e859c93122e183a008c

?后code则为邀请码,被邀请人复制这个邀请链接进指定路由页面

拿拼接在路由后面的code:

this.$route.query.code //拿到邀请码code,如果只是在本页面使用可以直接使用,在其他页面使用可以放在Vuex里面或者本地缓存里面

注意的一点是链接中的code可能存在用户手动修改,或者后台设置的一次性code,存在code失效或code错误的情况

如果是这样的放Vuex和缓存里的就要清掉,如果直接在这个链接下面的就要清掉路由链接里的参数

//这里放两种清空路由里code的方法 //1. let path = this.$route.path; //先获取路由路径 this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了 //2. this.$router.push({ query: {} }); //清除完上方的链接就变成http://****/#/recruitdetails/34,?后面的清除掉了

 

最新回复(0)