Lin UI(微信小程序UI组件库)

Lin UI是基于微信小程序原生语法的组件库，可以用来快速开发小程序。通过调用组件，可以设计程序界面函数、界面布局和交互方式，让用户在开发新程序时得到更多帮助。如今，许多程序是结合组件工具开发的。在设计UI界面和菜单页面时，可以添加按钮组件、数据组件、文本组件、二维码组件、输入框组件、菜单组件和弹出窗口组件。页面所需的所有功能都是通过组件设计的，大大提高了用户界面的开发效率，让企业能够更快地设计自己的微信小程序。如果需要UI组件，可以下载Lin UI!

软件特色

简单易用

组件是用微信小程序的原生语法编写的，只有熟悉HTML、CSS、JavaScript和微信小程序的基础知识才能开发。同时可以一次加载所有代码，也可以一次只加载部分使用过的组件的代码。

规范统一

遵循统一的设计规范、接口标准和事件冒泡机制，减少开发人员查阅文档的时间成本，提高开发效率。

文档丰富

为了让更多的开发者在接触之初就能熟练使用Lin-UI开发自己的小程序应用，我们对每个组件的属性、事件、用法和案例都做了详细的描述。

扩展性强

支持根据需要引入和定制主题颜色，生成各种风格，满足个性化产品的需求;同时，它具有很强的可扩展性，可以轻松实现组件的二次开发。

支持第三方库框架

支持第三方框架，taro，mpvue。

组件介绍

1、加载中 Loading

加载类型

加载动画的类型可以由加载组件的type属性设置。并通过将show设置为true或false来控制其显示和隐藏。

类型有五种状态。可选值有闪光、翻转、改变、圆形和旋转。可以根据使用场景选择合适的类型，默认值为rotate。

示例代码

2.通告栏 NoticeBar

是否显示通告栏

设置是否通过show属性显示公告板。默认值为true。

3.进度条Progress

百分比

通过百分比属性设置进度条的当前进度。该值为0~100，默认值为0。

4.导航栏TabBar

导航栏适用场景:需要动态控制标签的类型和数量，样式定制度高的场景。

5.输入框Input

基于原生组件Input封装，用于接收单行文本，支持文本、密码、号码、身份证等输入。

用户可以控制是否显示输入框的标题，以及是否出现清除按钮。用户还可以自定义输入组件的右边部分(入局槽)，实现自定义按钮、验证码输入框等。

6.表单Form

它由输入框、文本框、单选框、多框和评分控件组成，用于收集、验证和提交数据。适用于账户注册、用户信息填写等表单页面。

官方教程

组件的引入

引入Lin-UI组件和引入自写组件是一样的。首先需要在json文件中声明自定义组件，也就是在usingComponents下以键值对的形式注册。l-icon是组件的名称，path/to/icon/index是组件的路径。

需要注意的事项

需要注意的是，引入lin-ui的方式不同(npm引入/复制源代码的dist文件夹)，所以这里的path/to只是用来表达path的意思，不能直接复制到项目中。需要根据实际情况配置正确的路径。

组件的使用。

当组件的声明完成后，我们可以像基本组件一样在页面的wxml中使用自定义组件。

同时，每个组件都有对应的道具(属性)，例如l-icon标签上的name属性根据传递不同的name值显示不同的图标。

需要注意的事项

因为WXML节点标签名称只能是小写字母、破折号和下划线的组合，所以自定义组件的标签名称只能包含这些字符。

组件事件。

大多数组件都有相应的事件。有关详细信息，请参考每个组件的文档和统一事件描述(OpenNew Window)。

#全球定制组件。

众所周知，微信小程序组件的使用需要在页面的json文件中注册，所以此时会出现一个问题:一些常用的基础组件，比如toast、diolag等。，每次在页面上使用时都必须在json中声明一次，这太麻烦了，或者根本不是前端。

因此，对于这种跨页面、经常使用的组件，我们可以在app.json中声明一次，即创建一个全局自定义组件，声明的方法与页面声明相同。

这样，我们用林UI开发的效率会大大提高!

事件绑定

组件中事件的绑定编写与组件的属性相同，以键和值的形式。

从keybind开始，遵循事件类型，例如bind:lintap。

值是一个字符串，需要在相应的页面中定义一个同名的函数。否则，当事件被触发时，将会报告一个错误。

事件冒泡和不冒泡。

事件可以分为冒泡事件和非冒泡事件:

气泡事件:当组件上的事件被触发时，该事件将被传递到父节点。

非冒泡事件:当组件上的事件被触发时，该事件不会被传输到父节点。

使用组件事件时，组件的事件都是冒泡事件。如果需要使用非冒泡事件，只需设置catch的键，比如catch:lintap。

外部样式类使用。

根据微信小程序的官方文档，当普通样式类和外部样式类在同一个节点上使用时，两个类的优先级是未定义的。

因此，当使用外部样式类来覆盖组件的原始样式属性时，只能通过提高外部样式的优先级来覆盖它们。

在本章中，建议添加传入的外部样式类的css属性!重要提高了样式的优先级，供开发人员参考。

例如，更改按钮组件的文本颜色:

Wx.lin用法。

被抛弃了。

Wx.lin已过时，将在未来版本中删除。如果相应的组件具有打开功能，请改用打开功能。

在操作交互方面，有些组件可以全局挂载一个调用方法，比如类似的调用方法this。vue中的$消息。同样，在小程序的组件中，我们也设计了类似的调用方法，但是在小程序中使用时有一些限制:

1.当需要调用一个组件时，必须将其引入到相应页面的json文件中，并挂载到wxml文件中。

2.组件只显示在导入的页面上，跳转到其他页面时会消失。例如，在某些场景下，操作成功后会提示并跳转页面。在这种情况下，建议在组件隐藏后，传入的回调函数跳转，或者使用本机API。

3.一个页面只能引入一个相关组件。例如，水流组件每页只能使用一次。

下面以Loading组件为例介绍wx.lin的用法:

1.将加载组件引入json和wxml文件。

2.在js文件中调用API，传入参数。参数是指相应组件的属性列表。所有参数都不是必须的，参数需要用驼峰命名。