首页 小程序 npm构建WeUI 拓展组件与引用

npm构建WeUI 拓展组件与引用

weui 给我们提供一套很棒的组件,它与微信原生视觉体验一致。很多业务场景下使用weui的组件开发速度快同时用户体验也很赞!
在使用扩展组件tabs 过程中遇到许多的问题,耽误不少时间~~真是要命呀。温馨提示:认真看官方文档才是正道。
进入正题

微信官方文档给了两种weui引入方式:

1、通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。
2、可以通过npm方式下载构建
Tips:如果使用扩展组件的话必须使用npm的安装方式

1、npm原理介绍
这里特别需要注意的就是目录结构的问题,不然构建出来的文件难引用的到
在这里插入图片描述
完整的项目结构
在这里插入图片描述
1、在项目根目录下打开终端,微信开发者右键即可看见“在终端窗口打开”
在这里插入图片描述
2、初始化npm 让当前文件夹以node_modules模块化的方式引入组件,会询问你项目相关信息,一直回车就行。
终端输入: npm init
上面执行完,会在根目录下生成package.json
在这里插入图片描述
3、终端输入 npm i @miniprogram-component-plus/tabs --save
得到的项目结构如图,到这里目录结构已经完整了
在这里插入图片描述
4、配置project.config.json,同时使用npm模块
miniprogramNpmDistDir 构建输出的目录位置,相对于project.config.json 这里是项目的根目录

"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],

在这里插入图片描述
点击构建npm ,完成后会看见miniprogram_npm 目录
在这里插入图片描述
在这里插入图片描述
到这里构建完成~~~~~
使用时根据官方文档使用就行
如:两种方式都可以使用
在这里插入图片描述
效果图
在这里插入图片描述
相关文档
1、npm 支持
2、tabs使用
3、WeUI组件库

特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。