一介布衣

🧭 快速导航

Lin UI 组件库实战 ​

项目地址：https://github.com/TaleLin/lin-ui
文档：https://doc.mini.talelin.com/lin-ui/（若失效请以仓库 README 为准）
关联清单：https://github.com/justjavac/awesome-wechat-weapp

Lin UI 是一套为微信小程序设计的自定义组件库，组件前缀为 l-，覆盖表单、操作反馈、导航、布局等场景，支持主题与按需使用。

🎯 文章目标 ​

  • 正确安装并引入 Lin UI 组件
  • 学会按需加载与分包接入，控制主包体积
  • 完成主题定制与样式覆盖
  • 解决常见构建与样式问题

⚙️ 安装与初始化 ​

bash
# 安装（生产依赖）
npm i lin-ui -S
# 微信开发者工具：工具 -> 构建 npm
# 或启用 "使用 npm 模块" 与 "构建 npm"

确保 project.config.json 中已开启相关选项：

json
{
  "setting": {
    "useCompilerPlugins": false,
    "useApiHook": true,
    "packNpmManually": false,
    "packNpmRelationList": [],
    "compileHotReLoad": true,
    "enhance": true
  }
}

🔌 按需引入（usingComponents） ​

以 Button 与 Dialog 为例：

json
// pages/index/index.json
{
  "usingComponents": {
    "l-button": "lin-ui/button/index",
    "l-dialog": "lin-ui/dialog/index"
  }
}

页面示例：

xml
<!-- pages/index/index.wxml -->
<view class="container">
  <l-button type="primary" bind:lintap="onConfirm">主要操作</l-button>
  <l-button plain bind:lintap="onOpen">打开对话框</l-button>

  <l-dialog
    show="\{\{ showDialog \}\}"
    title="提示"
    confirm-text="确认"
    cancel-text="取消"
    bind:linconfirm="onConfirm"
    bind:lincancel="onCancel"
  >
    <view>这是一段对话框内容</view>
  </l-dialog>
</view>
js
// pages/index/index.js
Page({
  data: { showDialog: false },
  onOpen() { this.setData({ showDialog: true }) },
  onConfirm() { wx.showToast({ title: '确认' }); this.setData({ showDialog: false }) },
  onCancel() { this.setData({ showDialog: false }) }
})

🎨 主题与样式定制 ​

  • 推荐新建 theme.wxss，在 app.wxss 最后引入：
css
/* app.wxss */
@import "theme.wxss";
  • 覆盖常用变量/样式（示例）：
css
/* theme.wxss */
.l-btn--primary {
  background-color: #07C160 !important; /* 微信绿 */
  border-color: #07C160 !important;
}
.l-dialog__title {
  font-weight: 600;
}
  • 若组件支持自定义属性（props）控制主题，优先使用 props，其次再用样式覆盖。

🏗️ 工程实践 ​

  • 按需与分包：仅在使用的页面 usingComponents 声明；对大量仅出现在分包页面的组件，在分包内声明，降低主包体积。
  • 表单/校验：Lin UI 侧重 UI，表单校验可结合自定义逻辑或第三方库统一处理。
  • 设计一致性：封装二次组件（如 app-button），统一颜色、圆角、尺寸与交互反馈。
  • 与 Vant/WeUI 共存：避免同功能组件混用；若必须共存，注意样式作用域与命名冲突。

🧪 常见问题 ​

  • 构建 npm 失败：清缓存、重启开发者工具；确认 Node/npm 版本与 miniprogramRoot 配置。
  • 样式覆盖无效：检查引入顺序与选择器权重；组件内样式可能更高，必要时使用更具体选择器或 !important。
  • 包体积增长：排查是否误全量引入；仅在页面 JSON 注册用到的组件。

✅ 适用场景 ​

  • 业务中后台、表单与操作反馈场景
  • 希望统一 UI 规范且快速搭建的项目
  • 与现有自定义组件体系融合，进行风格统一

🔗 参考 ​

📊 总结 ​

Lin UI 提供完善的组件覆盖与良好的按需模式。结合分包、主题层与二次封装，可快速构建一致的 UI 体验并控制包体。