HBuilder X3.4版本中使用uni-app自定义组件

HBuilder X3.4版本中使用uni-app自定义组件

这是我的小程序页面结构

方式一:导入components

1.创建componets文件,并编写你的组件页面

vue 复制代码
<template>
  <view class="my-search-container">
    <!-- 使用 view 组件模拟 input 输入框的样式 -->
    <view class="my-search-box">
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>

2.使用页面import导入和注册组件

javascript 复制代码
<script>
  import MySearch from '@/componets/my-search/my-search.vue'
  export default {
    //组件
    components:{MySearch},
 }
</script>

3.使用组件

vue 复制代码
<template>
  <view>
    <MySearch></MySearch>
  </view>  
</template>
  

方式二:easycom配置

1.在uni_modules下,路径为uni_modules/插件ID/components/组件名称/组件名称.vue

2.在pages.json文件中,设置easycom参数

json 复制代码
"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

更多细节链接:

复制代码
https://en.uniapp.dcloud.io/component/ 

https://en.uniapp.dcloud.io/collocation/pages.html#easycom
相关推荐
街尾杂货店&1 小时前
word属性解释
uni-app
笨笨狗吞噬者11 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
源码集结号13 小时前
一套智慧工地云平台源码,支持监管端、项目管理端,Java+Spring Cloud +UniApp +MySql技术开发
java·mysql·spring cloud·uni-app·源码·智慧工地·成品系统
木易 士心19 小时前
Uni-App 实现多身份动态切换 TabBar 指南
uni-app
2501_915106321 天前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
LoveEate2 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
fakaifa3 天前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
weixin_446938873 天前
uniapp vue-i18n如何使用
前端·vue.js·uni-app
有来技术3 天前
UniApp 自定义导航栏适配指南:微信小程序胶囊遮挡、H5 与 App 全端通用方案
微信小程序·uni-app
卷Java3 天前
违规通知功能修改说明
java·数据库·微信小程序·uni-app