中文文档|官方教程：Lin UI，微信小程序原生语法的高质量 UI 组件库

aizixun8

中文文档 |官方教程

林 UI，不仅仅是一个 UI！

一套基于微信小程序原生语法的优质 UI 组件库

目录

介绍

Lin UI 是一套基于微信小程序原生语法的优质 UI 组件库。遵循简单、易于使用且美观的设计规范。

快速入门

请务必检查  、Es6 to ES5 和 Use npm  选项、参考图像

安装

将项目初始化为 NPM 项目

<p><pre class="notranslate">    <code>npm init -y
</code></pre></p>

如果您的项目根目录已经包含 .json 个文件，则可以跳过此步骤

安装 Lin UI

<p><pre class="notranslate">    <code>npm i lin-ui
</code></pre></p>
要配置微信开发者工具要正确安装 Lin UI，您需要在微信开发者工具中勾选以下所有三个选项

路径：进入微信开发者工具右上角->详情->本地设置

搭建 NPM 模块微信开发者工具配置完成后，需要搭建一次 NPM 模块

按钮位置：微信开发者工具顶部->工具->构建npm

如果您没有本地 Node.js 环境并且无法使用 NPM 进行安装，则可以执行此操作

介绍

配置  开发者工具

在页面中引入

<p><pre>    {
  <span class="pl-ent">"usingComponents"</span>:{
    <span class="pl-ent">"l-button"</span>:<span class="pl-s"><span class="pl-pds">"</span>/miniprogram_npm/lin-ui/button/index<span class="pl-pds">"</span></span>
  }
}</pre></p>

在页面中使用

默认按钮为 >

<p><pre>     <span class="pl-kos"><</span><span class="pl-ent">l-button</span> <span class="pl-c1">type</span>="<span class="pl-s">default</span>"<span class="pl-kos">></span>默认按钮<span class="pl-kos"></</span><span class="pl-ent">l-button</span><span class="pl-kos">></span></pre></p>
建议你在引入 Lin UI 组件时，以 l-{} 格式命名，因为遵循此规范会让你的项目代码更清晰

至此，Lin UI 已成功引入到您的项目中！

讨论交流

贡献代码

我们的代码基于分支开发，欢迎您提交 pull for code 贡献。

在提交 pull 之前，请仔细阅读我们的开发规范，否则可能会因信息不规范而被关闭。

开源协议

麻省理工学院 © 2020 年树林里的风