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组件库