uniapp JS文件里面调用自定义组件（不用每个页面在template中加组件标签）

置顶 已于 2023-10-18 11:11:01 修改
阅读量2.3k 收藏 5
点赞数 4
分类专栏： uniapp 文章标签： uni-app 经验分享 微信小程序
于 2023-07-23 12:17:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/everMrzhong/article/details/131878068
版权
在uniapp（Vue2）开发微信小程序时，利用Vue.component进行全局注册组件，实现无需在每个页面模板中添加自定义组件（如授权登录弹窗authorized.vue）也能在任何页面调用的功能。主要步骤包括组件封装、创建vue.config.js配置、全局注册组件和通过js调用组件。测试结果显示该方法适用于小程序，对于app端可能存在不兼容问题，建议尝试使用Vue.extend进行全局挂载。
摘要由CSDN通过智能技术生成

前言
工具：uniapp ( Vue2 )
开发端：微信小程序
其他：uview 2.0
场景：路由器里面，统一验证是否已登录，如果没登录，则直接弹出登录弹窗出来，不管哪个页面都可以直接弹出此组件不需每个页面去加入组件标签。 效果如下：
在这里插入图片描述
直接上代码：

第一步：组件封装 components目录下-新建文件-authorized.vue
（平常怎么封装的组件就怎么封装 建议把组件放到components目录下面） 需要的自己拿去改

<template>
	<view>
		<!-- 授权组件 -->
		<u-popup ref
了解本专栏 订阅专栏 解锁全文 超级会员免费看
高桥留
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
专栏目录
订阅专栏
uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件（解决小程序、APP 无法使用 document.body.appendChild 插入组件节点）适配全端
王佳斌
08-05 1万+
uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件（解决小程序、APP 无法使用 document.body.appendChild 插入组件节点）适配全端，uni-app appendChild 怎么向小程序中插入节点，如何开发类似uni.showModal 全局组件 。h5端可以通过 document.body.appendChild 挂载，请问app跟微信小程序怎么弄，请问uniapp如何封装全局api调用弹窗组件？uniapp怎么设置所有页面共用的组件Uni
uniapp 微信小程序 纯js文件中引入自定义modal组件（无需所有页面手动引入组件）
weixin_42146610的博客
08-05 2226
工具：uniapp开发端：微信小程序其他：uview 2.0这样用户点击确认按钮就能退出小程序，因此uni.showModel不满足需求，需要用uview的u-model实现，也就是要在js文件中显示自定义组件。以上就是解决方法，亲测有效。......
【uniapp】uniapp 引用 js 组件
wenxueliu的博客
09-09 1549
UniApp作为一款优秀的跨平台开发框架，它可以让我们使用一套代码，并在多个平台上进行编译，从而获得高性能、易扩展和可维护的应用程序。在UniApp开发过程中，我们不仅需要掌握各种UI组件的使用方法，还需要了解如何在项目中引入JS文件。在本文中，我将介绍UniApp中如何引入JS的方法。
uniapp 引用 js 组件的方法(场景分析)
最新发布
aaa123aaasqw的博客
05-27 1254
在UniApp开发中，我们使用的是Vue框架，因此，可以直接在.vue文件中引入JS文件。其中 @ 表示项目根目录，util 是 js 目录下的一个非模块化 js 文件。其中 @ 表示项目根目录，handleDecodedXML 表示导入的方法。
如何用js的方法 调用组件 uniapp（弹框）
m0_49578914的博客
03-31 8558
js调用组件 uniapp 弹框
uni-app的自定义组件
qq_52904412的博客
08-03 5089
uni-app的自定义组件
uniapp-html页面中通过js调用vue方法
Devil_Mr的博客
07-14 736
需要注意的是调用的方法传参的类型和参数数量必须要对应，不然会提示找不到对应的方法。在index.vue中mounted方法内，把被调用的方法暴露在window中。在需要调用的html文件中引入对应的js文件。在js中封装一个方法。
web前端之uniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-16 1948
web前端之uniApp通过JavaScript渲染组件、removeChild、appendChild、require、extend、mount、map
uni-app使用自定义组件
博客
04-14 345
uni-app官网•全局文件•pages.json页面路由•easycom。组件模式：只要组件路径符合规范，就可以直接在页面中使用组件。2.直接在页面中使用组件。
uni-app组件的使用
m0_72725063的博客
03-08 428
可以在uniapp官网里面找到-->教程-->点进去-->找到vue语法-->vue2或者vue3组件点进去-->下方有。
uniapp 封装公共方法(无需每个页面引用,直接调用)
weixin_44805839的博客
07-12 1426
uniapp 封装公共方法
uniapp全局组件全局使用(不在每个页面template使用，仅支持H5)，函数式调用全局组件方法
热门推荐
http://xueshuai.top
08-16 1万+
uniapp全局组件全局使用(不在每个页面template使用，仅支持H5)，函数式调用全局组件方法
uniapp 过滤器过滤html标签
xcdm100的博客
07-07 1174
function(msg) { var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag msg = msg.replace(/[|]*\n/, ''); //去除行尾空格 msg = msg.replace(/&npsp;/gi, ''); //去掉npsp return msg; } ...
uni-app 如何封装js方法，多个页面重复使用
weixin_46166771的博客
11-16 1680
uni-app 如何封装js方法，多个页面重复使用
使用uni-app的组件（基础组件和扩展组件）
博客
04-14 1078
（ 如果指定系统版本，如：npm i sass-loader@10.1.1 -D ）（如果是 vue3 + vite, 无需添加配置）dcloud•插件市场•uni-ui。2.下载插件并导入HbuilderX。uni-app官网•组件•组件概述。uni-app官网•组件•扩展组件。
uniapp的request封装及使用
q12as的博客
11-22 1941
uniapp的request封装1.首先创建一个unit文件，然后创建request.js。2.在api文件中引用。
uniapp中怎么使用easycom 自定义组件
weixin_43743148的博客
05-01 1万+
一、全局注册 uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 Vue.component 的第一个参数必须是静态的字符串。 nvue 页面暂不支持全局组件。 二、局部注册 局部注册之前，在需要引用该组件的页面，导入你想使用的组件。页面引入组件方式分两种： 第一种：传统vue规范 在需要引入自定义组件的 页面中，通过 import 方式引入组件 （导入），在 components 选项中注册你想要使用的组件（引用），在页面中使用自定义组件名称标签
uniapp微信小程序全局所有页面放置一个跳转首页的可以拖动的悬浮按钮
weixin_47211929的博客
04-27 2133
实现拖动的悬浮按钮
uniApp：自定义组件及组件通信
孤安先生的博客，作者主站正在重构中，敬请期待！
07-05 1639
uni-app 中的组件和 Vue 中一样。
uniapp自定义tabbar呈现后页面组件的生命周期不被调用怎么解决
05-17
在自定义tabbar中，页面组件的生命周期确实会受到影响，因为tabbar的切换并不是页面的切换，而是组件的切换。因此，你需要手动监听tabbar的切换事件，在切换时手动调用对应页面组件的生命周期函数。 具体实现可以参考以下步骤： 1. 在App.vue中，监听tabbar组件的切换事件，例如： ```javascript onTabBarChange(index) { this.$refs.tabBar.switchTab(index) this.$refs.pages[index].onShow() } ``` 2. 在自定义tabbar组件中，添加ref属性，例如： ```html <template> <div> <div v-for="(item, index) in tabList" :key="index" @click="switchTab(index)"> {{ item.text }} </div> <slot></slot> </div> </template> <script> export default { data() { return { tabList: [ { text: '首页' }, { text: '分类' }, { text: '我的' } ], activeIndex: 0 } }, methods: { switchTab(index) { this.activeIndex = index this.$emit('change', index) } } } </script> ``` 3. 在每个页面组件中，添加onShow生命周期函数，例如： ```javascript export default { onShow() { console.log('onShow') } } ``` 通过以上步骤，你就可以在自定义tabbar中实现页面组件的生命周期函数的调用了。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

高桥留

打赏更新更快！质量更好！

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

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

打赏作者

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

抵扣说明：

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

余额充值