|
|
před 1 rokem | |
|---|---|---|
| .. | ||
| .circleci | před 1 rokem | |
| .github | před 1 rokem | |
| example | před 1 rokem | |
| packages | před 1 rokem | |
| screenshots | před 1 rokem | |
| scripts | před 1 rokem | |
| src | před 1 rokem | |
| .babelrc | před 1 rokem | |
| .editorconfig | před 1 rokem | |
| .eslintignore | před 1 rokem | |
| .eslintrc.js | před 1 rokem | |
| .stylelintignore | před 1 rokem | |
| .stylelintrc.js | před 1 rokem | |
| .travis.yml | před 1 rokem | |
| LICENSE | před 1 rokem | |
| README.md | před 1 rokem | |
| gulpfile.babel.js | před 1 rokem | |
| package.json | před 1 rokem | |
| postcss.config.js | před 1 rokem | |
在开始使用之前,你需要先阅读 微信小程序自定义组件 的相关文档。
通过 npm 安装,需要依赖小程序基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建,详见 npm 支持。
# Using npm
npm i wux-weapp -S --production
# Using yarn
yarn add wux-weapp --production
通过 GitHub 下载 Wux Weapp 的代码,然后 将 packages/lib/ 目录拷贝到自己的项目中。
packages/lib/ - 压缩版(ES5)packages/es/ - 未压缩版(ES6,使用时需要开启 ES6 转 ES5,位于开发者工具右上角-详情-本地配置)git clone https://github.com/wux-weapp/wux-weapp.git
cd wux-weapp
参考 量身定制。
按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:
"usingComponents": {
"wux-button": "../../dist/button/index"
}
<wux-button size="small">Button</wux-button>
<wux-button size="default">Button</wux-button>
<wux-button size="large">Button</wux-button>
随着组件库越来越丰富,文件的体积也越来越大,某些时候我们可能只需要其中的一个或多个组件,如果直接引入整个组件库的话是不合适的,这时候就需要我们将要使用到组件给单独抽离出来。
使用 量身定制 功能自动抽离组件(官方推荐)。
手动抽离组件,也很简单直接拷贝 packages/ 目录下对应的组件即可,当然某些组件存在依赖关系,则抽离过程会相对复杂一些,以 ActionSheet、Badge、Button 为例。
demo/
|-actionsheet/
|-animation-group/
|-backdrop/
|-badge/
|-button/
|-helpers/
|-index.js
packages/ 目录下对应组件(如 actionsheet)拷贝至 demo 目录;index.json 是否存在依赖组件,若存在则一一拷贝;index.js 文件中),是则拷贝 index.js 文件,并删除不需要的组件引用;index.js 是否存在对帮助方法的引用,若存在则拷贝 helpers 目录(抑或直接拷贝不管是否存在引用)。您可以扫描下方的小程序码体验或用 微信web开发者工具 打开 example 目录(请注意,是 example 目录,不是整个项目)。
您可以扫码添加下方的左侧『Wux 小助手』微信并备注『Wux Weapp』或者『加群』进交流群。 注意:如果添加『Wux 小猪手』没有反应,可以再尝试添加后边作者『Skyvow』微信。
请作者喝营养快线补补小身体(`・ω・´)
有任何意见或建议都欢迎提 issue
MIT