├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github └── ISSUE_TEMPLATE │ ├── ----.md │ └── --bug.md ├── .gitignore ├── .gitmodules ├── .npmignore ├── .npmrc ├── .prettierrc.js ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── README.md ├── actionsheet.md ├── badge.md ├── cell.md ├── cells.md ├── checkbox-group.md ├── dialog.md ├── form-page.md ├── form.md ├── gallery.md ├── half-screen-dialog.md ├── icon.md ├── img │ ├── actionsheet.png │ ├── badge.png │ ├── cell.png │ ├── cells.png │ ├── checkbox-group.png │ ├── demo.png │ ├── dialog.png │ ├── emoji.png │ ├── flex.png │ ├── form-page.png │ ├── gallery.png │ ├── half-screen-dialog.png │ ├── icon.png │ ├── iconList.jpg │ ├── iconList1.jpg │ ├── iconList2.jpg │ ├── loading.png │ ├── msg.png │ ├── navigation.png │ ├── searchbar.png │ ├── slideview.png │ ├── tabbar.png │ ├── toptips.png │ ├── uploader.png │ └── video-swiper.png ├── loading.md ├── msg.md ├── navigation.md ├── other.md ├── quickstart.md ├── search.md ├── slideview.md ├── tabbar.md ├── toptips.md └── uploader.md ├── gulpfile.js ├── jest.config.js ├── mpflow.config.js ├── package-lock.json ├── package.json ├── src ├── app.js ├── app.json ├── app.less ├── base │ ├── CustomPage.js │ └── behaviors │ │ └── theme.js ├── components │ ├── actionsheet │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── actionsheet.test.ts.snap │ │ │ ├── actionsheet.test.ts │ │ │ ├── index.json │ │ │ ├── index.ts │ │ │ └── index.wxml │ │ ├── actionsheet.json │ │ ├── actionsheet.less │ │ ├── actionsheet.ts │ │ └── actionsheet.wxml │ ├── badge │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── badage.test.js.snap │ │ │ └── badage.test.js │ │ ├── badge.json │ │ ├── badge.less │ │ ├── badge.ts │ │ └── badge.wxml │ ├── cell │ │ ├── cell.json │ │ ├── cell.less │ │ ├── cell.ts │ │ └── cell.wxml │ ├── cells │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── cells.test.js.snap │ │ │ ├── cells.test.js │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ └── index.wxml │ │ ├── cells.json │ │ ├── cells.less │ │ ├── cells.ts │ │ └── cells.wxml │ ├── checkbox-group │ │ ├── checkbox-group.json │ │ ├── checkbox-group.less │ │ ├── checkbox-group.ts │ │ └── checkbox-group.wxml │ ├── checkbox │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── checkbox.test.js.snap │ │ │ ├── checkbox.test.js │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ └── index.wxml │ │ ├── checkbox.json │ │ ├── checkbox.less │ │ ├── checkbox.ts │ │ └── checkbox.wxml │ ├── dialog │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── dialog.test.js.snap │ │ │ ├── dialog.test.js │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ └── index.wxml │ │ ├── dialog.json │ │ ├── dialog.less │ │ ├── dialog.ts │ │ └── dialog.wxml │ ├── form-page │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── form-page.test.ts.snap │ │ │ ├── form-page.test.ts │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ └── index.wxml │ │ ├── form-page.json │ │ ├── form-page.less │ │ ├── form-page.ts │ │ └── form-page.wxml │ ├── form │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── form.test.ts.snap │ │ │ ├── comp │ │ │ │ ├── index.json │ │ │ │ ├── index.ts │ │ │ │ └── index.wxml │ │ │ ├── form-validator.test.ts │ │ │ ├── form.test.ts │ │ │ └── validator.test.ts │ │ ├── form-validator.ts │ │ ├── form.json │ │ ├── form.ts │ │ ├── form.wxml │ │ └── validator.ts │ ├── gallery │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── gallery.test.ts.snap │ │ │ └── gallery.test.ts │ │ ├── gallery.json │ │ ├── gallery.less │ │ ├── gallery.ts │ │ └── gallery.wxml │ ├── grids │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── grid.test.ts.snap │ │ │ └── grid.test.ts │ │ ├── grids.json │ │ ├── grids.less │ │ ├── grids.ts │ │ └── grids.wxml │ ├── half-screen-dialog │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── half-screen-dialog.test.ts.snap │ │ │ └── half-screen-dialog.test.ts │ │ ├── half-screen-dialog.json │ │ ├── half-screen-dialog.less │ │ ├── half-screen-dialog.ts │ │ └── half-screen-dialog.wxml │ ├── icon │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── icon.test.ts.snap │ │ │ └── icon.test.ts │ │ ├── base64.ts │ │ ├── icon.json │ │ ├── icon.less │ │ ├── icon.ts │ │ ├── icon.wxml │ │ └── icondata.ts │ ├── index.json │ ├── index.less │ ├── index.ts │ ├── index.wxml │ ├── loading │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── loading.test.ts.snap │ │ │ └── loading.test.ts │ │ ├── loading-icon.svg │ │ ├── loading.json │ │ ├── loading.less │ │ ├── loading.ts │ │ └── loading.wxml │ ├── msg │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── msg.test.ts.snap │ │ │ └── msg.test.ts │ │ ├── msg.json │ │ ├── msg.less │ │ ├── msg.ts │ │ └── msg.wxml │ ├── navigation-bar │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── navigation-bar.test.ts.snap │ │ │ └── navigation-bar.test.ts │ │ ├── navigation-bar.json │ │ ├── navigation-bar.less │ │ ├── navigation-bar.ts │ │ └── navigation-bar.wxml │ ├── patch.less │ ├── searchbar │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── searchbar.test.ts.snap │ │ │ └── searchbar.test.ts │ │ ├── searchbar.json │ │ ├── searchbar.less │ │ ├── searchbar.ts │ │ └── searchbar.wxml │ ├── slideview │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── slideview.test.ts.snap │ │ │ └── slideview.test.ts │ │ ├── slideview-skyline.json │ │ ├── slideview-skyline.less │ │ ├── slideview-skyline.ts │ │ ├── slideview-skyline.wxml │ │ ├── slideview.json │ │ ├── slideview.less │ │ ├── slideview.ts │ │ ├── slideview.wxml │ │ └── slideview.wxs │ ├── static │ │ └── icon │ │ │ ├── s-arrow-back.png │ │ │ └── s-arrow-back.svg │ ├── tabbar │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── tabbar.test.ts.snap │ │ │ └── tabbar.test.ts │ │ ├── tabbar.json │ │ ├── tabbar.less │ │ ├── tabbar.ts │ │ └── tabbar.wxml │ ├── toptips │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── toptips.test.ts.snap │ │ │ └── toptips.test.ts │ │ ├── toptips.json │ │ ├── toptips.less │ │ ├── toptips.ts │ │ └── toptips.wxml │ ├── uploader │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── uploader.test.ts.snap │ │ │ └── uploader.test.ts │ │ ├── uploader.json │ │ ├── uploader.less │ │ ├── uploader.ts │ │ └── uploader.wxml │ └── utils │ │ ├── object.ts │ │ ├── string.ts │ │ └── utils.less ├── example │ ├── actionsheet │ │ ├── actionsheet.js │ │ ├── actionsheet.json │ │ ├── actionsheet.wxml │ │ └── actionsheet.wxss │ ├── article │ │ ├── article.js │ │ ├── article.json │ │ ├── article.wxml │ │ └── article.wxss │ ├── badge │ │ ├── badge.js │ │ ├── badge.json │ │ ├── badge.wxml │ │ └── badge.wxss │ ├── button │ │ ├── button.js │ │ ├── button.json │ │ ├── button.wxml │ │ └── button.wxss │ ├── cell │ │ ├── cell.js │ │ ├── cell.json │ │ ├── cell.wxml │ │ ├── cell.wxss │ │ ├── icon_del.svg │ │ ├── icon_love.svg │ │ └── icon_star.svg │ ├── common.less │ ├── dialog │ │ ├── dialog.js │ │ ├── dialog.json │ │ ├── dialog.wxml │ │ └── dialog.wxss │ ├── flex │ │ ├── flex.js │ │ ├── flex.json │ │ ├── flex.wxml │ │ └── flex.wxss │ ├── footer │ │ ├── footer.js │ │ ├── footer.json │ │ ├── footer.wxml │ │ └── footer.wxss │ ├── form-page │ │ ├── form-page.js │ │ ├── form-page.json │ │ ├── form-page.wxml │ │ └── form-page.wxss │ ├── form │ │ ├── form.js │ │ ├── form.json │ │ ├── form.wxml │ │ └── form.wxss │ ├── gallery │ │ ├── gallery.js │ │ ├── gallery.json │ │ ├── gallery.wxml │ │ └── gallery.wxss │ ├── grid │ │ ├── grid.js │ │ ├── grid.json │ │ ├── grid.wxml │ │ └── grid.wxss │ ├── half-screen-dialog │ │ ├── half-screen-dialog.js │ │ ├── half-screen-dialog.json │ │ ├── half-screen-dialog.wxml │ │ └── half-screen-dialog.wxss │ ├── icons │ │ ├── icons.js │ │ ├── icons.json │ │ ├── icons.wxml │ │ └── icons.wxss │ ├── images │ │ ├── base64.js │ │ ├── icon_del.svg │ │ ├── icon_footer.png │ │ ├── icon_footer_link.png │ │ ├── icon_intro.png │ │ ├── icon_love.svg │ │ ├── icon_nav_feedback.png │ │ ├── icon_nav_form.png │ │ ├── icon_nav_layout.png │ │ ├── icon_nav_nav.png │ │ ├── icon_nav_search.png │ │ ├── icon_nav_special.png │ │ ├── icon_nav_widget.png │ │ ├── icon_nav_z-index.png │ │ ├── icon_star.svg │ │ ├── icon_tabbar.png │ │ ├── logo.png │ │ ├── pic_160.png │ │ ├── pic_article.png │ │ ├── tabbar_icon_chat_active.png │ │ ├── tabbar_icon_chat_active.svg │ │ ├── tabbar_icon_chat_default.png │ │ ├── tabbar_icon_chat_default.svg │ │ ├── tabbar_icon_setting_active.png │ │ ├── tabbar_icon_setting_active.svg │ │ ├── tabbar_icon_setting_default.png │ │ ├── tabbar_icon_setting_default.svg │ │ └── vcode.jpg │ ├── index.js │ ├── index.json │ ├── index.less │ ├── index.wxml │ ├── loading │ │ ├── loading.js │ │ ├── loading.json │ │ ├── loading.wxml │ │ └── loading.wxss │ ├── loadmore │ │ ├── loadmore.js │ │ ├── loadmore.json │ │ ├── loadmore.wxml │ │ └── loadmore.wxss │ ├── msg │ │ ├── msg.js │ │ ├── msg.json │ │ ├── msg.wxml │ │ ├── msg.wxss │ │ ├── msg_fail.js │ │ ├── msg_fail.json │ │ ├── msg_fail.wxml │ │ ├── msg_fail.wxss │ │ ├── msg_success.js │ │ ├── msg_success.json │ │ ├── msg_success.wxml │ │ ├── msg_success.wxss │ │ ├── msg_text.js │ │ ├── msg_text.json │ │ ├── msg_text.wxml │ │ ├── msg_text.wxss │ │ ├── msg_text_primary.js │ │ ├── msg_text_primary.json │ │ ├── msg_text_primary.wxml │ │ └── msg_text_primary.wxss │ ├── navbar │ │ ├── navbar.js │ │ ├── navbar.json │ │ ├── navbar.wxml │ │ └── navbar.wxss │ ├── navigation │ │ ├── navigation.js │ │ ├── navigation.json │ │ ├── navigation.wxml │ │ └── navigation.wxss │ ├── panel │ │ ├── panel.js │ │ ├── panel.json │ │ ├── panel.wxml │ │ └── panel.wxss │ ├── picker │ │ ├── picker.js │ │ ├── picker.json │ │ ├── picker.wxml │ │ └── picker.wxss │ ├── preview │ │ ├── preview.js │ │ ├── preview.json │ │ ├── preview.wxml │ │ └── preview.wxss │ ├── progress │ │ ├── progress.js │ │ ├── progress.json │ │ ├── progress.wxml │ │ └── progress.wxss │ ├── searchbar │ │ ├── searchbar.js │ │ ├── searchbar.json │ │ ├── searchbar.wxml │ │ └── searchbar.wxss │ ├── slider │ │ ├── slider.js │ │ ├── slider.json │ │ ├── slider.wxml │ │ └── slider.wxss │ ├── slideview │ │ ├── icon_del.svg │ │ ├── icon_love.svg │ │ ├── icon_star.svg │ │ ├── slideview.js │ │ ├── slideview.json │ │ ├── slideview.wxml │ │ └── slideview.wxss │ ├── tabbar │ │ ├── tabbar.js │ │ ├── tabbar.json │ │ ├── tabbar.wxml │ │ └── tabbar.wxss │ ├── toast │ │ ├── toast.js │ │ ├── toast.json │ │ ├── toast.wxml │ │ └── toast.wxss │ ├── toptips │ │ ├── toptips.js │ │ ├── toptips.json │ │ ├── toptips.wxml │ │ └── toptips.wxss │ └── uploader │ │ ├── uploader.js │ │ ├── uploader.json │ │ ├── uploader.wxml │ │ └── uploader.wxss └── project.config.json ├── tools ├── build.js ├── checkcomponents.js ├── checkwxss.js ├── config.js ├── package.json └── utils.js └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | src/weui-wxss 3 | miniprogram_dist 4 | miniprogram_dev 5 | tools -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | parserOptions: { 5 | ecmaVersion: 6, 6 | sourceType: 'module' 7 | }, 8 | env: { 9 | es6: true, 10 | browser: true, 11 | jest: true, 12 | commonjs: true, 13 | node: true 14 | }, 15 | plugins: [ 16 | '@typescript-eslint', 17 | 'prettier' 18 | ], 19 | extends: [ 20 | 'eslint:recommended', 21 | 'plugin:@typescript-eslint/eslint-recommended', 22 | 'plugin:@typescript-eslint/recommended', 23 | 'prettier/@typescript-eslint' 24 | ], 25 | globals: { 26 | wx: true, 27 | App: true, 28 | Page: true, 29 | Component: true 30 | }, 31 | rules: { 32 | 'prettier/prettier': 'error', 33 | 'no-console': ["error", { allow: ["warn", "error"] } ], 34 | '@typescript-eslint/ban-ts-ignore': 'off', 35 | '@typescript-eslint/no-empty-function': 'off', 36 | '@typescript-eslint/explicit-function-return-type': 'off', 37 | '@typescript-eslint/no-explicit-any': 'off' 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/----.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 特性请求 3 | about: 提出一个好的特性 4 | title: "[FEATURE]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## 遇到的问题 11 | 描述你想要达到的效果，以及你的使用场景 12 | 13 | ## 特性方案 14 | 描述你希望的实现方案 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/--bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 报告Bug 3 | about: 创建一个Bug报告 4 | title: "[BUG]" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Bug描述 11 | 描述你遇到的Bug，所产生的非预期行为 12 | 13 | ## 复现方式 14 | 复现该Bug的方式，建议直接提供 [代码片段](https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html) 15 | 16 | ## 版本信息 17 | - weui 版本 [useExtendedLib 引入则直接填写 useExtendedLib] : 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | miniprogram_dist 11 | miniprogram_dev 12 | node_modules 13 | coverage 14 | dist 15 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/.gitmodules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 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 -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 一行最多 100 字符 3 | printWidth: 100, 4 | // 使用 4 个空格缩进 5 | tabWidth: 4, 6 | // 不使用缩进符，而使用空格 7 | useTabs: false, 8 | // 行尾需要有分号 9 | semi: false, 10 | // 使用单引号 11 | singleQuote: true, 12 | // 对象的 key 仅在必要时用引号 13 | quoteProps: 'as-needed', 14 | // 末尾不需要逗号 15 | trailingComma: 'none', 16 | // 大括号内的首尾需要空格 17 | bracketSpacing: true, 18 | // 箭头函数，只有一个参数的时候，也需要括号 19 | arrowParens: 'always', 20 | // 每个文件格式化的范围是文件的全部内容 21 | rangeStart: 0, 22 | rangeEnd: Infinity, 23 | // 不需要写文件开头的 @prettier 24 | requirePragma: false, 25 | // 不需要自动在文件开头插入 @prettier 26 | insertPragma: false, 27 | // 使用默认的折行标准 28 | proseWrap: 'preserve', 29 | // 根据显示样式决定 html 要不要折行 30 | htmlWhitespaceSensitivity: 'css', 31 | // 换行符使用 lf 32 | endOfLine: 'lf' 33 | }; -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "v12.16.3" 4 | script: npm run test 5 | after_script: 6 | - npm run codecov 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 cunjinli,rockhou,xushengni,tomylin 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## WeUI组件库简介 2 | 3 | [![](https://img.shields.io/npm/v/weui-miniprogram.svg?style=flat-square)](https://www.npmjs.com/package/weui-miniprogram) 4 | [![](https://img.shields.io/npm/dw/weui-miniprogram?style=flat-square)](https://www.npmjs.com/package/weui-miniprogram) 5 | [![](https://img.shields.io/travis/wechat-miniprogram/weui-miniprogram.svg?style=flat-square)](https://github.com/wechat-miniprogram/weui-miniprogram) 6 | [![](https://img.shields.io/github/license/wechat-miniprogram/weui-miniprogram.svg?style=flat-square)](https://github.com/wechat-miniprogram/weui-miniprogram) 7 | [![](https://img.shields.io/codecov/c/github/wechat-miniprogram/weui-miniprogram.svg?style=flat-square)](https://github.com/wechat-miniprogram/weui-miniprogram) 8 | 9 | 这是一套基于样式库[weui-wxss](https://github.com/Tencent/weui-wxss/)开发的小程序扩展组件库，同微信原生视觉体验一致的扩展组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。 10 | 11 | ## 如何使用 12 | 详细使用参考[文档](https://wechat-miniprogram.github.io/weui/docs/) 13 | 14 | ## 开发 15 | 1. 初始化 16 | ``` 17 | npm run init 18 | ``` 19 | 20 | 2. 执行命令： 21 | 22 | ``` 23 | npm run dev 24 | ``` 25 | 26 | 3. 构建组件库： 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## 适配 DarkMode 33 | 34 | 在根结点（或组件的外层结点）增加属性 `data-weui-theme="dark"`，即把 WeUI 组件切换到 DarkMode 的表现，如: 35 | 36 | ```html 37 | 38 | ... 39 | 40 | ``` 41 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@mpflow/plugin-babel/preset', '@mpflow/plugin-typescript/preset'] 3 | } 4 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## WeUI组件库简介 2 | 这是一套基于样式库[weui-wxss](https://github.com/Tencent/weui-wxss/)开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。 3 | 4 | > 支持[扩展库](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib)引入，不占用小程序包体积。 5 | 6 | ## 项目背景 7 | 随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从零到1进行开发设计，而这个过程中，有大量的UI交互是重复的，另外，微信内部已经有一套H5版本的WeUI样式库。综合考虑，我们基于WeUI样式库开发了小程序版本的UI组件库，在内部多个小程序项目已经使用OK的情况下，我们把这套组件库开源让外部开发者也可以使用，欢迎大家Star以及提Issue。 8 | 9 | ## 快速上手 10 | 请参考[快速上手](./quickstart.md) 11 | 12 | ## 在线预览 13 | 扫描下方小程序码可以预览该组件库 14 | 15 | ![](./img/demo.png#width:300px) 16 | 17 | ## 参与贡献 18 | 欢迎给我们提出宝贵见的意见，[项目地址](https://github.com/wechat-miniprogram/weui-miniprogram) 19 | -------------------------------------------------------------------------------- /docs/actionsheet.md: -------------------------------------------------------------------------------- 1 | # ActionSheet 2 | 底部弹起的操作按钮组件 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet" 10 | } 11 | } 12 | ``` 13 | 14 | ## 示例代码 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | 21 | ```js 22 | Page({ 23 | data: { 24 | showActionsheet: false, 25 | groups: [ 26 | { text: '示例菜单', value: 1 }, 27 | { text: '示例菜单', value: 2 }, 28 | { text: '负向菜单', type: 'warn', value: 3 } 29 | ] 30 | }, 31 | close: function () { 32 | this.setData({ 33 | showActionsheet: false 34 | }) 35 | }, 36 | btnClick(e) { 37 | console.log(e) 38 | this.close() 39 | } 40 | }) 41 | ``` 42 | ## 效果展示 43 | ![](./img/actionsheet.png#width:300px) 44 | 45 | ## 属性列表 46 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 47 | | ---- | ---- | ------ | -------- | ---- | 48 | | title | string | | 否 | 标题 | 49 | | show-cancel | boolean | true | 否 | 是否显示取消按钮 | 50 | | cancel-text | string | | 否 | 取消按钮的文本 | 51 | | mask-class | string | | 否 | 背景蒙层的class | 52 | | ext-class | string | | 否 | ActionSheet额外的class | 53 | | mask-closable | boolean | true | 否 | 点击背景蒙层是否可以关闭ActionSheet | 54 | | mask | boolean | true | 否 | 是否显示背景蒙层 | 55 | | show | boolean | false | 否 | 是否显示ActionSheet | 56 | | actions | Array | false | 是 | ActionSheet的按钮项的配置，每一项是包含text、value、type的Object，type的取值为warn和default，表示两种样式 | 57 | | bindclose | eventhandler | | 否 | 点击背后的mask关闭掉ActionSheet触发的事件 | 58 | | bindactiontap | eventhandler | | 否 | 点击ActionSheet的按钮项触发的事件，detail为{ value, index } | 59 | 60 | ## Slot 61 | | 名称 | 描述 | 62 | | ---- | ---- | 63 | | title | 标题区域slot | -------------------------------------------------------------------------------- /docs/badge.md: -------------------------------------------------------------------------------- 1 | # Badge徽章 2 | 出现在按钮、图标附近的数字或者状态标记。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-badge": "weui-miniprogram/badge/badge" 10 | } 11 | } 12 | ``` 13 | 14 | ## 属性列表 15 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 16 | | ---- | ---- | ------ | -------- | ---- | 17 | | extClass | string | | 否 | 组件类名 | 18 | | content | string | | 否 | 内容区域 | 19 | 20 | ## 提示 21 | 不设置 content 属性时，默认展示小圆点 -------------------------------------------------------------------------------- /docs/cell.md: -------------------------------------------------------------------------------- 1 | # Cell 2 | Cell是列表或者是表单的一项，常用于设置页的展示，或者用在表单中，作为表单的每一个要填写的项，Cell必须要放在[Cells](./cells.md)组件的下面。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-cells": "weui-miniprogram/cells/cells", 10 | "mp-cell": "weui-miniprogram/cell/cell" 11 | } 12 | } 13 | ``` 14 | 15 | ## 属性列表 16 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 17 | | ---- | ---- | ------ | -------- | ---- | 18 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 19 | | icon | string | | 否 | Cell的最左侧的icon，是本地图片的路径，icon和名为icon的slot互斥 | 20 | | title | string | | 否 | Cell最左侧的标题，一般用在[Form](./form.md)表单组件里面，icon和title二选一，title和名为title的slot互斥 | 21 | | hover | boolean | false | 否 | 是否有hover效果 | 22 | | link | boolean | false | 否 | 右侧是有跳转的箭头，`v1.0`后的版本，`link: true` 会自带 hover 效果 | 23 | | value | string | | 是 | Cell的值，和默认的slot互斥 | 24 | | show-error | boolean | false | 否 | 用在[Form](./form.md)表单组件里面，在表单校验出错的时候是否把Cell标为warn状态 | 25 | | prop | string | | 否 | 用在[Form](./form.md)表单组件里面，需要校验的表单的字段名 | 26 | | footer | string | | 否 | Cell右侧区域的内容，和名为footer的slot互斥 | 27 | | inline | boolean | | 否 | 用在[Form](./form.md)表单组件里面，表示表单项是左右显示还是上下显示 | 28 | 29 | ## Slot 30 | | 名称 | 描述 | 31 | | ---- | ---- | 32 | | icon | 左侧图标slot | 33 | | title | 标题slot | 34 | | 默认 | 内容slot | 35 | | footer | 右侧区域slot | 36 | 37 | -------------------------------------------------------------------------------- /docs/cells.md: -------------------------------------------------------------------------------- 1 | # Cells 2 | Cells是列表分组，常用于嵌套一组Cell或者[Checkbox](./checkbox.md)，注意，Checkbox-group和Cell组件都必须放在Cells组件下面，Cells效果如下图所示。 3 | 4 | ![](./img/cells.png#width:300px) 5 | 6 | ## 代码引入 7 | 在 page.json 中引入组件 8 | ```json 9 | { 10 | "usingComponents": { 11 | "mp-cells": "weui-miniprogram/cells/cells", 12 | "mp-cell": "weui-miniprogram/cell/cell" 13 | } 14 | } 15 | ``` 16 | 17 | ## 示例代码 18 | ```html 19 | 20 | 21 | 22 | 23 | 标题文字（使用slot） 24 | 说明文字 25 | 26 | 27 | ``` 28 | 29 | ```js 30 | // page.js示例代码 31 | Page({ 32 | }); 33 | ``` 34 | 35 | 36 | ## 属性列表 37 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 38 | | ---- | ---- | ------ | -------- | ---- | 39 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 40 | | title | string | | 否 | Cells的标题 | 41 | | footer | string | | 否 | Cells底部的文字 | 42 | 43 | ## Slot 44 | | 名称 | 描述 | 45 | | ---- | ---- | 46 | | 默认 | 内容slot | 47 | -------------------------------------------------------------------------------- /docs/dialog.md: -------------------------------------------------------------------------------- 1 | # Dialog 2 | Dialog弹窗组件。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-dialog": "weui-miniprogram/dialog/dialog" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | ## 属性列表 16 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 17 | | ---- | ---- | ------ | -------- | ---- | 18 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 19 | | title | string | | 否 | 弹窗的标题 | 20 | | buttons | array\ | [] | 否 | 底部的按钮组，建议最多提供两个按钮 | 21 | | mask | boolean | | 是 | 是否显示蒙层 | 22 | | mask-closable | boolean | | 是 | 点击蒙层是否可以关闭 | 23 | | show | boolean | false | 否 | 是否显示弹窗 | 24 | | bindclose | eventhandler | | 否 | 弹窗关闭的时候触发的事件 | 25 | | bindbuttontap | eventhandler | | 否 | buttons按钮组点击时触发的事件，detail为{index, item}，item是按钮的配置项 | 26 | 27 | buttons提供按钮组配置，每一项表示一个按钮，每一项的属性为 28 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 29 | | ---- | ---- | ------ | -------- | ---- | 30 | | extClass | string | | 否 | 按钮的额外的class，可用于修改组件内部的样式 | 31 | | text | string | | 否 | 按钮的文本 | 32 | 33 | ## Slot 34 | 弹窗组件只有一个默认slot用于显示弹窗的内容 35 | -------------------------------------------------------------------------------- /docs/form-page.md: -------------------------------------------------------------------------------- 1 | # FormPage 2 | 表单页面，规定了标准表单的顶部的标题和底部的按钮提示等区域的规范 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-form-page": "weui-miniprogram/form-page/form-page", 10 | "mp-form": "weui-miniprogram/form/form" 11 | } 12 | } 13 | ``` 14 | 15 | ## 示例代码 16 | ```html 17 | 18 | 19 | 20 | 21 | 22 | 31 | 32 | 33 | 34 | 35 | 36 | ``` 37 | 38 | ## 效果展示 39 | ![](./img/form-page.png#width:300px) 40 | 41 | ## 属性列表 42 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 43 | | ---- | ---- | ------ | -------- | ---- | 44 | | title | string | | 否 | 标题 | 45 | | subtitle | boolean | | 否 | 副标题 | 46 | 47 | ## Slot 48 | | 名称 | 描述 | 49 | | ---- | ---- | 50 | | title | 标题区域slot和title属性互斥 | 51 | | tips | 底部确认按钮前面的提示区域 | 52 | | button | 底部提交按钮区域 | 53 | | suffixtips | 提交按钮下面的提示区域 | 54 | | footer | 页脚的内容区域 | -------------------------------------------------------------------------------- /docs/gallery.md: -------------------------------------------------------------------------------- 1 | # Gallery画廊 2 | 用于多张图片展示，类似原生的wx.previewImage的展示。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-gallery": "weui-miniprogram/gallery/gallery" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | 16 | ## 属性列表 17 | | 属性 | 类型 | 默认值 | 说明 | 18 | | ---- | ---- | ------ | ---- | 19 | | extClass | string | | 组件类名 | 20 | | show | boolean | true| 组件展示/隐藏 | 21 | | imgUrls | array | [] | 需要展示的图片集 | 22 | | current | number | 0 | 当前展示的图片index | 23 | | showDelete | boolean | true | 是否显删除按钮 | 24 | | hideOnClick | boolean | true | 点击图片是否隐藏该组件 | 25 | 26 | ## 自定义事件 27 | | 事件名称 | 说明 | 回调参数 | 28 | | ---- | ---- | ------ | 29 | | change | 当前图片滑动切换之后触发 | e.detail = { current } 当前图片的位置 | 30 | | delete | 当前图片被删除后触发（delete 属性需要设为 true） | e.detail = { url, index } 被删除图片的 url 和 index | 31 | | hide | 组件被隐藏时候触发（hideOnClick 属性需要设为 true） | -- | -------------------------------------------------------------------------------- /docs/icon.md: -------------------------------------------------------------------------------- 1 | # Icon 2 | 图标 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-icon": "weui-miniprogram/icon/icon" 10 | } 11 | } 12 | ``` 13 | 14 | ## 示例代码 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | 21 | ## 效果展示 22 | ![](./img/icon.png#width:300px) 23 | 24 | ## 属性列表 25 | | 属性 | 类型 | 默认值 | 说明 | 26 | | ---- | ---- | ------ | ---- | 27 | | extClass | string | | 组件类名 | 28 | | type | string | outline| Icon类型，可选值 outline（描边），field（填充） | 29 | | icon | string | | Icon名字 | 30 | | size | number | 20 | Icon的大小，单位 px | 31 | | color | string | black | Icon的颜色，默认黑色 | 32 | 33 | ## Icon 列表 34 | ![](./img/iconList1.jpg#width:1366px) 35 | ![](./img/iconList2.jpg#width:1366px) 36 | -------------------------------------------------------------------------------- /docs/img/actionsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/actionsheet.png -------------------------------------------------------------------------------- /docs/img/badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/badge.png -------------------------------------------------------------------------------- /docs/img/cell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/cell.png -------------------------------------------------------------------------------- /docs/img/cells.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/cells.png -------------------------------------------------------------------------------- /docs/img/checkbox-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/checkbox-group.png -------------------------------------------------------------------------------- /docs/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/demo.png -------------------------------------------------------------------------------- /docs/img/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/dialog.png -------------------------------------------------------------------------------- /docs/img/emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/emoji.png -------------------------------------------------------------------------------- /docs/img/flex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/flex.png -------------------------------------------------------------------------------- /docs/img/form-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/form-page.png -------------------------------------------------------------------------------- /docs/img/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/gallery.png -------------------------------------------------------------------------------- /docs/img/half-screen-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/half-screen-dialog.png -------------------------------------------------------------------------------- /docs/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/icon.png -------------------------------------------------------------------------------- /docs/img/iconList.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/iconList.jpg -------------------------------------------------------------------------------- /docs/img/iconList1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/iconList1.jpg -------------------------------------------------------------------------------- /docs/img/iconList2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/iconList2.jpg -------------------------------------------------------------------------------- /docs/img/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/loading.png -------------------------------------------------------------------------------- /docs/img/msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/msg.png -------------------------------------------------------------------------------- /docs/img/navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/navigation.png -------------------------------------------------------------------------------- /docs/img/searchbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/searchbar.png -------------------------------------------------------------------------------- /docs/img/slideview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/slideview.png -------------------------------------------------------------------------------- /docs/img/tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/tabbar.png -------------------------------------------------------------------------------- /docs/img/toptips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/toptips.png -------------------------------------------------------------------------------- /docs/img/uploader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/uploader.png -------------------------------------------------------------------------------- /docs/img/video-swiper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/docs/img/video-swiper.png -------------------------------------------------------------------------------- /docs/loading.md: -------------------------------------------------------------------------------- 1 | # Loading加载 2 | 加载数据时的 loading 效果 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-loading": "weui-miniprogram/loading/loading" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | ## 属性列表 16 | | 属性 | 类型 | 默认值 | 说明 | 17 | | ---- | ---- | ------ | ---- | 18 | | extClass | string | | 组件类名 | 19 | | show | boolean | true | loading 是否展示 | 20 | | animated | boolean | false | loading 显示/消失 动画 | 21 | | duration | number | 350 | 过渡动画时间 | 22 | | type | string | dot-gray | loading 类型，可选值有 dot-white、dot-gray、circle | 23 | | tips | string | 加载中 | 当 type 为 circle时生效，loading辅助文字 | 24 | -------------------------------------------------------------------------------- /docs/msg.md: -------------------------------------------------------------------------------- 1 | # Msg 2 | Msg组件提供操作确认页或操作成功或失败的标准的确认页的样式。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-msg": "weui-miniprogram/msg/msg" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | 16 | ## 属性列表 17 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 18 | | ---- | ---- | ------ | -------- | ---- | 19 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 20 | | type | string | | 否 | 顶部图标的样式，和[icon](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)组件的type属性用法一样 | 21 | | size | number | 64 | 否 | type不为空的时候有效，和[icon](https://developers.weixin.qq.com/miniprogram/dev/component/icon.html)组件的size属性用法一样 | 22 | | icon | string | | 否 | type为空的时候，icon的值是顶部图标的路径 | 23 | | title | string | | 否 | 标题 | 24 | | desc | string | | 否 | 描述内容，和desc的slot显示在相同的位置 | 25 | 26 | ## Slot 27 | | 名称 | 描述 | 28 | | ---- | ---- | 29 | | desc | 描述内容slot | 30 | | extend | desc下面的说明区域的slot | 31 | | handle | 操作按钮区域slot | 32 | | footer | 底部slot | 33 | -------------------------------------------------------------------------------- /docs/navigation.md: -------------------------------------------------------------------------------- 1 | # Navigation 2 | Navigation是小程序的顶部导航组件，当页面配置`navigationStyle`设置为`custom`的时候可以使用此组件替代原生导航栏。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | 16 | ## 属性列表 17 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 18 | | ---- | ---- | ------ | -------- | ---- | 19 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 20 | | title | string | | 否 | 导航标题，如果不提供，则名为center的slot有效 | 21 | | back | boolean | true | 否 | 是否显示返回按钮，默认点击按钮会执行navigateBack，如果为false，则名为left的slot有效 | 22 | | delta | number | 1 | 否 | 当back为true的时候有效，表示navigateBack的delta参数 | 23 | | background | string | #f8f8f8 | 否 | 导航背景色 | 24 | | color | string | | 否 | 导航颜色 | 25 | | loading | boolean | | 否 | 是否显示标题左侧的loading | 26 | | show | boolean | | 否 | 显示隐藏导航，隐藏的时候navigation的高度占位还在 | 27 | | animated | boolean | | 否 | 显示隐藏导航的时候是有opacity过渡动画 | 28 | | bindback | eventhandler | | 否 | 在back为true时，点击back按钮触发此事件，detail包含delta | 29 | 30 | ## Slot 31 | | 名称 | 描述 | 32 | | ---- | ---- | 33 | | left | 左侧slot，在back按钮位置显示，当back为false的时候有效 | 34 | | center | 标题slot，在标题位置显示，当title为空的时候有效 | 35 | | right | 在导航的右侧显示 | 36 | -------------------------------------------------------------------------------- /docs/search.md: -------------------------------------------------------------------------------- 1 | # Searchbar 2 | 搜索组件Searchbar提供搜索的功能，并展示搜索的结果。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-searchbar": "weui-miniprogram/searchbar/searchbar" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | 16 | ## 属性列表 17 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 18 | | ---- | ---- | ------ | -------- | ---- | 19 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 20 | | focus | boolean | false | 否 | 是否在组件开始创建的时候focus搜索输入框 | 21 | | placeholder | string | 搜索 | 否 | 搜索输入框的placeholder | 22 | | value | string | | 否 | 搜索输入框的默认值 | 23 | | search | function | | 是 | 输入过程不断调用此函数得到新的搜索结果，参数是输入框的值value，返回Promise实例 | 24 | | throttle | number | 500 | 否 | 调用search函数的间隔，单位ms | 25 | | cancelText | string | 取消 | 否 | 取消按钮的文本 | 26 | | cancel | boolean | true | 否 | 是否显示取消按钮 | 27 | | bindfocus | eventhandle | | 否 | 在输入框focus的时候触发事件 | 28 | | bindblur | eventhandle | | 否 | 在输入框blur的时候触发事件 | 29 | | bindclear | eventhandle | | 否 | 在clear按钮点击的时候触发事件 | 30 | | bindinput | eventhandle | | 否 | 在输入框输入过程中触发事件 | 31 | | bindselectresult | eventhandle | | 否 | 在选择搜索结果的时候触发事件 | 32 | -------------------------------------------------------------------------------- /docs/slideview.md: -------------------------------------------------------------------------------- 1 | # Slideview 2 | 左滑删除组件，基础库 2.4.4 开始支持。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-slideview": "weui-miniprogram/slideview/slideview" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | ## 属性列表 16 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 17 | | ---- | ---- | ------ | -------- | ---- | 18 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 19 | | disable | boolean | false | 否 | 是否禁用slideview | 20 | | buttons | array\ | [] | 是 | 左滑的按钮组，建议最多3个按钮 | 21 | | icon | boolean | false | 否 | 按钮是否是icon | 22 | | show | boolean | | 否 | 是否显示slideview，可以控制隐藏显示 | 23 | | duration | boolean | 350 | 否 | slideview显示隐藏的动画的时长 | 24 | | throttle | number | 40 | 否 | 手指移动距离超过该值的时候，触发slideview的显示隐藏 | 25 | | bindbuttontap | eventhandler | | 否 | buttons按钮组点击时触发的事件，detail为{index, data}，data是按钮的配置项传入的data参数 | 26 | | bindhide | eventhandler | | 否 | 隐藏时触发的事件 | 27 | | bindshow | eventhandler | | 否 | 显示时触发的事件 | 28 | 29 | buttons提供按钮组配置，每一项表示一个按钮，每一项的属性为 30 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 31 | | ---- | ---- | ------ | -------- | ---- | 32 | | extClass | string | | 否 | 按钮的额外的class，可用于修改组件内部的样式 | 33 | | type | string | default | 否 | 按钮的类型，取值default和warn，warn是红色按钮 | 34 | | text | string | | 否 | 按钮的文本 | 35 | | src | string | | 否 | 如果icon为true，此属性有效 | 36 | | data | any | | 否 | 触发bindbuttontap回传的数据 | 37 | -------------------------------------------------------------------------------- /docs/tabbar.md: -------------------------------------------------------------------------------- 1 | # Tabbar 2 | Tabbar组件，也可以用来作为小程序的[自定义Tabbar](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html)使用 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-tabbar": "weui-miniprogram/tabbar/tabbar" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | ## 属性列表 16 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 17 | | ---- | ---- | ------ | -------- | ---- | 18 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 19 | | list | array\ | | 否 | Tabbar的项的数组，按照规范，至少要有2个Tabbar项 | 20 | | current | number | 0 | 否 | 当前选中的Tabbar项的下标 | 21 | | bindchange | eventhandler | | 否 | Tabbar项发生改变的时候触发此事件，detail为{index, item}，index是Tabbar下标，item是对应的Tabbar项的配置 | 22 | 23 | list属性是对象数组，每一项表示一个Tabbar项，其字段含义为 24 | | 字段名 | 类型 | 默认值 | 必填 | 说明 | 25 | | ---- | ---- | ------ | -------- | ---- | 26 | | text | string | | 是 | Tabbar项的标题 | 27 | | iconPath | string | | 否 | Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。 | 28 | | selectedIconPath | string | | 否 | Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。 | 29 | | badge | string | | 否 | 是否显示Tabbar的右上角的Badge | 30 | -------------------------------------------------------------------------------- /docs/toptips.md: -------------------------------------------------------------------------------- 1 | # Toptips 2 | Toptips顶部错误提示组件，常用于表单校验或提交请求到后台成功或失败的错误提示，如下图所示。 3 | 4 | ![](./img/toptips.png#width:300px) 5 | 6 | ## 引入组件 7 | 在 page.json 中引入组件 8 | ```json 9 | { 10 | "usingComponents": { 11 | "mp-toptips": "weui-miniprogram/toptips/toptips" 12 | } 13 | } 14 | ``` 15 | 16 | ## 示例代码 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | ```js 23 | // page.js示例代码 24 | Page({ 25 | data: { 26 | error: '' 27 | }, 28 | onShow() { 29 | this.setData({ 30 | error: '这是一个错误提示' 31 | }) 32 | } 33 | }); 34 | ``` 35 | 36 | ## 属性列表 37 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 38 | | ---- | ---- | ------ | -------- | ---- | 39 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 40 | | type | string | | 否 | 提示类型，可以为info、error、success，表示三种提示颜色 | 41 | | show | boolean | false | 否 | 是否显示Toptips | 42 | | msg | string | | 是 | 提示内容 | 43 | | delay | number | 2000 | 否 | 提示内容显示后隐藏的ms值 | 44 | | bindhide | eventhandler | | 否 | 顶部提示隐藏的时候触发的事件 | 45 | -------------------------------------------------------------------------------- /docs/uploader.md: -------------------------------------------------------------------------------- 1 | # Uploader 2 | 图片上传Uploader组件。 3 | 4 | ## 代码引入 5 | 在 page.json 中引入组件 6 | ```json 7 | { 8 | "usingComponents": { 9 | "mp-uploader": "weui-miniprogram/uploader/uploader" 10 | } 11 | } 12 | ``` 13 | 14 | 15 | ## 属性列表 16 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 17 | | ---- | ---- | ------ | -------- | ---- | 18 | | ext-class | string | | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | 19 | | title | string | 图片上传 | 否 | 组件标题 | 20 | | tips | string | | 否 | 组件的提示 | 21 | | delete | boolean | | 是 | 是否显示删除按钮 | 22 | | size-type | array | | 是 | 和chooseImage的sizeType参数一样 | 23 | | source-type | array | | 是 | 和chooseImage的sourceType参数一样 | 24 | | max-size | number | 5 * 1024 * 1024 | 是 | 图片上传的最大文件限制，默认是5M | 25 | | max-count | number | 1 | 否 | 图片上传的个数限制 | 26 | | files | array\ | | 否 | 当前的图片列表 | 27 | | select | function | | 否 | 选择图片时的过滤函数，返回true表示图片有效 | 28 | | upload | function | | 否 | 图片上传的函数，返回Promise，Promise的callback里面必须resolve({urls})表示成功，否则表示失败 | 29 | | bindselect | eventhandler | | 否 | 图片选择触发的事件，detail为{tempFilePaths, tempFiles, contents},其中tempFiles和tempFilePaths是chooseImage返回的字段，contents表示所选的图片的二进制Buffer列表 | 30 | | bindcancel | eventhandler | | 否 | 取消图片选择的事件，detail为{} | 31 | | bindsuccess | eventhandler | | 否 | 图片上传成功的事件，detail为{urls}，urls为upload函数上传成功返回的urls参数 | 32 | | bindfail | eventhandler | | 否 | 图片上传失败的事件，detail为{type, errMsg}，type为1表示图片超过大小限制，type为2表示选择图片失败，type为3表示图片上传失败。 | 33 | | binddelete | eventhandler | | 否 | 删除图片触发的事件，detail为{index, item}，index表示删除的图片的下标，item为图片对象。 | 34 | 35 | files表示当前的图片列表，每一项的定义为 36 | | 属性 | 类型 | 默认值 | 必填 | 说明 | 37 | | ---- | ---- | ------ | -------- | ---- | 38 | | url | string | | 是 | 图片链接 | 39 | | loading | boolean | | 否 | 图片上传中 | 40 | | error | boolean | | 否 | 图片上传失败 | 41 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 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`)) 29 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bail: 1, 3 | verbose: true, 4 | testEnvironment: 'jsdom', 5 | testURL: 'https://jest.test', 6 | moduleFileExtensions: ['js', 'ts'], 7 | testMatch: ['/src/**/__test__/**/*.test.{js,ts}'], 8 | collectCoverageFrom: [ 9 | '/src/**/*.{js,ts}', 10 | '!/src/weui-wxss/**', 11 | '!**/__test__/**' 12 | ], 13 | snapshotSerializers: ['miniprogram-simulate/jest-snapshot-plugin'] 14 | } 15 | -------------------------------------------------------------------------------- /mpflow.config.js: -------------------------------------------------------------------------------- 1 | const TerserWebpackPlugin = require('terser-webpack-plugin') 2 | 3 | module.exports = { 4 | appId: 'wxe5f52902cf4de896', 5 | projectName: '小程序自定义组件', 6 | app: (mode) => (mode !== 'production' ? 'src/app' : undefined), 7 | pages: (mode) => (mode !== 'production' ? undefined : ['src/components/index']), 8 | sourceMap: (mode) => mode !== 'production', 9 | compileType: 'miniprogram', 10 | outputDir: 'miniprogram_dist', 11 | plugins: ['@mpflow/plugin-babel', '@mpflow/plugin-typescript', '@mpflow/plugin-css'], 12 | minimize: false, 13 | configureWebpackChain: (config) => { 14 | config.plugin('terser').use(TerserWebpackPlugin, [ 15 | { 16 | terserOptions: { 17 | compress: { 18 | directives: false 19 | } 20 | } 21 | } 22 | ]) 23 | }, 24 | settings: { 25 | urlCheck: true, 26 | es6: false, 27 | postcss: false, 28 | preloadBackgroundData: false, 29 | minified: false, 30 | newFeature: true, 31 | coverView: true, 32 | nodeModules: true, 33 | autoAudits: false, 34 | showShadowRootInWxmlPanel: true, 35 | scopeDataCheck: false, 36 | checkInvalidKey: true, 37 | checkSiteMap: true, 38 | uploadWithSourceMap: true, 39 | compileHotReLoad: false, 40 | babelSetting: { 41 | ignore: [], 42 | disablePlugins: [], 43 | outputPath: '' 44 | }, 45 | useIsolateContext: true, 46 | useCompilerModule: false, 47 | userConfirmedUseCompilerModuleSwitch: false, 48 | compileWorklet: true, 49 | minifyWXSS: false 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | const themeListeners = [] 2 | 3 | App({ 4 | onLaunch: function () { 5 | console.log('App Launch') 6 | wx.onThemeChange(({ theme }) => { 7 | this.themeChanged(theme) 8 | }) 9 | }, 10 | onShow: function () { 11 | console.log('App Show') 12 | }, 13 | onHide: function () { 14 | console.log('App Hide') 15 | }, 16 | themeChanged(theme) { 17 | this.globalData.theme = theme 18 | themeListeners.forEach((listener) => { 19 | listener(theme) 20 | }) 21 | }, 22 | watchThemeChange(listener) { 23 | if (themeListeners.indexOf(listener) < 0) { 24 | themeListeners.push(listener) 25 | } 26 | }, 27 | unWatchThemeChange(listener) { 28 | const index = themeListeners.indexOf(listener) 29 | if (index > -1) { 30 | themeListeners.splice(index, 1) 31 | } 32 | }, 33 | globalData: { 34 | hasLogin: false, 35 | theme: wx.getAppBaseInfo().theme, 36 | GRID_DEMO_URL: '/example/index', 37 | iconTabbar: require('/example/images/icon_tabbar.png').default 38 | } 39 | }) 40 | -------------------------------------------------------------------------------- /src/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "example/index", 4 | 5 | "example/button/button", 6 | "example/cell/cell", 7 | "example/slideview/slideview", 8 | "example/form/form", 9 | "example/form-page/form-page", 10 | "example/slider/slider", 11 | "example/uploader/uploader", 12 | 13 | "example/article/article", 14 | "example/badge/badge", 15 | "example/flex/flex", 16 | "example/footer/footer", 17 | "example/gallery/gallery", 18 | "example/grid/grid", 19 | "example/icons/icons", 20 | "example/loadmore/loadmore", 21 | "example/loading/loading", 22 | "example/panel/panel", 23 | "example/preview/preview", 24 | "example/progress/progress", 25 | 26 | "example/actionsheet/actionsheet", 27 | "example/dialog/dialog", 28 | "example/msg/msg", 29 | "example/msg/msg_text", 30 | "example/msg/msg_text_primary", 31 | "example/msg/msg_success", 32 | "example/msg/msg_fail", 33 | "example/half-screen-dialog/half-screen-dialog", 34 | "example/picker/picker", 35 | "example/toast/toast", 36 | "example/toptips/toptips", 37 | 38 | "example/navbar/navbar", 39 | "example/navigation/navigation", 40 | "example/tabbar/tabbar", 41 | 42 | "example/searchbar/searchbar" 43 | ], 44 | "window": { 45 | "navigationBarTextStyle": "black", 46 | "navigationBarTitleText": "小程序UI组件库", 47 | "navigationBarBackgroundColor": "#f8f8f8", 48 | "backgroundColor": "#f8f8f8" 49 | }, 50 | "networkTimeout": { 51 | "request": 10000, 52 | "connectSocket": 10000, 53 | "uploadFile": 10000, 54 | "downloadFile": 10000 55 | }, 56 | "debug": true, 57 | "style": "v2", 58 | "darkmode": true, 59 | "lazyCodeLoading": "requiredComponents", 60 | "renderer": "skyline", 61 | "rendererOptions": { 62 | "skyline": { 63 | "defaultDisplayBlock": true, 64 | "defaultContentBox": true 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/app.less: -------------------------------------------------------------------------------- 1 | @import "./example/common.less"; 2 | 3 | .page { 4 | display: flex; 5 | width: 100vw; 6 | height: 100vh; 7 | flex-direction: column; 8 | } 9 | 10 | .page-height { 11 | height: 100%; 12 | flex: 1 1 0; 13 | overflow: hidden; 14 | } 15 | 16 | navigator text, 17 | text text, 18 | text navigator { 19 | display: inline; 20 | } 21 | 22 | .wx-scroll-view-flex:is(div):not(.wx-scroll-view-flex) { 23 | width: auto !important; 24 | } 25 | -------------------------------------------------------------------------------- /src/base/CustomPage.js: -------------------------------------------------------------------------------- 1 | import themeMixin from './behaviors/theme' 2 | 3 | const CustomPage = function (options) { 4 | return Page( 5 | Object.assign({}, options, { 6 | behaviors: [themeMixin].concat(options.behaviors || []), 7 | onLoad(query) { 8 | const app = getApp() 9 | this.themeChanged(app.globalData.theme) 10 | app.watchThemeChange && app.watchThemeChange(this.themeChanged) 11 | options.onLoad && options.onLoad.call(this, query) 12 | }, 13 | onUnload() { 14 | const app = getApp() 15 | app.unWatchThemeChange && app.unWatchThemeChange(this.themeChanged) 16 | options.onUnload && options.onUnload.call(this) 17 | } 18 | }) 19 | ) 20 | } 21 | 22 | export default CustomPage 23 | -------------------------------------------------------------------------------- /src/base/behaviors/theme.js: -------------------------------------------------------------------------------- 1 | module.exports = Behavior({ 2 | data: { 3 | theme: 'light' 4 | }, 5 | methods: { 6 | themeChanged(theme) { 7 | this.setData({ 8 | theme 9 | }) 10 | } 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /src/components/actionsheet/__test__/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "mp-actionsheet": "../actionsheet" 5 | } 6 | } -------------------------------------------------------------------------------- /src/components/actionsheet/__test__/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | showCancel: { 4 | type: Boolean, 5 | value: true 6 | } 7 | }, 8 | data: { 9 | tapValue: 0, 10 | show: true, 11 | actions: [ 12 | { text: 'item 1', value: 1 }, 13 | { text: 'item 2', value: 2 }, 14 | { text: 'item 3', type: 'warn', value: 3 } 15 | ] 16 | }, 17 | methods: { 18 | actiontap(event): void { 19 | this.setData({ 20 | tapValue: event.detail.value 21 | }) 22 | }, 23 | close(): void { 24 | this.setData({ 25 | show: false 26 | }) 27 | } 28 | } 29 | }) 30 | -------------------------------------------------------------------------------- /src/components/actionsheet/__test__/index.wxml: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/actionsheet/actionsheet.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": {} 5 | } -------------------------------------------------------------------------------- /src/components/actionsheet/actionsheet.less: -------------------------------------------------------------------------------- 1 | .weui-actionsheet__action { 2 | padding-bottom: 0; 3 | } 4 | 5 | .weui-actionsheet__cell_cancel { 6 | padding-bottom: calc(16px + env(safe-area-inset-bottom)); 7 | } 8 | 9 | .weui-actionsheet__title:focus { 10 | outline: none; 11 | } 12 | 13 | .weui-actionsheet { 14 | transform: none; 15 | -webkit-transform: none; 16 | } 17 | 18 | // FIXME: skyline animation 暂有 scope 的 bug 19 | .weui-animate-fade-in { 20 | animation: weuiFadeIn ease 0.3s forwards; 21 | } 22 | 23 | @keyframes weuiFadeIn { 24 | from { 25 | opacity: 0; 26 | } 27 | to { 28 | opacity: 1; 29 | } 30 | } 31 | 32 | .weui-animate-fade-out { 33 | animation: weuiFadeOut ease 0.3s forwards; 34 | } 35 | 36 | @keyframes weuiFadeOut { 37 | from { 38 | opacity: 1; 39 | } 40 | to { 41 | opacity: 0; 42 | } 43 | } 44 | 45 | .weui-animate-slide-up { 46 | animation: weuiSlideUp ease 0.3s forwards; 47 | } 48 | 49 | @keyframes weuiSlideUp { 50 | from { 51 | transform: translate3d(0, 100%, 0); 52 | } 53 | to { 54 | transform: translateZ(0); 55 | } 56 | } 57 | 58 | .weui-animate-slide-down { 59 | animation: weuiSlideDown ease 0.3s forwards; 60 | } 61 | 62 | @keyframes weuiSlideDown { 63 | from { 64 | transform: translateZ(0); 65 | } 66 | to { 67 | transform: translate3d(0, 100%, 0); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/badge/__test__/__snapshots__/badage.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`badge badge with content 1`] = ` 4 |
5 | 9 | badge content 10 | 11 |
12 | `; 13 | 14 | exports[`badge badge without content 1`] = ` 15 |
16 | 20 | 21 | 22 |
23 | `; 24 | -------------------------------------------------------------------------------- /src/components/badge/__test__/badage.test.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import simulate from 'miniprogram-simulate' 3 | 4 | describe('badge', () => { 5 | let id 6 | 7 | beforeAll(() => { 8 | id = simulate.load(path.resolve(__dirname, '../badge'), { less: true }) 9 | }) 10 | 11 | test('badge with content', () => { 12 | const content = 'badge content' 13 | const comp = simulate.render(id, { 14 | content: content 15 | }) 16 | comp.attach(document.createElement('parent-wrapper')) 17 | 18 | expect(comp.toJSON()).toMatchSnapshot() 19 | }) 20 | 21 | test('badge without content', () => { 22 | const comp = simulate.render(id, {}) 23 | comp.attach(document.createElement('parent-wrapper')) 24 | 25 | expect(comp.toJSON()).toMatchSnapshot() 26 | }) 27 | }) 28 | -------------------------------------------------------------------------------- /src/components/badge/badge.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": {} 5 | } -------------------------------------------------------------------------------- /src/components/badge/badge.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/src/components/badge/badge.less -------------------------------------------------------------------------------- /src/components/badge/badge.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | extClass: { 4 | type: String, 5 | value: '' 6 | }, 7 | content: { 8 | type: String, 9 | value: '' 10 | }, 11 | ariaLabel: { 12 | type: String, 13 | value: '' 14 | } 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /src/components/badge/badge.wxml: -------------------------------------------------------------------------------- 1 | {{content}} -------------------------------------------------------------------------------- /src/components/cell/cell.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": { 5 | "mp-cells": "../cells/cells" 6 | } 7 | } -------------------------------------------------------------------------------- /src/components/cell/cell.less: -------------------------------------------------------------------------------- 1 | .weui-cell_wxss.weui-cell_wxss::before{ 2 | display: flex; 3 | } 4 | 5 | /* skyline 不支持 currentColor */ 6 | .weui-cell_access .weui-cell__ft::after { 7 | background-color: var(--weui-FG-2); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/cell/cell.wxml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{title}} 16 | 17 | 18 | 19 | 20 | 21 | {{title}} 22 | 23 | 24 | 25 | 26 | 27 | 28 | {{value}} 29 | 30 | 31 | 32 | 33 | 34 | {{footer}} 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/cells/__test__/cells.test.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import simulate from 'miniprogram-simulate' 3 | 4 | describe('cells & cell', () => { 5 | let id 6 | 7 | beforeAll(() => { 8 | id = simulate.load(path.resolve(__dirname, './index'), { less: true }) 9 | }) 10 | 11 | test('basic cells & cell', async () => { 12 | const container = simulate.render(id) 13 | container.attach(document.createElement('parent-wrapper')) 14 | expect(container.toJSON()).toMatchSnapshot() 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /src/components/cells/__test__/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | data: { 3 | tapValue: 0, 4 | actions: [ 5 | { text: 'item 1', value: 1 }, 6 | { text: 'item 2', value: 2 }, 7 | { text: 'item 3', type: 'warn', value: 3 } 8 | ] 9 | }, 10 | methods: { 11 | actiontap(event) { 12 | this.setData({ 13 | tapValue: event.detail.value 14 | }) 15 | }, 16 | close() { 17 | this.setData({ 18 | close: 'true' 19 | }) 20 | } 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /src/components/cells/__test__/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "mp-cells": "../../cells/cells", 5 | "mp-cell": "../../cell/cell" 6 | } 7 | } -------------------------------------------------------------------------------- /src/components/cells/__test__/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/cells/cells.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": {} 5 | } -------------------------------------------------------------------------------- /src/components/cells/cells.less: -------------------------------------------------------------------------------- 1 | .weui-cells__group_wxss.weui-cells__group_wxss .weui-cells__title { 2 | margin-top: 24px; 3 | } 4 | .weui-cells__group_form .weui-cells__tips { 5 | margin-top: 8px; 6 | padding: 0 32px; 7 | color: var(--weui-FG-1); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/cells/cells.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | 4 | 5 | 6 | {{footer}} 7 | 8 | -------------------------------------------------------------------------------- /src/components/checkbox-group/checkbox-group.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": { 5 | "mp-cells": "../cells/cells" 6 | } 7 | } -------------------------------------------------------------------------------- /src/components/checkbox-group/checkbox-group.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wechat-miniprogram/weui-miniprogram/c2fe8e2598b345e7d663fa5ceda7bb9229d52fbd/src/components/checkbox-group/checkbox-group.less -------------------------------------------------------------------------------- /src/components/checkbox-group/checkbox-group.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/checkbox/__test__/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | data: { 3 | radioItems: [ 4 | { name: 'cell standard', value: '0' }, 5 | { name: 'cell standard', value: '1' } 6 | ], 7 | checkboxItems: [ 8 | { name: 'standard is dealt for u.', value: '0' }, 9 | { name: 'standard is dealicient for u.', value: '1' } 10 | ], 11 | radioValue: '', 12 | checkboxValue: 0 13 | }, 14 | methods: { 15 | radioChange(e) { 16 | this.setData({ 17 | radioValue: e.detail.value 18 | }) 19 | }, 20 | checkboxChange(e) { 21 | this.setData({ 22 | checkboxValue: e.detail.value.join(',') 23 | }) 24 | } 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /src/components/checkbox/__test__/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "mp-checkbox-group": "../../checkbox-group/checkbox-group", 5 | "mp-checkbox": "../../checkbox/checkbox" 6 | } 7 | } -------------------------------------------------------------------------------- /src/components/checkbox/__test__/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": { 5 | "mp-cell": "../cell/cell", 6 | "mp-checkbox-group": "../checkbox-group/checkbox-group" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.less: -------------------------------------------------------------------------------- 1 | @import (reference) '~weui-wxss/src/style/widget/weui-cell/weui-check/weui-radio.less'; 2 | @import (reference) '~weui-wxss/src/style/widget/weui-cell/weui-check/weui-checkbox.less'; 3 | 4 | .weui-cell_wxss.weui-cell_wxss::before{ 5 | display: flex; 6 | } 7 | 8 | .weui-cell_radio .weui-check+.weui-icon-checked { 9 | color: transparent; 10 | } 11 | 12 | .weui-cell_radio .weui-check + .weui-icon-checked { 13 | &.weui-icon-is-checked { 14 | /* skyline 不支持 attribute selector */ 15 | &:extend(.weui-cells_radio .weui-check:checked + .weui-icon-checked); 16 | background-color: @weuiColorPrimary; 17 | } 18 | background-color: transparent; 19 | } 20 | 21 | .weui-cell_checkbox .weui-check + .weui-icon-checked { 22 | &.weui-icon-is-checked { 23 | /* skyline 不支持 attribute selector */ 24 | &:extend(.weui-cells_checkbox .weui-check:checked + .weui-icon-checked); 25 | } 26 | &:extend(.weui-cells_checkbox .weui-icon-checked); 27 | } -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/dialog/__test__/dialog.test.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import simulate from 'miniprogram-simulate' 3 | 4 | describe('dialog', () => { 5 | let id 6 | 7 | beforeAll(() => { 8 | id = simulate.load(path.resolve(__dirname, './index'), { less: true }) 9 | }) 10 | 11 | test('basic dialog', async () => { 12 | const container = simulate.render(id) 13 | container.attach(document.createElement('parent-wrapper')) 14 | expect(container.toJSON()).toMatchSnapshot() 15 | }) 16 | 17 | test('buttons', async () => { 18 | const container = simulate.render(id) 19 | container.attach(document.createElement('parent-wrapper')) 20 | 21 | const [cancelBtn, confirmBtn] = container.querySelectorAll('.dialog >>> .weui-dialog__btn') 22 | 23 | cancelBtn.dispatchEvent('tap') 24 | await simulate.sleep(10) 25 | expect(container.data.buttonValue).toBe('取消') 26 | 27 | confirmBtn.dispatchEvent('tap') 28 | await simulate.sleep(10) 29 | expect(container.data.buttonValue).toBe('确定') 30 | }) 31 | 32 | test('close', async () => { 33 | const container = simulate.render(id) 34 | container.attach(document.createElement('parent-wrapper')) 35 | 36 | container.querySelector('.dialog >>> .weui-mask').dispatchEvent('tap') 37 | await simulate.sleep(10) 38 | expect(container.data.closed).toBe(true) 39 | expect(container.toJSON()).toMatchSnapshot() 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /src/components/dialog/__test__/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | data: { 3 | buttonValue: '', 4 | closed: false, 5 | buttons: [{ text: '取消' }, { text: '确定' }] 6 | }, 7 | methods: { 8 | buttontap(e) { 9 | this.setData({ 10 | buttonValue: e.detail.item.text 11 | }) 12 | }, 13 | close(e) { 14 | this.setData({ 15 | closed: true 16 | }) 17 | } 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /src/components/dialog/__test__/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "mp-dialog": "..//dialog" 5 | } 6 | } -------------------------------------------------------------------------------- /src/components/dialog/__test__/index.wxml: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/components/dialog/dialog.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "styleIsolation": "apply-shared", 4 | "usingComponents": {} 5 | } -------------------------------------------------------------------------------- /src/components/dialog/dialog.less: -------------------------------------------------------------------------------- 1 | .weui-dialog__root { 2 | position: relative; 3 | z-index: 1000; 4 | } 5 | 6 | .weui-dialog__title:focus { 7 | outline: none; 8 | } 9 | 10 | 11 | 12 | // FIXME: skyline animation 暂有 scope 的 bug 13 | .weui-animate-fade-in { 14 | animation: weuiFadeIn ease 0.3s forwards; 15 | } 16 | 17 | @keyframes weuiFadeIn { 18 | from { 19 | opacity: 0; 20 | } 21 | to { 22 | opacity: 1; 23 | } 24 | } 25 | 26 | .weui-animate-fade-out { 27 | animation: weuiFadeOut ease 0.3s forwards; 28 | } 29 | 30 | @keyframes weuiFadeOut { 31 | from { 32 | opacity: 1; 33 | } 34 | to { 35 | opacity: 0; 36 | } 37 | } -------------------------------------------------------------------------------- /src/components/dialog/dialog.wxml: -------------------------------------------------------------------------------- 1 | 34 | 35 | 36 | 41 |