Skip to content

Commit fd0a624

Browse files
juzi214032juzi214032
committed
docs(README): 修正 README.md 文档中代码块的格式错误 (#792)
1 parent 884363a commit fd0a624

2 files changed

Lines changed: 167 additions & 167 deletions

File tree

‎README.md‎

Lines changed: 166 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,166 @@
1-
2-
<p align="center">
3-
<!-- <a href="http://doc.mini.7yue.pro/"> -->
4-
<img
5-
class="QR-img" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/lin-ui小程序.jpg">
6-
<!-- </a> -->
7-
</p>
8-
9-
<div align="center"> <span class="logo" > Lin UI </span> </div>
10-
11-
<div class="row" />
12-
13-
<div align="center">
14-
<span class="desc" >Fantastic native based Mini-Programe components</span>
15-
</div>
16-
17-
<div align="center">
18-
19-
![](https://img.shields.io/badge/build-passing-00d508.svg)
20-
![](https://img.shields.io/npm/v/lin-ui.svg)
21-
![](https://img.shields.io/npm/dt/lin-ui.svg)
22-
![](https://img.shields.io/badge/license-MIT-3963bc.svg)
23-
24-
</div>
25-
26-
<div align="center">
27-
28-
⚡️ 文档网站: http://doc.mini.7yue.pro/
29-
<br/>
30-
🔥 教程地址: https://course.7yue.pro
31-
32-
</div>
33-
34-
# 简介
35-
36-
Lin UI 是基于 **微信小程序原生语法** 实现的组件库。遵循简洁，易用的设计规范。
37-
38-
## 讨论交流
39-
40-
<table>
41-
<tbody>
42-
<tr>
43-
<td align="center" valign="middle">
44-
<img class="QR-img" style="height: 60px; width:60px" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/qq群新.png">
45-
<p style="font-size:12px;">QQ群号：643205479</p>
46-
</td>
47-
<td align="center" valign="middle">
48-
<img class="QR-img" style="height: 60px; width:60px" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/公众号.jpg">
49-
<p style="font-size:12px;">微信公众号：林间有风</p>
50-
</td>
51-
</tr>
52-
</tbody>
53-
</table>
54-
55-
## Lin UI商业案例
56-
57-
<table>
58-
<tbody>
59-
<tr>
60-
<td align="center" valign="middle">
61-
<img class="QR-img" style="height: 60px; width:60px" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/风袖.jpg" alt="风袖">
62-
<p style="font-size:12px;">风袖</p>
63-
</td>
64-
</tr>
65-
</tbody>
66-
</table>
67-
68-
## 快速上手
69-
70-
Lin UI 致力于给小程序开发者提供愉悦的开发体验。
71-
> 在开始之前，推荐先学习微信官方的[小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18101612)，并正确安装和配置了 Node.js v8或以上。 同时，我们假设你已了解关于 HTML、CSS 和 JavaScript 的初级知识，并且已经熟悉并阅读了[小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。
72-
73-
## 安装
74-
75-
Lin UI提供两种安装方法，满足不同开发者的需求。如果您需要使用`npm`安装，请确保您已经在本机安装了`npm`。
76-
77-
### 方式一： 使用npm安装 （推荐）
78-
79-
打开小程序的项目根目录，执行下面的命令。
80-
81-
```base
82-
npm install lin-ui --production
83-
```
84-
85-
执行成功后，会在根目录里生成项目依赖文件夹 `node_modules/lin-ui` （小程序IDE的目录结构里不会显示此文件夹）。
86-
<br/>
87-
然后用小程序官方IDE打开我们的小程序项目，找到 `工具` 选项，点击下拉选中 `构建npm` ，等待构建完成即可。
88-
89-
出现上图所示的结果后，可以看到小程序IDE工具的目录结构里多出了一个文件夹 `miniprogram_npm`（之后所有通过 `npm ` 引入的组件和 `js` 库都会出现在这里），打开后可以看到 `lin-ui` 文件夹，也就是我们所需要的组件。
90-
91-
### 方式二：下载代码
92-
93-
直接通过git下载 `Lin UI` 源代码，并将 `dist` 目录（Lin UI 组件库）拷贝到自己的项目中。
94-
95-
```base
96-
git clone https://github.com/TaleLin/lin-ui.git
97-
```
98-
99-
## 使用组件
100-
101-
> 下文会简单介绍一个`Lin UI` 组件的引入和使用。
102-
103-
使用前，确保该组件已经在你的项目目录结构里。
104-
<br />
105-
以icon组件为例，只需要在使用页面的json文件中引入icon对应的自定义组件即可。
106-
<br />
107-
组件路径：`path/to/${组件名称}/index`
108-
```json
109-
{
110-
"usingComponents": {
111-
"l-icon": "path/to/icon/index"
112-
}
113-
}
114-
```
115-
116-
然后在wxml中直接使用该组件。
117-
```wxml
118-
<l-icon name="add"> </l-icon>
119-
```
120-
121-
## 自定义配置
122-
123-
> 考虑到开发者在面临不同到项目时，需求和行业的不同。Lin UI 设计规范上支持一定程度上的样式定制，以满足业务和品牌上多样化的视觉需求。
124-
125-
同时，可以通过对 `components.json` 进行配置，来编译生成相对应的组件。
126-
<br />
127-
为满足自定义的需求，首先我们要去下载 `Lin UI` 源码。
128-
129-
```base
130-
git clone https://github.com/TaleLin/lin-ui.git
131-
```
132-
安装相关依赖
133-
134-
```base
135-
npm install
136-
```
137-
138-
完成以上两步是对 `Lin UI` 进行自定义配置的基础要求。
139-
140-
### 全局样式更改
141-
> Lin UI 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
142-
143-
以下是一些最常用的通用变量，所有样式变量可以在这里找到。
144-
145-
- 组件样式变量
146-
找到根目录，打开`config/style/_base.less`文件，进行修改即可。
147-
148-
149-
- 主题色更改
150-
151-
同样打开根目录，打开`config/style/_theme.less`文件，看到文件中定义了一个变量 `@theme-color` ，如果有主题色修改的需求，更改它即可。
152-
```less
153-
// 主题色
154-
155-
@theme-color : #2c61b4; // 主题色
156-
157-
```
158-
159-
其他
160-
更改完成后，在 `Lin UI` 下的根目录里打开终端执行如下所示命令
161-
162-
```bash
163-
npm run build
164-
```
165-
166-
根目录下的 `dist` 文件夹即是编译后的自定义组件。
1+
2+
<p align="center">
3+
<!-- <a href="http://doc.mini.7yue.pro/"> -->
4+
<img
5+
class="QR-img" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/lin-ui小程序.jpg">
6+
<!-- </a> -->
7+
</p>
8+
9+
<div align="center"> <span class="logo" > Lin UI </span> </div>
10+
11+
<div class="row" />
12+
13+
<div align="center">
14+
<span class="desc" >Fantastic native based Mini-Programe components</span>
15+
</div>
16+
17+
<div align="center">
18+
19+
![](https://img.shields.io/badge/build-passing-00d508.svg)
20+
![](https://img.shields.io/npm/v/lin-ui.svg)
21+
![](https://img.shields.io/npm/dt/lin-ui.svg)
22+
![](https://img.shields.io/badge/license-MIT-3963bc.svg)
23+
24+
</div>
25+
26+
<div align="center">
27+
28+
⚡️ 文档网站: http://doc.mini.7yue.pro/
29+
<br/>
30+
🔥 教程地址: https://course.7yue.pro
31+
32+
</div>
33+
34+
# 简介
35+
36+
Lin UI 是基于 **微信小程序原生语法** 实现的组件库。遵循简洁，易用的设计规范。
37+
38+
## 讨论交流
39+
40+
<table>
41+
<tbody>
42+
<tr>
43+
<td align="center" valign="middle">
44+
<img class="QR-img" style="height: 60px; width:60px" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/qq群新.png">
45+
<p style="font-size:12px;">QQ群号：643205479</p>
46+
</td>
47+
<td align="center" valign="middle">
48+
<img class="QR-img" style="height: 60px; width:60px" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/公众号.jpg">
49+
<p style="font-size:12px;">微信公众号：林间有风</p>
50+
</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
55+
## Lin UI商业案例
56+
57+
<table>
58+
<tbody>
59+
<tr>
60+
<td align="center" valign="middle">
61+
<img class="QR-img" style="height: 60px; width:60px" src="https://raw.githubusercontent.com/zhc525349965/fisher_book/master/app/image/风袖.jpg" alt="风袖">
62+
<p style="font-size:12px;">风袖</p>
63+
</td>
64+
</tr>
65+
</tbody>
66+
</table>
67+
68+
## 快速上手
69+
70+
Lin UI 致力于给小程序开发者提供愉悦的开发体验。
71+
> 在开始之前，推荐先学习微信官方的[小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18101612)，并正确安装和配置了 Node.js v8或以上。 同时，我们假设你已了解关于 HTML、CSS 和 JavaScript 的初级知识，并且已经熟悉并阅读了[小程序自定义组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。
72+
73+
## 安装
74+
75+
Lin UI提供两种安装方法，满足不同开发者的需求。如果您需要使用`npm`安装，请确保您已经在本机安装了`npm`。
76+
77+
### 方式一： 使用npm安装 （推荐）
78+
79+
打开小程序的项目根目录，执行下面的命令。
80+
81+
```sh
82+
npm install lin-ui --production
83+
```
84+
85+
执行成功后，会在根目录里生成项目依赖文件夹 `node_modules/lin-ui` （小程序IDE的目录结构里不会显示此文件夹）。
86+
<br/>
87+
然后用小程序官方IDE打开我们的小程序项目，找到 `工具` 选项，点击下拉选中 `构建npm` ，等待构建完成即可。
88+
89+
出现上图所示的结果后，可以看到小程序IDE工具的目录结构里多出了一个文件夹 `miniprogram_npm`（之后所有通过 `npm ` 引入的组件和 `js` 库都会出现在这里），打开后可以看到 `lin-ui` 文件夹，也就是我们所需要的组件。
90+
91+
### 方式二：下载代码
92+
93+
直接通过git下载 `Lin UI` 源代码，并将 `dist` 目录（Lin UI 组件库）拷贝到自己的项目中。
94+
95+
```sh
96+
git clone https://github.com/TaleLin/lin-ui.git
97+
```
98+
99+
## 使用组件
100+
101+
> 下文会简单介绍一个`Lin UI` 组件的引入和使用。
102+
103+
使用前，确保该组件已经在你的项目目录结构里。
104+
<br />
105+
以icon组件为例，只需要在使用页面的json文件中引入icon对应的自定义组件即可。
106+
<br />
107+
组件路径：`path/to/${组件名称}/index`
108+
```json
109+
{
110+
"usingComponents": {
111+
"l-icon": "path/to/icon/index"
112+
}
113+
}
114+
```
115+
116+
然后在wxml中直接使用该组件。
117+
```html
118+
<l-icon name="add"> </l-icon>
119+
```
120+
121+
## 自定义配置
122+
123+
> 考虑到开发者在面临不同到项目时，需求和行业的不同。Lin UI 设计规范上支持一定程度上的样式定制，以满足业务和品牌上多样化的视觉需求。
124+
125+
同时，可以通过对 `components.json` 进行配置，来编译生成相对应的组件。
126+
<br />
127+
为满足自定义的需求，首先我们要去下载 `Lin UI` 源码。
128+
129+
```sh
130+
git clone https://github.com/TaleLin/lin-ui.git
131+
```
132+
安装相关依赖
133+
134+
```sh
135+
npm install
136+
```
137+
138+
完成以上两步是对 `Lin UI` 进行自定义配置的基础要求。
139+
140+
### 全局样式更改
141+
> Lin UI 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
142+
143+
以下是一些最常用的通用变量，所有样式变量可以在这里找到。
144+
145+
- 组件样式变量
146+
找到根目录，打开`config/style/_base.less`文件，进行修改即可。
147+
148+
149+
- 主题色更改
150+
151+
同样打开根目录，打开`config/style/_theme.less`文件，看到文件中定义了一个变量 `@theme-color` ，如果有主题色修改的需求，更改它即可。
152+
```less
153+
// 主题色
154+
155+
@theme-color : #2c61b4; // 主题色
156+
157+
```
158+
159+
其他
160+
更改完成后，在 `Lin UI` 下的根目录里打开终端执行如下所示命令
161+
162+
```sh
163+
npm run build
164+
```
165+
166+
根目录下的 `dist` 文件夹即是编译后的自定义组件。

‎commitlint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
],
55
rules: {
66
'scope-empty': [2, 'never'],
7-
'scope-case': [2, 'always', ['lower-case', 'pascal-case']],
7+
'scope-case': [0, 'never'],
88
'scope-enum': [
99
2,
1010
'always',

0 commit comments

Comments
 (0)