uni开发微信小程序解决全局分享分销问题

1. 需求

1.小程序内每个页面都要打开胶囊分享按钮并实现分销
2.分享功能应该是在用户登录之后才予以打开
3.不想做在每个页面都写分享钩子的傻逼操作

2.实现

1.技术点：
vueX 、 Vue.mixin 、路由监听（uni.onAppRoute）、 async await
2.实现思路：
用户登录后立即获取分销 parentId 置入state 或者挂载原型备用 == >> ; 使用mixin混入打开分享按钮
、监听路由并重写分享钩子
3.代码

//此处是在登陆完成后的操作 ； 分享信息中使用了 async await 保证正确加载信息
//登录成功的话就请求分享信息全局使用  &&  表示可以打开全局分享了 !!!FUN.shareUP({ //调起分享方法 == >> 配置分享信息置入state 的 share中commit,rootState});Vue.mixin({ // 打开分享按钮//同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。  //两次调用 ; 不大行onLoad() {// console.log('注入!=======-=-=-=-=-=-=-')uni.showShareMenu({})},});uni.onAppRoute(function(res) { //在此监听路由//获取加载的页面let pages = getCurrentPages(),//获取当前页面的对象view = pages[pages.length - 1],data;if (view) {console.log('监听路由')// console.log(view)data = view.data;// console.log(data)console.log('是否重写分享方法', data.isOverShare ? '是!' : '否!'); //这里  首次渲染的时候没有打开 ; 首次切换路由的时候也没打开 !! 03 14 // 监听路由?if (!data.isOverShare) {data.isOverShare = true;// console.log(data)view.onShareAppMessage = function() {console.log(_this.share)//分享配置return {..._this.share};};console.log(view)}}});
//整理分享信息 at vuex中//分享async shareUP({commit,rootState}) {//请求文案let imageUrl;await FUN.GetShareImg().then((val) => {imageUrl = val; //这里实际上是写上了 ; 不用管了 ;});console.log(imageUrl)$http.get('yourUrl', {params: {}}).then(res => {// console.log(res.data.data.shareId) // || shareName//分享的父级IDlet shareId = res.data.data.shareId;//分享的父级名称let shareName = res.data.data.shareName;let share = {title: '来自' + shareName + '的分享',desc: '标题',//封面ID?imageUrl: imageUrl,//分享的路径接收一个传入字符串path: `pages/index/index?parentId=${shareId}`,}//派发commit(SHARE, share);//分享信息也写入原型一份 ; 方便调用_this.share = share;// console.log(_this);if (res.data.resultSign == 0) {// console.log('确实获得了分享信息;')}}).catch(err => {console.log(err)});},
//获取到分享文案  at vuex
async GetShareImg() {let pageImgawait $http.get('yourUrl', {params: {}}).then(res => {pageImg = _this.URL + res.data.data.pageImg;})return pageImg},

3.注意事项

单个商品的分享分销功能要单独处理
因为混入的原因 、  初始化函数会执行两次 但是网路请求只发送了一次 ；性能应该不会损耗
//同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 == 官网
关键页不允许打开分享怎么办？
监听路由的方法是借鉴的

uni开发微信小程序解决全局分享分销问题相关推荐

uni开发微信小程序自定义相机自动检测(人像+身份证)
之前开发过微信小程序自定义相机拍照检测人像和身份证检测.一直期望写篇文章记录一下,趁现在有点时间,总结一下. 需求点: 1.能够自定拍摄人像 2.能够自动拍摄身份证正面照 3.识别身份证并且和人脸照比 ...
uni开发微信小程序openDocument:fail filetype not supported
官方文档上显示:微信小程序非必填,于是我没填,然后就一直报错... 一直没找到原因,直到看了wx的是需要加上一个fileType. 加上就可以了,一步步的排错: uni.downloadFile({u ...
【微信小程序】全局分享和页面分享
全局分享 App({onShareAppMessage() {wx.onAppRoute(() => {console.log('当前页面路由发生变化触发该事件onShareAppMessag ...
uni-app.10.开发微信小程序的一些小操作
开发微信小程序的一些小操作退出小程序使用场景解决方案 navigator 具体使用参考资料隐藏主页按钮使用场景解决方案 uni.hideHomeButton 参考资料微信小程序分享解 ...
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
uniapp开发微信小程序分享功能
记一次uniapp开发微信小程序遇到的问题, 问题: 关于button的分享属性, 在HbuilderX中开发时,直接将button覆盖在image上,将button设置为透明,可以直接实现分享功能, ...
解决uniapp开发微信小程序预览pdf文件ios\安卓兼容问题
问题项目需要用uniapp来开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打不开的 ...
使用mpvue开发微信小程序——音乐小程序项目源码分享
文章最后更新(2019-04-06) github最后更新(2019-04-09) 前言: 最近小组有个微信小程序分享的环节,于是在业余时间使用mpvue框架写了个音乐小程序,时间有限,之后有时间会继 ...

uni开发微信小程序解决全局分享分销问题

uni开发微信小程序解决全局分享分销问题

1. 需求

2.实现

3.注意事项

uni开发微信小程序解决全局分享分销问题相关推荐

最新文章

热门文章