小程序分享功能记录;小程序页面分享给好友携带参数

您所在的位置:网站首页 抖音下载链接分享给好友 小程序分享功能记录;小程序页面分享给好友携带参数

小程序分享功能记录;小程序页面分享给好友携带参数

2024-07-10 03:50| 来源: 网络整理| 查看: 265

需求: 现有首页index和新增车辆页add-car。 正常操作流程是:从首页index点击按钮,会携带参数id跳转到新增车辆页add-car。 现在需求是用户A从首页index携带参数id跳转到新增车辆页add-car,在add-car页面点击分享按钮,将次页面发送给微信好友(被分享者B); 微信好友(被分享者B)点击分享卡片直接打开新增车辆页add-car,然后上传信息图片,点击下一步,传递参数id调用接口。完成操作。

问题: 1.因为是将新增车辆页add-car分享给用户打开新增车辆页add-car,微信好友(被分享者B)如何获取到用户A传递的参数id就是一个问题。 2.分享页面给微信好友(被分享者B),微信好友(被分享者B)点击时候报提示:开发版小程序已过期,请在开发者工具中重新扫码;(导致原因: 这是因为你在本地测试环境分享给好友,好友没有扫码,也没有开发权限。导致的好友打不开,部署生产环境是不会有这个问题的。)

注意点: 1.onShareAppMessage(res){} 方法,在此方法内是可以配置分享哪个页面和传递参数。 2.如果只是写了 分享 ,那么点击这个分享按钮是可以直接分享本页面的。但是就没办法触发分享别的页面,同时小程序的右上角的三个点点点…,点击打开 那个默认分享事件也是不可选的。

一、首页index代码:点击跳转按钮需要向新增车辆页add-car传递参数id

点击跳转的按钮事件:

addCar(item) { // 这一步是为了存入客户id 然后在添加车辆页面 通过option 拿到customer_id使用 uni.setStorageSync('customer_id', item.id); let obj = { item: {id: uni.getStorageSync('customer_id')}, typeValue: "add", title: "新增车辆", }; uni.navigateTo({ url: "/pagesA/add-car?obj= " + encodeURIComponent(JSON.stringify(obj)), }); },

二、新增车辆页面add-car: 此页面存在分享按钮,分享的也是此页面,好友打开后可以获取到对应的customer_id; (同理如果想要携带分享者既用户A的相关信息,例如登录的信息cookie等,也可以通过分享页path字符串和getStorageSync配合传参以及获取参数)

html:只需写入此按钮

分享

data:

flagShare: true,//在正常流程首页到新增车辆页是true 在分享卡片打开页是false

js部分:

onLoad(option) { const obj = JSON.parse(decodeURIComponent(option.obj)); this.picObj.customer_id = obj.item.id // if else是为了判断当前add-car页是通过首页index打开的 还是通过点击分享卡片打开的 // 判断的依据就是路径path携带的参数(在index页是不传递share属性 但是分享页分享出去的 是传递了share属性对的) if (obj.item.share) { this.flagShare = false console.log('分享页打开'); // 如果想要被分享者1 将此页面分享给另一个用户(被分享者2)同时传递id 那么就需要在被分享者1的缓存中存入id(既下方注释) 这样在被分享者1点击分享时候 onShareAppMessage才能获取到id进行传递 // uni.setStorageSync('customer_id', this.picObj.customer_id); } else { this.flagShare = true console.log('默认首页操作进来'); } }, // 加了此方法,才能点击分享按钮或者右上角的分享三个小点 ... onShareAppMessage(res) { let obj = { item: { id: uni.getStorageSync('customer_id'), share: true }, typeValue: "add", title: "新增车辆", }; if (res.from === 'button') {// 来自页面内分享按钮 console.log(res.target) } // 向分享页面传参 通过字符串路径即可(在对应的分享页的onLoad获取即可) return { title: '尊敬的车主,请您上传证件!', path: "/pagesA/add-car?obj= " + encodeURIComponent(JSON.stringify(obj)), } },

三、各页面

首页index: 在这里插入图片描述

新增车辆add-car页:

在这里插入图片描述

点击发送分享按钮:

在这里插入图片描述

好友点击分享卡片打开报: 开发版小程序已过期,请在开发者工具中重新扫码(问题截图,此问题不用管,生产环境部署好,直接看生产环境的不会有此问题)

在这里插入图片描述

线上 生产环境被分享者(用户B)点击分享卡片打开的页面: 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3