uniapp 手动导入插件组件的方法

其实我的需示很明确:

  1. 我的uniapp项目需要引入微信小程序的原生插件
  2. 我的Uni-app项目需要引入uniapp官网的插件市场及成熟的uniapp组件包

uniapp项目一般是用Hbuildx自动导入插件/组件的,那如果用的vscode来开发项目时要引入插件/组件就不方便了。
更别提像我就算装了Mac版的Hbuildx,但安装插件/组件时还是不知所去。找了很久手动导入插件的方法,在网上找了很久没有一篇说到点上的文章,特地实验后来写此文了。

首先,我们要明白我当前要安装的目标到底是什么?
是插件?还是组件?
还是页面模板?还是项目模板?
但是,由于官方的分类比较模糊,我们很多时候甚至都不清楚自己需要安装的是啥。
所以这里请小伙伴们对照看一看此文就会清楚的:
https://ask.dcloud.net.cn/article/35408

然后依据你的需求,按照此文档上描述的项目目录来放置和引入你从官方上下载回来的插件包即可。

关于uni_modules这个文件夹的意义有点乱,官方介绍是从HBuilderX 3.1起,新增 uni_modules,它是uni生态的重要模块化方案,通常是对js sdk、组件、页面、uniCloud云函数、公共模块等的封装,用于嵌入到uni-app项目中使用,也支持直接封装为项目模板。

但是经过本人费了很大工夫后了解来看,这个目录是官方为了它的大插件生态而单独使用的一个目录,方便的是官方的在线插件管理和卸载,但对于我们个人手动来使用的话还是很懵逼,所以,如果你是要手工管理组件的话不建议使用此目录。

具体详情可见:https://uniapp.dcloud.net.cn/uni_modules

uni-app工程如何引入组件?

引入小程序原生专用的组件

│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件

引入Uni-app规范的组件

├─uni_modules 存放uni_module规范的插件。
├─wxcomponents 存放小程序组件的目录,具体更多详情 详见

uniapp组件相关规范更多如下:

https://ask.dcloud.net.cn/article/35408

目录结构具体参看:

https://uniapp.dcloud.io/tutorial/project.html#%E5%B7%A5%E7%A8%8B%E7%AE%80%E4%BB%8B

另附:Uni-app微信小程序项目的目录结构

https://uniapp.dcloud.io/tutorial/project.html#%E5%B7%A5%E7%A8%8B%E7%AE%80%E4%BB%8B
一个uni-app工程,默认包含如下目录及文件:

┌─uniCloud              云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见[uniCloud](https://uniapp.dcloud.io/uniCloud/quickstart?structure&id=structure))
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录,[详见](https://uniapp.dcloud.io/component/web-view)
├─platforms             存放各平台专用页面的目录,[详见](https://uniapp.dcloud.io/tutorial/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,**注意:**静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录,[详见](https://uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 [应用生命周期](https://uniapp.dcloud.io/collocation/App#%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,[详见](https://uniapp.dcloud.io/collocation/manifest)
├─pages.json            配置页面路由、导航条、选项卡等页面类信息,[详见](https://uniapp.dcloud.io/collocation/pages)
└─uni.scss              这里是uni-app内置的常用样式变量` 

Tips

  • 编译到任意平台时,static 目录下的文件均会被完整打包进去,且不会编译。非 static 目录下的文件(vue、js、css 等)只有被引用到才会被打包编译进去。
  • static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
  • cssless/scss 等资源不要放在 static 目录下,建议这些公用的资源放在自建的 common 目录下。
  • HbuilderX 1.9.0+ 支持在根目录创建 ext.jsonsitemap.json 等小程序需要的文件。

另外,关于插件的几个名词解释:

HBuilderX插件

HBuilderX插件是安装在HBuilderX工具里的。是编辑器的插件,不是手机App的插件。详细开发教程见:http://hx.dcloud.net.cn/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容