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
相关推荐
2501_9160088942 分钟前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921431 小时前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
技术小丁5 小时前
uni-app 广告弹窗最佳实践:不扰民、可控制频次、含完整源码
前端·uni-app·1024程序员节
敲敲了个代码8 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
开发语言·前端·javascript·学习·uni-app
00后程序员张11 小时前
iOS 26 App 运行状况全面解析 多工具协同监控与调试实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9160074712 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆、加固与发布治理(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184112 小时前
怎么上架 App?iOS 应用上架完整流程详解与跨平台发布实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088912 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
SY_FC12 小时前
uniapp textarea标签 在ios真机上出现高度拉长问题
uni-app
游戏开发爱好者821 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone