Lin UI官方版

Lin UI简介

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

Lin UI软件特色

使用方便

使用组件微信小程序的原生语法，只需要熟悉HTML、CSS、JavaScpt和微信小程序的基础知识就可以上手。同时，您可以一次加载所有代码，也可以选择只加载一些使用过的组件的代码。

标准化和统一

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

丰富的文档

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

强劲扩张

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

支持第三方库框架

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

Lin UI组件介绍

1.装载过程中的装载

负载类型

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

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

示例代码

2.专栏通知栏

显示列？

设置列是否按显示种类显示。默认值为真。

3.进度条Pgress

百分率

按百分比设置进度条的当前进度，值为0~100，默认值为0。

4.导航栏选项卡栏

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

5.输入框输入

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

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

6.表单表单

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

Lin UI教程

组件介绍

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

需要注意的事项

需要注意的是，由于引入Lin-ui(NPM引入/复制源代码的dist文件夹)的方式不同，这里的path/to仅用于表达path的含义，不能直接复制到项目中。需要根据实际情况配置正确的路径。

组件的使用

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

同时，每个成分都有相应的pps(属)。例如，l图标标签上的名称种类根据不同的名称值显示不同的图标。

需要注意的事项

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

组件的事件

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

#全球定制组件

我们都知道微信小程序的组件用法需要在页面的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并传入参数。参数指的是相应组件的种类列表。所有的参数都不是必须的，需要命名为驼峰。