Skip to content

Commit cf0b14e

Browse files
author
cunjinli
committed
init
0 parents  commit cf0b14e

File tree

424 files changed

+11687
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

424 files changed

+11687
-0
lines changed

‎.babelrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"plugins": [
3+
["module-resolver", {
4+
"root": ["./src"],
5+
"alias": {}
6+
}]
7+
],
8+
"presets": [
9+
["env", {"loose": true, "modules": "commonjs"}]
10+
]
11+
}

‎.gitignore

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.idea
2+
.DS_Store
3+
package-lock.json
4+
5+
logs
6+
*.log
7+
npm-debug.log*
8+
yarn-debug.log*
9+
yarn-error.log*
10+
11+
miniprogram_dist
12+
miniprogram_dev
13+
node_modules
14+
coverage

‎.gitmodules

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[submodule "src/weui-wxss"]
2+
path = src/weui-wxss
3+
url = https://github.com/Tencent/weui-wxss

‎.npmignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.idea
2+
.DS_Store
3+
package-lock.json
4+
5+
logs
6+
*.log
7+
npm-debug.log*
8+
yarn-debug.log*
9+
yarn-error.log*
10+
11+
test
12+
tools
13+
docs
14+
miniprogram_dev
15+
node_modules
16+
coverage
17+
tsconfig.json
18+
tslint.json

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 cunjinli,rockhou,vickeyjchen,sanforsun
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
## UI 组件库简介
2+
这是一套基于样式库[weui-wxss](https://github.com/Tencent/weui-wxss/)开发的小程序UI组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
3+
4+
## 如何使用
5+
详细使用参考[文档](https://developers.weixin.qq.com/miniprogram/dev/extended/weui)
6+
7+
## 开发
8+
9+
1. 安装依赖：
10+
11+
```
12+
npm install
13+
```
14+
15+
2. 执行命令：
16+
17+
```
18+
npm run dev
19+
```
20+
21+
默认会在包根目录下生成 miniprogram\_dev 目录，src 中的源代码会被构建并生成到 miniprogram\_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：
22+
23+
```
24+
npm run watch
25+
```
26+
27+
3. 生成的 miniprogram\_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。
28+
29+
## 其他命令
30+
31+
* 清空 miniprogram_dist 目录：
32+
33+
```
34+
npm run clean
35+
```
36+
37+
* 清空 miniprogam_dev 目录：
38+
39+
```
40+
npm run clean-dev
41+
```

‎gulpfile.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const gulp = require('gulp')
2+
const clean = require('gulp-clean')
3+
4+
const config = require('./tools/config')
5+
const BuildTask = require('./tools/build')
6+
const id = require('./package.json').name || 'miniprogram-custom-component'
7+
8+
// 构建任务实例
9+
// eslint-disable-next-line no-new
10+
new BuildTask(id, config.entry)
11+
12+
// 清空生成目录和文件
13+
gulp.task('clean', gulp.series(() => gulp.src(config.distPath, {read: false, allowEmpty: true}).pipe(clean()), done => {
14+
if (config.isDev) {
15+
return gulp.src(config.demoDist, {read: false, allowEmpty: true})
16+
.pipe(clean())
17+
}
18+
19+
return done()
20+
}))
21+
// 监听文件变化并进行开发模式构建
22+
gulp.task('watch', gulp.series(`${id}-watch`))
23+
// 开发模式构建
24+
gulp.task('dev', gulp.series(`${id}-dev`))
25+
// 生产模式构建
26+
gulp.task('default', gulp.series(`${id}-default`))
27+
// 构建demo
28+
gulp.task('demo', gulp.series(`${id}-demo`))

‎package.json

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "weui-miniprogram",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "miniprogram_dist/index.js",
6+
"scripts": {
7+
"init": "git submodule init && git submodule update --init --remote && npm run dev",
8+
"dev": "gulp dev --develop",
9+
"demo": "gulp demo --develop",
10+
"watch": "gulp watch --develop --watch",
11+
"build": "gulp",
12+
"dist": "npm run build",
13+
"clean-dev": "gulp clean --develop",
14+
"clean": "gulp clean",
15+
"test": "jest ./test/* --silent --bail",
16+
"coverage": "jest ./test/* --coverage --bail",
17+
"lint": "eslint \"src/**/*.js\"",
18+
"lint-tools": "eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\""
19+
},
20+
"miniprogram": "miniprogram_dist",
21+
"jest": {
22+
"testEnvironment": "jsdom",
23+
"testURL": "https://jest.test",
24+
"collectCoverageFrom": [
25+
"src/**/*.js"
26+
],
27+
"moduleDirectories": [
28+
"node_modules",
29+
"src"
30+
]
31+
},
32+
"repository": {
33+
"type": "git",
34+
"url": ""
35+
},
36+
"author": "cunjinli,rockhou,xushengni",
37+
"license": "MIT",
38+
"devDependencies": {
39+
"autoprefixer": "^6.5.1",
40+
"babel-core": "^6.26.3",
41+
"babel-loader": "^7.1.5",
42+
"babel-plugin-module-resolver": "^3.2.0",
43+
"babel-preset-env": "^1.7.0",
44+
"colors": "^1.3.1",
45+
"eslint": "^5.14.1",
46+
"eslint-config-airbnb-base": "13.1.0",
47+
"eslint-loader": "^2.1.2",
48+
"eslint-plugin-import": "^2.16.0",
49+
"eslint-plugin-node": "^7.0.1",
50+
"eslint-plugin-promise": "^3.8.0",
51+
"gulp": "^4.0.0",
52+
"gulp-clean": "^0.4.0",
53+
"gulp-if": "^2.0.2",
54+
"gulp-install": "^1.1.0",
55+
"gulp-less": "^4.0.1",
56+
"gulp-rename": "^1.4.0",
57+
"gulp-sourcemaps": "^2.6.5",
58+
"jest": "^23.5.0",
59+
"miniprogram-api-typings": "^2.6.5",
60+
"miniprogram-simulate": "^1.0.0",
61+
"through2": "^2.0.3",
62+
"ts-loader": "^5.3.3",
63+
"tslint": "^5.13.1",
64+
"tslint-loader": "^3.5.4",
65+
"typescript": "^3.3.3333",
66+
"vinyl": "^2.2.0",
67+
"webpack": "^4.29.5",
68+
"webpack-node-externals": "^1.7.2"
69+
},
70+
"dependencies": {}
71+
}

‎src/@types/component.d.ts

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
declare interface PropertyOption {
2+
/** 属性类型 */
3+
type:
4+
| StringConstructor
5+
| NumberConstructor
6+
| BooleanConstructor
7+
| ObjectConstructor
8+
| ArrayConstructor
9+
| null;
10+
/** 属性初始值 */
11+
value: any;
12+
/** 属性值被更改时的响应函数 */
13+
observer?(
14+
newVal?: any,
15+
oldVal?: any,
16+
changedPath?: Array<string | number>,
17+
): void;
18+
}
19+
20+
declare interface TriggerEventOption {
21+
/** 事件是否冒泡
22+
*
23+
* 默认值： `false`
24+
*/
25+
bubbles?: boolean;
26+
/** 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
27+
*
28+
* 默认值： `false`
29+
*/
30+
composed?: boolean;
31+
/** 事件是否拥有捕获阶段
32+
*
33+
* 默认值： `false`
34+
*/
35+
capturePhase?: boolean;
36+
}
37+
38+
declare interface WxComponent extends BaseComponent {
39+
/** 组件的文件路径 */
40+
is: string;
41+
/** 节点id */
42+
id: string;
43+
/** 节点dataset */
44+
dataset: string;
45+
/** 组件数据，**包括内部数据和属性值** */
46+
data: object;
47+
/** 组件数据，**包括内部数据和属性值**（与 `data` 一致） */
48+
properties: {
49+
[propertyName: string]: PropertyOption;
50+
};
51+
52+
/** 设置data并执行视图层渲染 */
53+
setData(
54+
/** 这次要改变的数据
55+
*
56+
* 以 `key: value` 的形式表示，将 `this.data` 中的 `key` 对应的值改变成 `value`。
57+
*
58+
* 其中 `key` 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 `array[2].message`，`a.b.c.d`，并且不需要在 this.data 中预先定义。
59+
*/
60+
data: object,
61+
/** setData引起的界面更新渲染完毕后的回调函数，最低基础库： `1.5.0` */
62+
callback?: ((data: object) => void),
63+
);
64+
/** 检查组件是否具有 `behavior` （检查时会递归检查被直接或间接引入的所有behavior） */
65+
hasBehavior(behavior: object): void;
66+
/** 触发事件，参见组件事件 */
67+
triggerEvent(name: string, detail: object, options: TriggerEventOption): void;
68+
/** 创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内 */
69+
createSelectorQuery(): SelectorQuery;
70+
/** 创建一个 IntersectionObserver 对象，选择器选取范围为这个组件实例内 */
71+
createIntersectionObserver(): IntersectionObserver;
72+
/** 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 `wx://component-export` 影响） */
73+
selectComponent(selector: string): WxComponent;
74+
/** 使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组 */
75+
selectAllComponents(selector: string): WxComponent[];
76+
/** 获取这个关系所对应的所有关联节点，参见 组件间关系 */
77+
getRelationNodes(relationKey: string): WxComponent[];
78+
}
79+
80+
declare interface ComponentLifetimes {
81+
/** 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 `setData` */
82+
created?(this: WxComponent): void;
83+
/** 组件生命周期函数，在组件实例进入页面节点树时执行 */
84+
attached?(this: WxComponent): void;
85+
/** 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 [SelectorQuery]((SelectorQuery))） */
86+
ready?(this: WxComponent): void;
87+
/** 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行 */
88+
moved?(this: WxComponent): void;
89+
/** 组件生命周期函数，在组件实例被从页面节点树移除时执行 */
90+
detached?(this: WxComponent): void;
91+
}
92+
93+
declare interface PageLifetimes {
94+
/** 页面生命周期回调—监听页面显示
95+
*
96+
* 页面显示/切入前台时触发。
97+
*/
98+
show?(this: WxPage): void;
99+
/** 页面生命周期回调—监听页面隐藏
100+
*
101+
* 页面隐藏/切入后台时触发。 如 `navigateTo` 或底部 `tab` 切换到其他页面，小程序切入后台等。
102+
*/
103+
hide?(this: WxPage): void;
104+
}
105+
106+
declare interface RelationOption {
107+
/** 目标组件的相对关系 */
108+
type: 'parent' | 'child' | 'ancestor' | 'descendant';
109+
/** 关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后 */
110+
linked?(target: WxComponent): any;
111+
/** 关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后 */
112+
linkChanged?(target: WxComponent): any;
113+
/** 关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后 */
114+
unlinked?(target: WxComponent): any;
115+
/** 如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联 */
116+
target?: string;
117+
}
118+
119+
type DefinitionFilter = (
120+
defFields: WxComponent,
121+
definitionFilterArr?: DefinitionFilter[],
122+
) => void;
123+
124+
declare interface ComponentOptions {
125+
multipleSlots?: boolean;
126+
addGlobalClass?: boolean;
127+
}
128+
129+
declare interface BaseComponent<CustomComponent = object> extends ComponentLifetimes {
130+
/** 组件的对外属性，是属性名到属性设置的映射表 */
131+
properties?: {
132+
[propertyName: string]: PropertyOption;
133+
};
134+
/** 组件的内部数据，和 `properties` 一同用于组件的模板渲染 */
135+
data?: object;
136+
/** object组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 [组件事件](events.md) */
137+
methods?: {
138+
[methodName: string]: (this: WxComponent) => any;
139+
};
140+
/** 类似于mixins和traits的组件间代码复用机制，参见 [behaviors](behaviors.md) */
141+
behaviors?: string[];
142+
/** 组件间关系定义，参见 [组件间关系](relations.md) */
143+
relations?: {
144+
[componentName: string]: RelationOption;
145+
};
146+
/** 组件接受的外部样式类，参见 [外部样式类](wxml-wxss.md) */
147+
externalClasses?: string[];
148+
/** 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举） */
149+
options?: ComponentOptions;
150+
/** 组件生命周期声明对象，组件的生命周期：`created`、`attached`、`ready`、`moved`、`detached` 将收归到 `lifetimes` 字段内进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则 `lifetimes` 字段内声明方式优先级最高
151+
*
152+
* 最低基础库： `2.2.3` */
153+
lifetimes?: ComponentLifetimes;
154+
/** 组件所在页面的生命周期声明对象，目前仅支持页面的 `show` 和 `hide` 两个生命周期
155+
*
156+
* 最低基础库： `2.2.3` */
157+
pageLifetimes?: PageLifetimes;
158+
/** 定义段过滤器，用于自定义组件扩展，参见 [自定义组件扩展](extend.md)
159+
*
160+
* 最低基础库： `2.2.3` */
161+
definitionFilter?: DefinitionFilter;
162+
}
163+
164+
/** Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
165+
*
166+
* * 使用 `this.data` 可以获取内部数据和属性值，但不要直接修改它们，应使用 `setData` 修改。
167+
* * 生命周期函数无法在组件方法中通过 `this` 访问到。
168+
* * 属性名应避免以 data 开头，即不要命名成 `dataXyz` 这样的形式，因为在 WXML 中， `data-xyz=""` 会被作为节点 dataset 来处理，而不是组件属性。
169+
* * 在一个组件的定义和使用时，组件的属性名和 data 字段相互间都不能冲突（尽管它们位于不同的定义段中）。
170+
* * 从基础库 `2.0.9` 开始，对象类型的属性和 data 字段中可以包含函数类型的子字段，即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。
171+
* * `bug` : 对于 type 为 Object 或 Array 的属性，如果通过该组件自身的 `this.setData` 来改变属性值的一个子字段，则依旧会触发属性 observer ，且 observer 接收到的 `newVal` 是变化的那个子字段的值， `oldVal` 为空， `changedPath` 包含子字段的字段名相关信息。
172+
*/
173+
declare function Component<CustomComponent>(
174+
/** 自定义组件注册参数 */ options: CustomComponent,
175+
): void;
176+

0 commit comments

Comments
 (0)