uView插件使用 u-navbar自定义导航(分享无法返回)

背景分析:uni-app原生导航栏返回是没有问题的,不管是正常打开页面还是分享后的页面,但是无法自定义导航背景色(官网说page-meta标签)但是我尝试了没有效果,所以还是使用的uView组件自定导航栏;
     使用自定义的弊端为:用户分享页面到微信好友后,好友点击分享的页面,点击左上角返回按钮无法返回小程序首页,点击手机自带的返回按钮就直接返回聊天记录了啊啊啊。。。。。就很无语。

解决方案:在自定义导航栏组件外部套一个view标签,并且绑定点击事件,(判断当前页面是否为分享页面,若是则返回首页,否则就按照最先写好的返回事件走就ok)

<view @click="goHome">
            <nav-bar :navbar_title="navBar.title" :leftText="navBar.leftText" :backUrl="navBar.backUrl"
                :urlType="navBar.urlType"></nav-bar>
        </view>

 

onLoad(option) {
            if(option.userId){
                uni.setStorageSync('share_param',option.userId);
            }
            if(option.isShare){ //isShare参数是分享页面时拼接的参数
this.isShare = option.isShare; } },

methods: {
            /* 分享返回首頁 */
            goHome(){
                if(this.isShare){ // 表示当前打开页面是分享页面,返回需要返回小程序首页
                    uni.switchTab({
                        url:"../../pages/index/index"
                    })
                }
            },
}

 

 

share.js

export const shareMixins = {
    data() {
        return {
            shareData: {
                title: '',
                path: '/pages/index/index',
                imageUrl: '',
                content: '',
                desc: '',
            },
        }
    },

    //#ifdef MP-WEIXIN
    onShareAppMessage(res) {
        console.log('onShareAppMessage_res',res);
        if (res.from === 'button') {// 来自页面内分享按钮
          console.log('分享参数',res.target)
        uni.showToast({
            title:JSON.stringify(res.target),
            icon:"none",
            duration:200000000
        })
        }
        return {
            title: this.shareData.title,
            path: this.shareData.path,
            imageUrl: this.shareData.imageUrl,
            content: this.shareData.content,
            desc: this.shareData.desc,
            user_id: this.shareData.user_id,
            success: res => {
            }
        }
    },
    //#endif
    /* 分享到微信好友 */
    onShareAppMessage(res) {
        let _this = this;
        console.log('onShareAppMessage_res==',res);
        const promise = new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    title: _this.shareData.title,
                    path: _this.shareData.path,
                })
            }, 2000)
        })
        return {
            title: this.shareData.title,
            path: '',
            promise
        }
    },
    
    // 分享到朋友圈
    onShareTimeline: function() {
        return {
            title:  this.shareData.title,
            query: '001',
            imageUrl: this.shareData.imageUrl,
        }
    },
    onLoad() {
        let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
        let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
        let _userInfo = this.checkLogin();
        if(_userInfo.id){
            this.shareData.path= currentRoute + '?isShare=true' + '&userId='+_userInfo.id; //已登录
        }else{
            this.shareData.path= currentRoute + '?isShare=true'; // 未登录
        }
    },
    methods:{
        
    }
}

 

 

 

posted on 2022-06-06 11:58  小虾米吖~  阅读(5435)  评论(0编辑  收藏  举报