uni-app 引入Vue-mixin方法鉴权

mixin是一种类,在vue中就是js文件,主要的作用是作为功能模块引用

步骤:

  1. 定义mixin混入全局鉴权方法

  1. 组件onShow时检测

mixin/index.js

export default {
  methods: {
    checkAuth () {
      if (!uni.getStorageSync('token')) {
        uni.navigateTo({
          url: '/packone/auth/index'
        })
      }
    }
  },
}

main.js

// 注册mixin
+ import mixins from '@/utils/mixins'

export function createApp () {
    const app = createSSRApp(App);
    app.component('Search', Search);
+    app.mixin(mixins);
    app.use(plugins)
    return {
        app,
    };
}

鉴权的页面中xxx/index.vue

<script>
export default {
  // 页面显示执行该方法
  onShow () {
    this.checkAuth()
  }
};
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni-app中,你可以通过以下步骤来实现自定义底部tabbar: 1. 在main.js文件中添加以下代码段,以解决点击两次才能选择icon的问题: ``` Vue.mixin({ methods: { setTabBarIndex(index) { if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { this.$mp.page.getTabBar().setData({ selected: index }) } } } }) ``` 2. 在index.wxss文件中重新定义tabbar的样式,包括背景、高度、字体大小等。以下是一个例子: ```css .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05); box-sizing: content-box; } .tab-bar-item { flex: auto; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; height: 120rpx; } /* 自定义样式 */ .tab-bar-item.diy { margin-top: 0!important; background: transparent; position: relative; flex: inherit; width: 134rpx; } .tab-bar-item image { width: 48rpx; height: 48rpx; overflow: initial; } .tab-bar-item view { font-size: 24rpx; } .tab-bar-item image.diy { position: absolute; width: 134rpx; height: 140rpx; bottom: 25.6%; z-index: 100; } .tab-bar-item view.diy { margin-top: 90rpx; background: #fff; width: 100%; height: 100%; padding-top: 58rpx; z-index: 99; } ``` 通过以上步骤,你可以在uni-app中实现自定义底部tabbar。使用以上的代码段和样式定义,你可以根据需求自定义底部tabbar的样式和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uni-app-tabbar:uni-app底部初步实现(不支持小程序)](https://download.csdn.net/download/weixin_42172572/15923240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uni-app自定义底部tabbar](https://blog.csdn.net/Janent168/article/details/129809136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不叫虎子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值