uniapp 小程序公共组件引用，无需导入和注册，直接使用

已于 2023-03-03 14:55:56 修改
阅读量2.4k 收藏 1
点赞数 2
文章标签： uni-app 小程序 vue.js
于 2023-03-03 14:26:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42859450/article/details/129319303
版权

相关文档链接：https://uniapp.dcloud.net.cn/tutorial/vue-components.html
页面引入组件方式
第一种：传统vue规范
在这里插入图片描述
第二种：通过uni-app的easycom
无需导入组件，无需注册组件，只要按照如下格式创建组件（符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件），创建完成后直接在页面使用
在这里插入图片描述

在这里插入图片描述

mxlWhb
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp项目实践总结(三)全局公共组件和样式以及方法的使用
Guan'Blog
08-30 341
看一下最后的成果展示。以上就是全局注册公共组件、样式和方法的主要内容，有不足之处，请多多指正。
小程序项目 (使用uniapp) 创建主要的组件
奇奇的博客
06-18 2248
小程序项目 (使用uniapp) 创建主要的组件
【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！
cv1002420186的博客
07-04 4833
【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！
uni-app组件概述，内置组件(视图容器)(一)
最新发布
chengcheng9876的博客
07-19 1115
uni-app组件概述，内置组件(视图容器)(一)
uni-app 组件无需注册即可使用
矩阵的乘法
09-24 2798
在看别人写好的demo中发现，在components文件下自定义了组件，页面中没有注册就使用了？？what？没有注册？ 后来，查看uni-app的官方文档uni-app官网 发现，原来是easycom在起作用。我们只需自定义组件安装在项目的components目录下，并符合 components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 ...
基于uniapp的简单自定义公共组件mz-header-tab-tab
在无知中学习，在学习中成长，在成长中学习
02-03 608
基于uniapp的简单自定义公共组件mz-header-tab-tab
uni-app实现加载公用组件的封装
Front小思的博客
07-05 5976
App启动时可以根据业务需求添加加载进入~~，下面自己封装一个可全局使用的加载组件。 创建组件：components/view-loader.vue <template> <view> <view class="fidex-loang" v-if="myloader"> <view class="jiazai-view"> <image class="loang-jiazai" src="https://timgsa.baidu..
uniapp 小程序注册全局弹窗组件（无需引入，无需写标签）
coding...
07-13 860
由于uniapp没有开放根节点，所以一般情况下通过app.components注册，在需要的页面直接写组件标签，但是如果每个页面都需要的话，再每个都加的话会非常的麻烦，于是这里采用vite插件实现，这里满足uniapp+Vue3+vite。
uniapp小程序瀑布流组件包
02-01
【uniapp小程序瀑布流组件包】是一个专门为uniapp框架设计的用于实现瀑布流布局的组件集合。uniapp是一个跨端开发框架，它允许开发者编写一次代码，就能在多个平台上运行，如微信小程序、H5、App等。这个组件包简化...
微信小程序uniapp日历组件
08-10
微信小程序uniapp日历组件是开发者常用的一种交互元素，它...通过理解uniapp框架、微信小程序的基础知识，以及组件的引入、使用、自定义和优化，我们可以创建出满足不同需求的日历功能，提升用户在小程序中的交互体验。
解决uniapp开发抖音小程序video-player覆盖问题，超详细教程，前端相关操作，已成功上线产品
03-28
在uniapp框架中进行抖音小程序开发时，可能会遇到video-player组件覆盖问题，这通常是由于布局、样式冲突或者组件配置不当导致的。本教程将详细解析如何解决这一问题，并且已经成功应用于上线产品，确保方法的有效性...
uniapp房贷计算器小程序源码包
08-12
【uniapp房贷计算器小程序源码包】是一款专为QQ和微信小程序设计的房贷计算工具，其核心是基于uni-app框架构建。uni-app是一款多端开发框架，它允许开发者使用一套代码，实现跨平台的开发，覆盖了iOS、Android、H5、...
【uniapp】封装返回顶部的公共组件
乔的博客
11-25 1020
1.根目录components文件里，创建totop文件、totop.vue页面 <template> <view class="page"> <view class="btn" @tap="toTop" :style="{'display':(isTop===false? 'none':'block')}"> <tui-icon name="arrowup" :size="32" color="#fff" ></tui-icon> .
vue uni-app 公共组件封装，防止每个页面重复导入
文明老司机
06-03 4207
1.公共插件 实现目标，将公共组件或者网络请求直接在this中调用，不需要再页面引用 #例如网络请求 var _this = this; this.api.userInfo({ token: '' } #通用工具 _this.utils.showBoxFunNot("是否退出登陆", function() { console.log("确定") _this.api.logOut({}, function(data) { _this.ut
uniapp公共组件,自定义组件自动导入
zhw_1219的博客
06-09 311
uniapp公共组件,自定义组件自动导入
uniapp引入小程序原生插件
dan_seek的博客
09-14 3540
怎么在uniapp中使用微信小程序原生插件，以收钱吧支付插件为例。
vue，uni-app倒计时公共组件 封装，倒计时组件
奔跑的搬运工
09-16 646
倒计时组件，uni-app 倒计时组件
uniapp引入公共自定义组件（easycom组件规范）
Xuhai0811的博客
07-13 580
例： /components/demo/demo.vue 目录下。传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。就可以不用引用、注册，直接在页面中使用。只要组件安装在项目的。
uniapp微信小程序使用three.js导入gltf模型包
07-09
在uniapp微信小程序中使用three.js导入gltf模型包，你可以按照以下步骤进行操作： 1. 将gltf模型文件放置在uniapp项目的静态资源目录中，比如`static/models`。 2. 在uniapp页面或组件的js文件中引入three.js库和GLTFLoader。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; ``` 3. 创建一个canvas元素作为渲染器的渲染目标。 ```html <template> <canvas id="canvas"></canvas> </template> ``` 4. 在mounted钩子函数中编写加载和渲染模型的代码。 ```javascript mounted() { const canvas = document.getElementById('canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); camera.position.z = 5; const loader = new GLTFLoader(); loader.load('../../static/models/model.gltf', (gltf) => { const model = gltf.scene; scene.add(model); // 设置模型的初始位置、旋转等属性 model.position.set(0, 0, 0); model.rotation.set(0, 0, 0); model.scale.set(1, 1, 1); }); function animate() { requestAnimationFrame(animate); // 更新模型、相机等状态 renderer.render(scene, camera); } animate(); } ``` 请确保将`../../static/models/model.gltf`替换为你实际的模型文件路径。 这样，当页面或组件加载后，就会渲染gltf模型在canvas上。 希望对你有所帮助！如有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值