├── .gitignore ├── README.md ├── SUMMARY.md ├── assets ├── bui-weex-toolkit.png ├── chengxubao.png ├── debug1.png ├── debug2.png ├── debug3.png ├── debug4.png ├── dev1.png ├── dev2.png ├── dev3.png ├── dev4.png ├── dev5.png ├── flow.png ├── gif │ ├── actionsheet.gif │ ├── btn.gif │ ├── cell.gif │ ├── checkbox.gif │ ├── dialog.gif │ ├── dropdown.gif │ ├── flexbox.gif │ ├── flow.gif │ ├── gridselect.gif │ ├── header.gif │ ├── icon.png │ ├── lazy.gif │ ├── loadmore.gif │ ├── number.gif │ ├── panel.png │ ├── pic.gif │ ├── popup.gif │ ├── radio.gif │ ├── richcell.png │ ├── search.gif │ ├── slider.gif │ ├── swipecell.gif │ ├── tabbar-scroller.gif │ ├── tabbar.gif │ ├── tag.png │ ├── timeline.jpg │ └── tip.png ├── icon.png ├── ide1.png ├── ide2.png ├── ide3.png ├── ide4.png ├── ide5.png ├── ide6.png ├── ide7.png ├── import.png ├── import2.png ├── import3.png ├── import4.png ├── import6.png ├── import9.png ├── logo.png ├── playground_preview.png ├── qrcode │ ├── actionsheet.png │ ├── btn.png │ ├── cell.png │ ├── checkbox.png │ ├── dialog.png │ ├── dropdown.png │ ├── flexbox.png │ ├── flow.png │ ├── gridselect.png │ ├── header.png │ ├── icon.png │ ├── img.png │ ├── lazy.png │ ├── list.png │ ├── number.png │ ├── panel.png │ ├── popup.png │ ├── radio.png │ ├── richcell.png │ ├── search.png │ ├── slider.png │ ├── swipecell.png │ ├── tabbar-scroller.png │ ├── tabbar.png │ ├── tag.png │ ├── timeline.png │ └── tip.png ├── toolkit1.png ├── web_preview.png ├── webstorm-plugin1.png ├── webstorm-plugin2.png ├── webstorm-plugin3.png ├── webstorm1.png ├── webstorm_npm.png └── webstorm_npm1.png ├── book.js ├── case.html ├── css ├── base.css ├── base.css.map ├── base.scss ├── index.css ├── index.css.map ├── index.scss └── style.css ├── debug.md ├── env.md ├── faq.md ├── folder.md ├── images ├── bg.png ├── bui-weex-logo-black.png ├── bui-weex-logo-title.png ├── bui-weex-logo.png ├── close.png ├── favicon.ico ├── githup-white.png ├── githup.png ├── img │ └── fenxiao │ │ ├── 01.jpg │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ ├── 05.png │ │ └── 06.png ├── left.png ├── loading.gif ├── loading.jpg ├── logo.png ├── menu.png ├── preview.gif ├── qrcode.png ├── right.png └── s_gallery_2012110702.png ├── index.html ├── integration.md ├── js ├── album.js ├── carousel.js └── jquery.js ├── linkide.md ├── logo.png ├── page.md ├── project.md ├── publish.md ├── reference ├── bui-actionsheet.md ├── bui-button.md ├── bui-cell.md ├── bui-checkbox.md ├── bui-dialog.md ├── bui-dropdown.md ├── bui-flow.md ├── bui-grid-select.md ├── bui-header.md ├── bui-icon.md ├── bui-image-slider.md ├── bui-image.md ├── bui-layzy-render.md ├── bui-list.md ├── bui-panel.md ├── bui-popup.md ├── bui-radio.md ├── bui-richcell.md ├── bui-search.md ├── bui-swipe-cell.md ├── bui-switch.md ├── bui-tabbar-scroller.md ├── bui-tabbar.md ├── bui-tag.md ├── bui-timeline.md ├── bui-tip.md ├── buiweexjs.md ├── layoutcss.md ├── pagestruct.md └── textcss.md └── update ├── 0.2.X.md └── 0.3.X.md /.gitignore: -------------------------------------------------------------------------------- 1 | /_book 2 | /Library 3 | *log 4 | **/.DS_Store 5 | .idea 6 | *.css.map 7 | *.scss 8 | /node_modules 9 | package-lock.json 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

4 | 5 | 6 |

7 | GitHub last commit 8 | npm 9 | NPM downloads 10 | NPM all downloads 11 | GitHub closed issues 12 |

13 | 14 | ## BUI-Weex概述 15 | 16 | BUI-Weex 是一套专门为[ Weex ](http://weex-project.io/cn/)前端开发者打造的一套高质量UI框架。为了达到更好的效果，请在 `WeexSDK 0.11.0 +` 上使用这套UI框架。BUI-Weex致力于为`iOS`和`android`平台提供丰富的UI组件，帮助开发者快速构建移动应用。 17 | 18 | ## 工具集 19 | 20 | BUI-Weex 提供了一系列的开源工具集，包括： 21 | 22 | * [bui-weex](https://www.npmjs.com/package/bui-weex) 组件库: 托管在NPM上。bui-weex 是以 node_module 的方式存在的，更新组件库需要修改 package.json 版本号。该组件库可以独立使用，配合weex的工程即可，推荐使用我们提供的脚手架工程。 23 | * [bui-weex-toolkit](https://www.npmjs.com/package/bui-weex-toolkit) 命令行工具：托管在NPM上。需要安装到全局。该工具可以通过命令行快速创建脚手架工程和查看最新的脚手架工程。 24 | * [bui-weex-template](https://github.com/bingo-oss/bui-weex-template) 脚手架工程：基于weex官方的工程改造的，配合`bui-weex`组件库可以发挥更强的威力。托管在github上，下载即可使用。推荐使用 toolkit 来创建。 25 | 26 | `bui-weex-toolkit` 和 `bui-weex-template` 对于weex开发者来说是可选的。 27 | 28 | ## 示例预览 29 | 请使用[Playground](https://weex-project.io/cn/playground.html)扫描下面二维码即可查看效果 (Playground是weex提供的安装在手机端的调试工具)： 30 | 31 | ![](images/qrcode.png) 32 | 33 | ## 沟通交流 34 | 35 | **我们的GitHub仓库** 36 | 37 | bui-weex组件库 [https://github.com/bingo-oss/bui-weex](https://github.com/bingo-oss/bui-weex) 38 | 39 | bui-weex-sample示例库 [https://github.com/bingo-oss/bui-weex-sample](https://github.com/bingo-oss/bui-weex-sample) 40 | 41 | bui-weex-toolkit命令行工具 [https://github.com/bingo-oss/bui-weex-toolkit](https://github.com/bingo-oss/bui-weex-toolkit) 42 | 43 | bui-weex-template脚手架工程 [https://github.com/bingo-oss/bui-weex-template](https://github.com/bingo-oss/bui-weex-template) 44 | 45 | 46 | 欢迎大家给我们提 issue ：[https://github.com/bingo-oss/bui-weex/issues](https://github.com/bingo-oss/bui-weex/issues) 47 | 48 | 感谢理解与支持！ 49 | 50 | 51 | ## 阅读之前 52 | 53 | 在往下阅读开发文档之前，您需要具备如下技能： 54 | 55 | **技能一：熟悉 Weex 官方开发套路** 56 | 57 | 官网 ：[http://weex-project.io/cn/](http://weex-project.io/cn/) 58 | 59 | BUI-Weex 仅仅是在UI层面给予开发者提供脚手架以及丰富的组件，JS Module以及内置的功能，开发者需要在官网寻找答案。 60 | 61 | **技能二：熟悉 Vue2.0 语法** 62 | 63 | 官网：[https://cn.vuejs.org/](https://cn.vuejs.org/) 另外阅读：[【Vue 2.x 在 Weex 和 Web 中的差异】](http://weex-project.io/cn/references/vue/difference-with-web.html) 64 | 65 | Vue2.0 是前端领域炙手可热的 Javascript 框架，与 Weex 结合，使用Vue 作为上层框架，遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。 66 | 67 | **技能三：了解 Webpack 用法** 68 | 69 | 教程 ：[【Webpack简明教程】](https://www.magentonotes.com/webpack-tutorial.html) 70 | 71 | Webpack是目前最流行的前端模块加载方案，在Webpack中，所有资源都被当作是模块,js,css,image 等。支持压缩合并替换等功能。作为前端er，可以不知道 gulp ,但错过了 Webpack 会很遗憾 ！ 72 | 73 | **技能四：SASS语法** 74 | 75 | 官网：[http://www.w3cplus.com/sassguide/syntax.html](http://www.w3cplus.com/sassguide/syntax.html) 76 | 77 | Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。 -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [BUI-Weex概述](README.md) 4 | * 快速入门 5 | * [环境搭建](env.md) 6 | * [创建工程](project.md) 7 | * [目录规范](folder.md) 8 | * [开发调试](debug.md) 9 | * [页面开发](page.md) 10 | * [打包Bundle](publish.md) 11 | * 开发手册 12 | * [全局函数](reference/buiweexjs.md) 13 | * [页面结构](reference/pagestruct.md) 14 | * [布局样式](reference/layoutcss.md) 15 | * [文本样式](reference/textcss.md) 16 | * [按钮\(bui-button\)](reference/bui-button.md) 17 | * [字体图标\(bui-icon\)](reference/bui-icon.md) 18 | * [图片\(bui-image\)](reference/bui-image.md) 19 | * [提示\(bui-tip\)](reference/bui-tip.md) 20 | * [面板\(bui-panel\)](reference/bui-panel.md) 21 | * [标题栏\(bui-header\)](reference/bui-header.md) 22 | * [搜索框\(bui-search\)](reference/bui-search.md) 23 | * [列表\(bui-list\)](reference/bui-list.md) 24 | * [滑动菜单\(bui-swipe-cell\)](reference/bui-swipe-cell.md) 25 | * [选项卡\(bui-tabbar | bui-tabbar-scroller\)](reference/bui-tabbar.md) 26 | * [单元格\(bui-cell\)](reference/bui-cell.md) 27 | * [单选\(bui-radio\)](reference/bui-radio.md) 28 | * [复选\(bui-checkbox\)](reference/bui-checkbox.md) 29 | * [下拉菜单\(bui-dropdown\)](reference/bui-dropdown.md) 30 | * [上拉菜单\(bui-actionsheet\)](reference/bui-actionsheet.md) 31 | * [弹出框\(bui-dialog\)](reference/bui-dialog.md) 32 | * [弹出层\(bui-popup\)](reference/bui-popup.md) 33 | * [懒加载\(bui-layzy-render\)](reference/bui-layzy-render.md) 34 | * [图片轮播\(bui-image-slider\)](reference/bui-image-slider.md) 35 | * [富文本\(bui-richcell\)](reference/bui-richcell.md) 36 | * [多格筛选\(bui-grid-select\)](reference/bui-grid-select.md) 37 | * [流程图\(bui-flow | bui-timeline\)](reference/bui-flow.md) 38 | * [标签\(bui-tag\)](reference/bui-tag.md) 39 | * 版本升级 40 | * [0.2.X](update/0.2.X.md) 41 | * [0.3.X](update/0.3.X.md) 42 | * [Weex项目集成 BUI-Weex](integration.md) 43 | * [常见问题](faq.md) 44 | -------------------------------------------------------------------------------- /assets/bui-weex-toolkit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/bui-weex-toolkit.png -------------------------------------------------------------------------------- /assets/chengxubao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/chengxubao.png -------------------------------------------------------------------------------- /assets/debug1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/debug1.png -------------------------------------------------------------------------------- /assets/debug2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/debug2.png -------------------------------------------------------------------------------- /assets/debug3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/debug3.png -------------------------------------------------------------------------------- /assets/debug4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/debug4.png -------------------------------------------------------------------------------- /assets/dev1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/dev1.png -------------------------------------------------------------------------------- /assets/dev2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/dev2.png -------------------------------------------------------------------------------- /assets/dev3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/dev3.png -------------------------------------------------------------------------------- /assets/dev4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/dev4.png -------------------------------------------------------------------------------- /assets/dev5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/dev5.png -------------------------------------------------------------------------------- /assets/flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/flow.png -------------------------------------------------------------------------------- /assets/gif/actionsheet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/actionsheet.gif -------------------------------------------------------------------------------- /assets/gif/btn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/btn.gif -------------------------------------------------------------------------------- /assets/gif/cell.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/cell.gif -------------------------------------------------------------------------------- /assets/gif/checkbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/checkbox.gif -------------------------------------------------------------------------------- /assets/gif/dialog.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/dialog.gif -------------------------------------------------------------------------------- /assets/gif/dropdown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/dropdown.gif -------------------------------------------------------------------------------- /assets/gif/flexbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/flexbox.gif -------------------------------------------------------------------------------- /assets/gif/flow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/flow.gif -------------------------------------------------------------------------------- /assets/gif/gridselect.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/gridselect.gif -------------------------------------------------------------------------------- /assets/gif/header.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/header.gif -------------------------------------------------------------------------------- /assets/gif/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/icon.png -------------------------------------------------------------------------------- /assets/gif/lazy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/lazy.gif -------------------------------------------------------------------------------- /assets/gif/loadmore.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/loadmore.gif -------------------------------------------------------------------------------- /assets/gif/number.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/number.gif -------------------------------------------------------------------------------- /assets/gif/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/panel.png -------------------------------------------------------------------------------- /assets/gif/pic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/pic.gif -------------------------------------------------------------------------------- /assets/gif/popup.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/popup.gif -------------------------------------------------------------------------------- /assets/gif/radio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/radio.gif -------------------------------------------------------------------------------- /assets/gif/richcell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/richcell.png -------------------------------------------------------------------------------- /assets/gif/search.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/search.gif -------------------------------------------------------------------------------- /assets/gif/slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/slider.gif -------------------------------------------------------------------------------- /assets/gif/swipecell.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/swipecell.gif -------------------------------------------------------------------------------- /assets/gif/tabbar-scroller.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/tabbar-scroller.gif -------------------------------------------------------------------------------- /assets/gif/tabbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/tabbar.gif -------------------------------------------------------------------------------- /assets/gif/tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/tag.png -------------------------------------------------------------------------------- /assets/gif/timeline.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/timeline.jpg -------------------------------------------------------------------------------- /assets/gif/tip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/gif/tip.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/icon.png -------------------------------------------------------------------------------- /assets/ide1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide1.png -------------------------------------------------------------------------------- /assets/ide2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide2.png -------------------------------------------------------------------------------- /assets/ide3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide3.png -------------------------------------------------------------------------------- /assets/ide4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide4.png -------------------------------------------------------------------------------- /assets/ide5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide5.png -------------------------------------------------------------------------------- /assets/ide6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide6.png -------------------------------------------------------------------------------- /assets/ide7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/ide7.png -------------------------------------------------------------------------------- /assets/import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/import.png -------------------------------------------------------------------------------- /assets/import2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/import2.png -------------------------------------------------------------------------------- /assets/import3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/import3.png -------------------------------------------------------------------------------- /assets/import4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/import4.png -------------------------------------------------------------------------------- /assets/import6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/import6.png -------------------------------------------------------------------------------- /assets/import9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/import9.png -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/logo.png -------------------------------------------------------------------------------- /assets/playground_preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/playground_preview.png -------------------------------------------------------------------------------- /assets/qrcode/actionsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/actionsheet.png -------------------------------------------------------------------------------- /assets/qrcode/btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/btn.png -------------------------------------------------------------------------------- /assets/qrcode/cell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/cell.png -------------------------------------------------------------------------------- /assets/qrcode/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/checkbox.png -------------------------------------------------------------------------------- /assets/qrcode/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/dialog.png -------------------------------------------------------------------------------- /assets/qrcode/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/dropdown.png -------------------------------------------------------------------------------- /assets/qrcode/flexbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/flexbox.png -------------------------------------------------------------------------------- /assets/qrcode/flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/flow.png -------------------------------------------------------------------------------- /assets/qrcode/gridselect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/gridselect.png -------------------------------------------------------------------------------- /assets/qrcode/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/header.png -------------------------------------------------------------------------------- /assets/qrcode/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/icon.png -------------------------------------------------------------------------------- /assets/qrcode/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/img.png -------------------------------------------------------------------------------- /assets/qrcode/lazy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/lazy.png -------------------------------------------------------------------------------- /assets/qrcode/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/list.png -------------------------------------------------------------------------------- /assets/qrcode/number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/number.png -------------------------------------------------------------------------------- /assets/qrcode/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/panel.png -------------------------------------------------------------------------------- /assets/qrcode/popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/popup.png -------------------------------------------------------------------------------- /assets/qrcode/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/radio.png -------------------------------------------------------------------------------- /assets/qrcode/richcell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/richcell.png -------------------------------------------------------------------------------- /assets/qrcode/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/search.png -------------------------------------------------------------------------------- /assets/qrcode/slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/slider.png -------------------------------------------------------------------------------- /assets/qrcode/swipecell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/swipecell.png -------------------------------------------------------------------------------- /assets/qrcode/tabbar-scroller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/tabbar-scroller.png -------------------------------------------------------------------------------- /assets/qrcode/tabbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/tabbar.png -------------------------------------------------------------------------------- /assets/qrcode/tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/tag.png -------------------------------------------------------------------------------- /assets/qrcode/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/timeline.png -------------------------------------------------------------------------------- /assets/qrcode/tip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/qrcode/tip.png -------------------------------------------------------------------------------- /assets/toolkit1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/toolkit1.png -------------------------------------------------------------------------------- /assets/web_preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/web_preview.png -------------------------------------------------------------------------------- /assets/webstorm-plugin1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/webstorm-plugin1.png -------------------------------------------------------------------------------- /assets/webstorm-plugin2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/webstorm-plugin2.png -------------------------------------------------------------------------------- /assets/webstorm-plugin3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/webstorm-plugin3.png -------------------------------------------------------------------------------- /assets/webstorm1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/webstorm1.png -------------------------------------------------------------------------------- /assets/webstorm_npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/webstorm_npm.png -------------------------------------------------------------------------------- /assets/webstorm_npm1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/assets/webstorm_npm1.png -------------------------------------------------------------------------------- /book.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'BUI-Weex', 3 | author: '广州市品高软件股份有限公司', 4 | language: 'zh-hans', 5 | 6 | plugins: [ 7 | '-sharing', 8 | "-fontsettings", 9 | 'back-to-top-button', 10 | "copy-code-button", 11 | "expandable-chapters", 12 | "heading-anchors", 13 | "theme-fexa" 14 | ], 15 | 16 | "pluginsConfig": { 17 | "theme-fexa":{ 18 | "search-placeholder":"输入关键字搜索", //搜索框提示信息 19 | "logo":"./logo.png", //logo地址 20 | "favicon":"./images/favicon.ico" //ico地址 21 | } 22 | } 23 | }; -------------------------------------------------------------------------------- /case.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BUI-WEEX,案例展示 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 24 | 25 |
26 | 34 |
35 |
36 |
37 |
38 |
    39 |
  • 40 | 41 | 分晓 42 |
    • 43 |
44 | 77 |
78 | 79 |
80 | 83 | 84 |
85 | 86 | 87 | 88 | 89 | 106 | 107 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; } 20 | 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; } 25 | 26 | body { 27 | line-height: 1; } 28 | 29 | ol, ul { 30 | list-style: none; } 31 | 32 | blockquote, q { 33 | quotes: none; } 34 | 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; } 39 | 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; } 43 | 44 | /*# sourceMappingURL=base.css.map */ 45 | -------------------------------------------------------------------------------- /css/base.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA;;;;;;;;;;;;wBAYyB;EACvB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,IAAI;EACf,IAAI,EAAE,OAAO;EACb,cAAc,EAAE,QAAQ;;;AAG1B;0CAC2C;EACzC,OAAO,EAAE,KAAK;;AAEhB,IAAK;EACH,WAAW,EAAE,CAAC;;AAEhB,MAAO;EACL,UAAU,EAAE,IAAI;;AAElB,aAAc;EACZ,MAAM,EAAE,IAAI;;AAEd;iBACkB;EAChB,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,IAAI;;AAEf,KAAM;EACJ,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,CAAC", 4 | "sources": ["base.scss"], 5 | "names": [], 6 | "file": "base.css" 7 | } -------------------------------------------------------------------------------- /css/base.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif; 3 | font-size: 12px; 4 | line-height: 1.5; 5 | color: #495060; 6 | background-color: #fff; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; } 9 | 10 | html, body, .bui-box { 11 | height: 100%; 12 | overflow: hidden; } 13 | 14 | .bui-box { 15 | background-color: #121a4b; 16 | background-image: url("../images/bg.png"); 17 | background-repeat: no-repeat; 18 | background-size: cover; 19 | position: relative; } 20 | 21 | .container { 22 | position: absolute; 23 | width: 500px; 24 | height: 280px; 25 | margin-left: -250px; 26 | margin-top: -140px; 27 | left: 50%; 28 | top: 50%; 29 | text-align: center; } 30 | 31 | .logo .title { 32 | margin: 20px auto 70px auto; 33 | position: relative; 34 | width: 130px; } 35 | .logo .title span { 36 | position: absolute; 37 | top: -20px; 38 | right: -15px; 39 | font-size: 12px; 40 | color: #efa902; } 41 | 42 | .introduce-title { 43 | font-size: 16px; 44 | color: #bcbcbc; 45 | letter-spacing: 0.1em; 46 | font-weight: normal; 47 | margin-bottom: 60px; } 48 | 49 | .nav { 50 | display: flex; } 51 | .nav li { 52 | flex: 1; } 53 | .nav li a { 54 | font-size: 16px; 55 | display: inline-block; 56 | padding: 10px; 57 | position: relative; 58 | color: #41a2f3; 59 | text-decoration: none; 60 | transition: color .3s; } 61 | .nav li a span { 62 | width: 16px; 63 | height: 16px; 64 | display: inline-block; 65 | background: url("../images/githup.png") no-repeat left center; 66 | margin-right: 5px; } 67 | .nav li a:before { 68 | top: 0; 69 | transform: translateY(-10px); } 70 | .nav li a:after { 71 | bottom: 0; 72 | transform: translateY(10px); } 73 | .nav li a:before, .nav li a:after { 74 | position: absolute; 75 | left: 0; 76 | width: 100%; 77 | height: 1px; 78 | background: #fff; 79 | content: ""; 80 | opacity: 0; 81 | transition: opacity .3s, transform .3s; 82 | transform: translateY(-10px); } 83 | .nav li a:hover { 84 | color: #ffffff; } 85 | .nav li a:hover span { 86 | background: url("../images/githup-white.png") no-repeat left center; } 87 | .nav li a:hover:after, .nav li a:hover:before { 88 | opacity: 0.3; 89 | transform: translateY(0); } 90 | 91 | .footer { 92 | position: absolute; 93 | width: 500px; 94 | left: 50%; 95 | margin-left: -250px; 96 | bottom: 30px; } 97 | .footer p { 98 | color: #989898; 99 | font-size: 12px; 100 | text-align: center; 101 | line-height: 22px; } 102 | 103 | .canvas-box { 104 | position: fixed; 105 | left: 0; 106 | top: 0; 107 | z-index: 0; } 108 | 109 | /*# sourceMappingURL=index.css.map */ 110 | -------------------------------------------------------------------------------- /css/index.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,IAAI;EACF,WAAW,EAAE,4GAA4G;EACzH,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,OAAO;EACd,gBAAgB,EAAE,IAAI;EACtB,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;;AAEpC,oBAAkB;EAChB,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;;AAElB,QAAQ;EACN,gBAAgB,EAAE,OAAO;EACzB,gBAAgB,EAAE,uBAAuB;EACzC,iBAAiB,EAAE,SAAS;EAC5B,eAAe,EAAE,KAAK;EACtB,QAAQ,EAAE,QAAQ;;AAEpB,UAAU;EACR,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;EAClB,IAAI,EAAE,GAAG;EACT,GAAG,EAAE,GAAG;EACR,UAAU,EAAE,MAAM;;AAGlB,YAAM;EACJ,MAAM,EAAE,mBAAmB;EAC3B,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,iBAAI;IACF,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,OAAO;;AAIpB,gBAAgB;EACd,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,OAAO;EACd,cAAc,EAAE,KAAK;EACrB,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,IAAI;;AAErB,IAAI;EACF,OAAO,EAAE,IAAI;EACb,OAAE;IACA,IAAI,EAAE,CAAC;IACP,SAAC;MACC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,YAAY;MACrB,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,QAAQ;MAClB,KAAK,EAAE,OAAO;MACd,eAAe,EAAE,IAAI;MACrB,UAAU,EAAC,SAAS;MACpB,cAAI;QACF,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,YAAY;QACrB,UAAU,EAAE,iDAAiD;QAC7D,YAAY,EAAE,GAAG;MAEnB,gBAAQ;QACN,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,iBAAiB;MAE9B,eAAO;QACL,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,gBAAgB;MAE7B,iCAAgB;QACd,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,GAAG;QACX,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,0BAA0B;QACtC,SAAS,EAAE,iBAAiB;MAE9B,eAAO;QACL,KAAK,EAAE,OAAO;QACd,oBAAI;UACF,UAAU,EAAE,uDAAuD;MAGvE,6CAA6B;QAC3B,OAAO,EAAC,GAAG;QACX,SAAS,EAAC,aACZ;;AAIN,OAAO;EACL,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,IAAI,EAAE,GAAG;EACT,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,SAAC;IACC,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;;AAKrB,WAAW;EAAC,QAAQ,EAAE,KAAK;EAAC,IAAI,EAAE,CAAC;EAAC,GAAG,EAAE,CAAC;EAAC,OAAO,EAAC,CAAC", 4 | "sources": ["index.scss"], 5 | "names": [], 6 | "file": "index.css" 7 | } -------------------------------------------------------------------------------- /css/index.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif; 3 | font-size: 12px; 4 | line-height: 1.5; 5 | color: #495060; 6 | background-color: #fff; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | html,body,.bui-box{ 11 | height: 100%; 12 | overflow: hidden; 13 | } 14 | .bui-box{ 15 | background-color: #121a4b; 16 | background-image: url("../images/bg.png"); 17 | background-repeat: no-repeat; 18 | background-size: cover; 19 | position: relative; 20 | } 21 | .container{ 22 | position: absolute; 23 | width: 500px; 24 | height: 280px; 25 | margin-left: -250px; 26 | margin-top: -140px; 27 | left: 50%; 28 | top: 50%; 29 | text-align: center; 30 | } 31 | .logo{ 32 | .title{ 33 | margin: 20px auto 70px auto; 34 | position: relative; 35 | width: 130px; 36 | span{ 37 | position: absolute; 38 | top: -20px; 39 | right: -15px; 40 | font-size: 12px; 41 | color: #efa902; 42 | } 43 | } 44 | } 45 | .introduce-title{ 46 | font-size: 16px; 47 | color: #bcbcbc; 48 | letter-spacing: 0.1em; 49 | font-weight: normal; 50 | margin-bottom: 60px; 51 | } 52 | .nav{ 53 | display: flex; 54 | li{ 55 | flex: 1; 56 | a{ 57 | font-size: 16px; 58 | display: inline-block; 59 | padding: 10px; 60 | position: relative; 61 | color: #41a2f3; 62 | text-decoration: none; 63 | transition:color .3s; 64 | span{ 65 | width: 16px; 66 | height: 16px; 67 | display: inline-block; 68 | background: url("../images/githup.png") no-repeat left center; 69 | margin-right: 5px; 70 | } 71 | &:before{ 72 | top: 0; 73 | transform: translateY(-10px); 74 | } 75 | &:after{ 76 | bottom: 0; 77 | transform: translateY(10px); 78 | } 79 | &:before,&:after{ 80 | position: absolute; 81 | left: 0; 82 | width: 100%; 83 | height: 1px; 84 | background: #fff; 85 | content: ""; 86 | opacity: 0; 87 | transition: opacity .3s, transform .3s; 88 | transform: translateY(-10px); 89 | } 90 | &:hover{ 91 | color: #ffffff; 92 | span{ 93 | background: url("../images/githup-white.png") no-repeat left center; 94 | } 95 | } 96 | &:hover:after, &:hover:before{ 97 | opacity:0.3; 98 | transform:translateY(0) 99 | } 100 | } 101 | } 102 | } 103 | .footer{ 104 | position: absolute; 105 | width: 500px; 106 | left: 50%; 107 | margin-left: -250px; 108 | bottom: 30px; 109 | p{ 110 | color: #989898; 111 | font-size: 12px; 112 | text-align: center; 113 | line-height: 22px; 114 | } 115 | } 116 | 117 | 118 | .canvas-box{position: fixed;left: 0;top: 0;z-index:0;} -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* play */ 2 | .album { 3 | position: absolute; 4 | top: 50%; 5 | left: 50%; 6 | margin-left: -500px; 7 | margin-top: -270px; 8 | width: 1000px; 9 | height: 559px; 10 | background: #fff; 11 | border: 10px solid #FFF; 12 | border-radius: 5px; } 13 | 14 | .album-image-md { 15 | position: relative; 16 | z-index: 1; 17 | margin: 0 auto; 18 | height: 459px; 19 | overflow: hidden; } 20 | 21 | .album-image-bd { 22 | position: relative; 23 | z-index: 1; 24 | margin: 0 auto; 25 | height: 409px; 26 | text-align: center; 27 | overflow: hidden; } 28 | 29 | .album-image { 30 | position: absolute; 31 | z-index: 2; 32 | top: 50%; 33 | left: 50%; } 34 | 35 | .album-image-ft { 36 | margin: 0 auto; 37 | height: 50px; 38 | line-height: 50px; 39 | text-align: center; 40 | overflow: hidden; } 41 | 42 | #album-image-ft { 43 | font-size: 12px; } 44 | 45 | .album-image-nav { 46 | position: absolute; 47 | z-index: 2; 48 | top: 0; 49 | left: 0; 50 | margin: 0; 51 | padding: 0; 52 | width: 980px; 53 | height: 409px; 54 | overflow: hidden; } 55 | 56 | .album-image-nav-left-block { 57 | position: relative; 58 | z-index: 1; 59 | float: left; 60 | margin: 0; 61 | width: 50%; 62 | height: 409px; 63 | list-style-type: none; 64 | overflow: hidden; } 65 | 66 | .album-image-nav-right-block { 67 | position: relative; 68 | z-index: 1; 69 | float: left; 70 | margin: 0; 71 | width: 50%; 72 | height: 409px; 73 | list-style-type: none; 74 | overflow: hidden; } 75 | 76 | .album-image-btn-prev:link, .album-image-btn-prev:visited, .album-image-btn-prev:hover { 77 | position: absolute; 78 | z-index: 2; 79 | top: 50%; 80 | left: 0; 81 | margin: -40px 0 0 0; 82 | width: 32px; 83 | height: 32px; 84 | opacity: 0.5; 85 | filter: alpha(opacity=50); 86 | text-decoration: none; 87 | text-align: center; 88 | overflow: hidden; } 89 | 90 | .album-image-btn-next:link, .album-image-btn-next:visited, .album-image-btn-next:hover { 91 | position: absolute; 92 | z-index: 2; 93 | top: 50%; 94 | right: 0; 95 | margin: -40px 0 0 0; 96 | width: 32px; 97 | height: 32px; 98 | opacity: 0.5; 99 | filter: alpha(opacity=50); 100 | text-decoration: none; 101 | text-align: center; 102 | overflow: hidden; } 103 | 104 | .album-image-btn-prev:hover, .album-image-btn-next:hover { 105 | color: #333; } 106 | 107 | .album-image-loading-overlay { 108 | position: absolute; 109 | z-index: 4; 110 | top: 50%; 111 | left: 50%; 112 | margin: 0; 113 | margin-left: -100px; 114 | margin-top: -100px; 115 | width: 200px; 116 | height: 200px; 117 | border-radius: 100px; 118 | background-color: #fff; 119 | opacity: 0.8; 120 | filter: alpha(opacity=80); 121 | overflow: hidden; } 122 | 123 | .album-image-loading-overlay img { 124 | position: absolute; 125 | z-index: 4; 126 | top: 50%; 127 | left: 50%; 128 | margin: -50px 0 0 -50px; 129 | width: 100px; 130 | height: 100px; } 131 | 132 | .album-carousel { 133 | margin: 0 auto; 134 | width: 980px; 135 | height: 80px; 136 | overflow: hidden; } 137 | 138 | .album-carousel-btn-prev:link, .album-carousel-btn-prev:visited, .album-carousel-btn-prev:hover { 139 | float: left; 140 | margin: 0; 141 | width: 50px; 142 | height: 80px; 143 | line-height: 70px; 144 | text-align: center; 145 | font-size: 80px; 146 | text-decoration: none; 147 | color: #999; 148 | overflow: hidden; } 149 | 150 | .album-carousel-btn-next:link, .album-carousel-btn-next:visited, .album-carousel-btn-next:hover { 151 | float: right; 152 | margin: 0; 153 | width: 50px; 154 | height: 80px; 155 | line-height: 70px; 156 | text-align: center; 157 | font-size: 80px; 158 | text-decoration: none; 159 | color: #999; 160 | overflow: hidden; } 161 | 162 | .album-carousel-btn-prev:hover, .album-carousel-btn-next:hover { 163 | color: #F00; 164 | background-color: #F4F4F4; } 165 | 166 | .album-carousel-zone { 167 | position: relative; 168 | z-index: 1; 169 | float: left; 170 | margin: 0; 171 | width: 880px; 172 | height: 80px; 173 | background-color: #FFF; 174 | overflow: hidden; } 175 | 176 | .album-carousel-list { 177 | position: absolute; 178 | z-index: 2; 179 | top: 0; 180 | left: 0; 181 | margin: 0; 182 | padding: 0; 183 | width: 1760px; 184 | height: 80px; 185 | overflow: hidden; } 186 | 187 | .album-carousel-thumb { 188 | position: relative; 189 | z-index: 3; 190 | float: left; 191 | margin: 0; 192 | list-style-type: none; 193 | width: 80px; 194 | height: 80px; 195 | overflow: hidden; } 196 | 197 | .album-carousel-thumb a:link, .album-carousel-thumb a:visited, .album-carousel-thumb a:hover { 198 | position: absolute; 199 | z-index: 2; 200 | top: 0; 201 | left: 0; 202 | width: 80px; 203 | height: 80px; 204 | border: 3px solid #FFF; 205 | overflow: hidden; } 206 | 207 | .album-carousel-thumb-selected a:link, .album-carousel-thumb-selected a:visited, .album-carousel-thumb-selected a:hover, .album-carousel-thumb a:hover { 208 | border: 3px solid #F00; } 209 | 210 | .album-carousel-thumb img { 211 | position: absolute; 212 | z-index: 1; 213 | display: block; 214 | top: -37px; 215 | left: -80px; 216 | width: 230px; 217 | height: 144px; 218 | opacity: 0.5; 219 | filter: alpha(opacity=50); } 220 | 221 | .album-carousel-thumb-selected a:link img, .album-carousel-thumb-selected a:visited img, .album-carousel-thumb-selected a:hover img, .album-carousel-thumb a:hover img { 222 | opacity: 1; 223 | filter: alpha(opacity=100); } 224 | 225 | .hide { 226 | display: none; } 227 | 228 | .close { 229 | position: absolute; 230 | top: -13px; 231 | right: -45px; 232 | cursor: pointer; } 233 | 234 | /*# sourceMappingURL=style.css.map */ 235 | -------------------------------------------------------------------------------- /debug.md: -------------------------------------------------------------------------------- 1 | ## 开发调试 2 | 首先安装 Weex 官方提供的 [Playground](http://weex-project.io/cn/playground.html) ，这是一款安装在手机(Android & iOS）端的 页面预览和调试工具。 3 | 4 | `weex-toolkit`中包含了调试工具`weex devtools`，它是专门为Weex定制的一款实现了 Chrome Debugging Protocol 的 inspect/debug 工具，能够帮助你快速查看 app 运行状态和调试 Weex 中的 JS 代码，当前支持 IOS 和 Android 两个平台。 5 | 6 | ### 启动调试 7 | 8 | 在命令行输入如下命令： 9 | 10 | ``` 11 | npm run debug 12 | ``` 13 | 此时会启动调试服务器，并唤起Chrome浏览器的调试主页。调试主页上会有一个二维码，使用 `Playground` App 扫这个二维码可以开启 Playground 调试。 14 | 15 | ![](assets/debug1.png) 16 | 17 | 在调试主页上有详细的使用说明，请仔细查看。 18 | 19 | ### 查看页面结构 20 | 21 | 使用 Playground 扫描 Weex Preview 上的二维码（这个二维码是我们App启动的首页，要先启动 server）。之后 点击 `Inspector` 查看。 在 `Inspector` 里面能够查看页面的结构，建议选择 `vdom` 来看虚拟dom的结构。 22 | 23 | ![](assets/debug2.png) 24 | 25 | ![](assets/debug3.png) 26 | 27 | ### 调试 Weex 的 JS 代码 28 | 调试主页上提供的`Debugger`是用来调试Weex的js代码，能够设置断点，查看调用栈等。 29 | 30 | ![](assets/debug4.png) -------------------------------------------------------------------------------- /env.md: -------------------------------------------------------------------------------- 1 | ## 环境搭建 2 | 假设已经按照 [Weex官方](http://weex-project.io/cn/guide/set-up-env.html) 的教程学会了如何搭建本地开发环境进行 Weex 开发。 3 | 4 | ### 第一步：安装 bui-weex-toolkit 5 | bui-weex-toolkit 是配合 BUI-Weex 框架使用的命令行工具(CLI)，能够快速创建框架脚手架工程、查看发布版本等。该工具需要安装在全局： 6 | 7 | ``` bash 8 | npm install -g bui-weex-toolkit 9 | 10 | ``` 11 | 正常安装后，打开命令行，输入`bui-weex` 12 | 13 | ![](assets/bui-weex-toolkit.png) 14 | 15 | 命令行使用： 16 | 17 | ``` 18 | bui-weex -v // 查看当前toolkit版本 19 | bui-weex -h // 命令帮助信息 20 | bui-weex create [version] // 创建bui-weex示例工程，可以指定模版版本 21 | bui-weex list // 显示可用的版本 22 | bui-weex list-template // 显示模版工程里可用的模版 23 | 24 | ``` 25 | 更新工具： 26 | 27 | ``` 28 | npm update -g bui-weex-toolkit 29 | ``` 30 | 31 | ### 第二步：安装IDE 32 | 这里推荐使用对于命令行集成的比较好的IDE，例如 [WebStorm](https://www.jetbrains.com/webstorm/) 和 [Visual Studio Code](https://code.visualstudio.com/) , 以 WebStorm 为例。 33 | 34 | WebStorm中安装 VueJS \ Weex \ Sass 的插件： 35 | 36 | ![](assets/webstorm-plugin2.png) 37 | ![](assets/webstorm-plugin1.png) 38 | ![](assets/webstorm-plugin3.png) 39 | 40 | 好了，到这一步，您已经具备了比较优雅的开发环境了，下一步开始【创建工程】！ 41 | 42 | 43 | -------------------------------------------------------------------------------- /faq.md: -------------------------------------------------------------------------------- 1 | ## 常见问题 2 | 3 | ### 1.PC浏览器无法预览 4 | 5 | 因`bui-weex`专注于 iOS,android 的效果，对于 PC浏览器的适配目前尚未做到很好。我们的模版工程在 `webpack.config.js`中没有开启生成 **.web.js的功能，因此在PC浏览器上无法预览。进行如下修改即可： 6 | 7 | ```javascript 8 | ... 9 | module.exports = [webConfig,weexConfig]; 10 | 11 | ``` 12 | 13 | ### 2.如何进行iPhoneX的适配 14 | 15 | iPhoneX适配，主要是对顶部和底部的 `安全区域` 进行高度的调整。框架提供了接口来判断是否在 iPhoneX 容器里。 16 | 17 | ```javascript 18 | this.$isIPhoneX() // return true or false 19 | ``` 20 | -------------------------------------------------------------------------------- /folder.md: -------------------------------------------------------------------------------- 1 | ## 目录规范 2 | BUI-Weex 提供的脚手架工程是在官方的基础上进行改造的，主要包括以下几个方面特性： 3 | 4 | * 动态生成 webpack 入口 5 | * 支持 Sass 加载器 6 | * 支持加载工程目录下图片资源 7 | * 支持加载 ttf 字体图标文件 8 | 9 | 先来看看目录结构，然后再逐个分析实现的机制！ 10 | 11 | ### 目录结构 12 | 13 | * bui-weex-template 14 | * assets —— weex官方内置 15 | * build —— weex官方内置，自定义脚本,在 npm run serve时候使用 16 | * dist —— webpack打包生成的目录，包含js,image,ttf等 17 | * node_modules —— 工程依赖的npm package 18 | * src —— 业务代码 19 | * entry —— 放置webpack的入口，多个入口就放在这里 20 | * app.js —— 入口文件 21 | * image —— 放置图片资源 22 | * logo.png —— 内置logo图片 23 | * js —— 放置js公共代码目录 24 | * views —— 放置视图页面 25 | * app.vue —— 对应app.js的视图页面 26 | * .babelrc —— 支持ES6语法的配置文件，删除后无法使用ES6 27 | * config.js —— 启动Server的时候自动生成的文件(npm run serve) 28 | * index.html —— PC预览首页 29 | * package.json —— npm的配置文件，里面包含依赖配置、Scripts配置等 30 | * webpack.config.js —— webpack的脚本文件 31 | * weex.html —— PC预览页面,index.html 嵌入的 iframe页面 32 | 33 | 34 | ### 特性：动态生成 webpack 入口 35 | 36 | 标准的webpack配置entry是需要指定文件的，为了方便使用，框架将自动遍历 `src/entry`目录并生成对应的 js bundle 37 | 38 | 关键代码 (webpack.config.js): 39 | 40 | ```javascript 41 | // 遍历文件入口,动态生成入口 42 | function getEntries () { 43 | var entryFiles = glob.sync('./src/entry/**', { 'nodir': true}) 44 | var entries = {}; 45 | for (var i = 0; i < entryFiles.length; i++) { 46 | var filePath = entryFiles[i]; 47 | var filename = filePath.split('entry/')[1]; 48 | filename = filename.substr(0, filename.lastIndexOf('.')); 49 | entries[filename] = filePath; 50 | } 51 | return entries; 52 | } 53 | ``` 54 | 55 | ### 特性：支持 Sass 加载器 56 | 57 | 框架内使用 Sass的语法来写样式，对应的样式文件是 *.scss，框架做了支持： 58 | 59 | 在 package.json 中配置如下依赖： 60 | 61 | ```javascript 62 | "node-sass": "^4.5.2", 63 | "sass-loader": "^6.0.3", 64 | ``` 65 | 66 | 在 web.config.js 中配置如下loader: 67 | 68 | ```javascript 69 | loaders: [ 70 | { 71 | test: /\.scss$/, 72 | loader: 'style!css!sass' 73 | } 74 | ] 75 | ``` 76 | 77 | ### 特性：支持加载工程目录下图片资源 78 | 官方的``组件不支持加载本地工程的图片，只加载远程的 http 图片。框架做了处理，将 `src/image` 目录下的图片资源在编译阶段拷贝到 dist 目录下，开发人员就可以通过 `` 来使用本地的图片。 79 | 80 | 在 web.config.js 中 81 | 82 | ```javascript 83 | // 文件拷贝插件,将图片拷贝到dist目录 84 | var copyPlugin = new copy([ 85 | {from: './src/image', to: "./image"} 86 | ]) 87 | ``` 88 | 使用方式: 89 | 90 | ```html 91 | 92 | ``` 93 | 94 | ### 特性：支持加载 ttf 字体图标文件 95 | 96 | 框架提供了``组件，里面用到 [ionicons](http://ionicons.com/) 的字体文件 ttf，框架在编译阶段将其拷贝到 dist 目录。组件内部会从 dist 目录下找到 这个ttf文件。 97 | 98 | ```javascript 99 | // 文件拷贝插件,将字体拷贝到dist目录 100 | var copyPlugin = new copy([ 101 | {from: './node_modules/bui-weex/src/font', to: "./font"} 102 | ]) 103 | ``` -------------------------------------------------------------------------------- /images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/bg.png -------------------------------------------------------------------------------- /images/bui-weex-logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/bui-weex-logo-black.png -------------------------------------------------------------------------------- /images/bui-weex-logo-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/bui-weex-logo-title.png -------------------------------------------------------------------------------- /images/bui-weex-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/bui-weex-logo.png -------------------------------------------------------------------------------- /images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/close.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/favicon.ico -------------------------------------------------------------------------------- /images/githup-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/githup-white.png -------------------------------------------------------------------------------- /images/githup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/githup.png -------------------------------------------------------------------------------- /images/img/fenxiao/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/01.jpg -------------------------------------------------------------------------------- /images/img/fenxiao/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/01.png -------------------------------------------------------------------------------- /images/img/fenxiao/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/02.png -------------------------------------------------------------------------------- /images/img/fenxiao/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/03.png -------------------------------------------------------------------------------- /images/img/fenxiao/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/04.png -------------------------------------------------------------------------------- /images/img/fenxiao/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/05.png -------------------------------------------------------------------------------- /images/img/fenxiao/06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/img/fenxiao/06.png -------------------------------------------------------------------------------- /images/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/left.png -------------------------------------------------------------------------------- /images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/loading.gif -------------------------------------------------------------------------------- /images/loading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/loading.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/logo.png -------------------------------------------------------------------------------- /images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/menu.png -------------------------------------------------------------------------------- /images/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/preview.gif -------------------------------------------------------------------------------- /images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/qrcode.png -------------------------------------------------------------------------------- /images/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/right.png -------------------------------------------------------------------------------- /images/s_gallery_2012110702.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/images/s_gallery_2012110702.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BUI-WEEX 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 你的浏览器不支持canvas 17 |
18 | 19 |
20 | 27 |

专门为weex前端开发者打造的高质量UI组件库

28 | 35 |
36 |
37 |

Copyright © 2013- 2017 Bingosoft.All Rights Reserved

38 |
39 | 40 |
41 | 42 | 227 | 228 | 229 | -------------------------------------------------------------------------------- /integration.md: -------------------------------------------------------------------------------- 1 | ## Weex项目集成 BUI-Weex 2 | 3 | 对于已经创建好的 Weex项目，使用我们的UI框架也是比较方便的。请按照如下步骤进行： 4 | 5 | ### 第一步:修改package.json 6 | 以下有标注的地方需要新增，其他可以根据需要调整版本，例如可以使用最新版的vue，修改完成后 运行`npm install` 并确保其正常安装。 7 | 8 | ```javascript 9 | "scripts": { 10 | "start": "npm run serve & npm run dev", //添加[可选] 用于合并dev和serve命令 11 | "dev": "webpack --watch", 12 | "serve": "node build/init.js && serve -p 8686", 13 | "debug": "weex-devtool", 14 | "publish": "node build/publish.js", //添加[可选] 用于打包bundel js到 publish目录 15 | "build": "webpack" 16 | }, 17 | "dependencies": { 18 | "archiver": "^2.1.0", //添加[可选] publish的时候压缩文件操作 19 | "bui-weex": "^0.2.2", //添加 核心库 20 | "glob": "^7.1.2", //添加 webpack中遍历入口时使用 21 | "punycode": "^2.1.0", 22 | "vue": "^2.5.13", //可选择最新的版本 23 | "vue-router": "^2.1.1", 24 | "vue-template-compiler": "^2.5.13", //vue 需要它 25 | "vuex": "^2.1.1", 26 | "vuex-router-sync": "^4.0.1", 27 | "weex-vue-render": "^0.11.2" 28 | }, 29 | "devDependencies": { 30 | "babel-core": "^6.20.0", 31 | "babel-loader": "^6.2.9", 32 | "babel-preset-es2015": "^6.18.0", 33 | "copy-webpack-plugin": "^4.0.1", //添加 webpack拷贝文件的插件 34 | "css-loader": "^0.26.1", 35 | "ip": "^1.1.4", 36 | "json-loader": "^0.5.7", 37 | "node-sass": "^4.5.2", //添加 支持Sass 38 | "sass-loader": "^6.0.3", //添加 支持Sass 39 | "serve": "^1.4.0", 40 | "vue-loader": "^10.0.2", 41 | "webpack": "^1.14.0", 42 | "weex-devtool": "^0.2.64", 43 | "weex-loader": "^0.4.1", 44 | "weex-vue-loader": "^0.2.5" 45 | } 46 | 47 | ``` 48 | 49 | 50 | ### 第二步: 新增publish.js 51 | 这一步是可选的，如果不需要通过 `npm run publish` 来发布bundle.js可以忽略此步骤。如果需要，请 下载 [publish.js](https://github.com/bingo-oss/bui-weex-template/blob/master/build/publish.js) 52 | 53 | ### 第三步：修改 webpack.config.js 54 | 55 | BUI-Weex提供的脚手架工程对webpack的优化包含如下方面： 56 | 57 | 1. 自动根据 src/entry 遍历入口文件； 58 | 2. 支持使用本地工程的图片资源(bui-image)； 59 | 3. 支持使用字体图标(bui-icon)； 60 | 4. 支持使用sass进行样式编写； 61 | 62 | 具体代码如下，请参考： 63 | 64 | ```javascript 65 | var fs = require('fs'); 66 | var webpack = require('webpack'); 67 | var glob = require("glob"); 68 | var copy = require('copy-webpack-plugin'); 69 | 70 | var bannerPlugin = new webpack.BannerPlugin( 71 | '// { "framework": "Vue" }\n', 72 | {raw: true} 73 | ) 74 | 75 | // 文件拷贝插件,将图片和字体拷贝到dist目录 76 | var copyPlugin = new copy([ 77 | {from: './src/image', to: "./image"}, 78 | {from: './node_modules/bui-weex/src/font', to: "./font"} 79 | ]) 80 | 81 | // 遍历文件入口,动态生成入口 82 | function getEntries () { 83 | var entryFiles = glob.sync('./src/entry/**', { 'nodir': true}) 84 | var entries = {}; 85 | for (var i = 0; i < entryFiles.length; i++) { 86 | var filePath = entryFiles[i]; 87 | var filename = filePath.split('entry/')[1]; 88 | filename = filename.substr(0, filename.lastIndexOf('.')); 89 | entries[filename] = filePath; 90 | } 91 | return entries; 92 | } 93 | 94 | // 生成webpack配置 95 | function getBaseConfig() { 96 | return { 97 | entry: getEntries(), 98 | output: { 99 | path: 'dist', 100 | }, 101 | module: { 102 | loaders: [ 103 | { 104 | test: /\.js$/, 105 | loader: 'babel', 106 | exclude: /node_modules/ 107 | }, { 108 | test: /\.vue(\?[^?]+)?$/, 109 | loaders: [] 110 | }, { 111 | test: /\.scss$/, 112 | loader: 'style!css!sass' 113 | } 114 | ] 115 | }, 116 | vue: {}, 117 | plugins: [bannerPlugin, copyPlugin] 118 | } 119 | } 120 | 121 | //*.web.js 122 | var webConfig = getBaseConfig(); 123 | webConfig.output.filename = '[name].web.js'; 124 | webConfig.module.loaders[1].loaders.push('vue'); 125 | 126 | //*.weex.js 127 | var weexConfig = getBaseConfig(); 128 | weexConfig.output.filename = '[name].weex.js'; 129 | weexConfig.module.loaders[1].loaders.push('weex'); 130 | 131 | module.exports = [webConfig, weexConfig]; 132 | 133 | ``` 134 | 135 | ### 第四步：工程结构 136 | 137 | 对于工程结构，BUI-weex 是有一定要求的，大致上和原生的 Weex工程保持一致。 具体请参看：[【目录规范】](http://dev.bingocc.com/buiweex/docs/folder.html) 138 | 139 | 140 | 您在集成过程中发现的任何问题和建议，请在ISSUE中提问！ 141 | -------------------------------------------------------------------------------- /js/album.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author liyueqing 3 | */ 4 | (function($){ 5 | var CLS_SELECTED = "album-carousel-thumb-selected", 6 | CLS_HIDE = "hide", 7 | PX = "px"; 8 | 9 | jQuery.Album = function(config){ 10 | this.setting = { 11 | // 大图片显示区域 12 | root: $("#album-image-md"), 13 | // 大图片 14 | image: $("#album-image"), 15 | // 大图片的标题 16 | title: $("#album-image-ft"), 17 | btnDownload: $("#album-download"), 18 | // 大图片区域的导航块 19 | navBlock: $("#album-image-nav"), 20 | // 查看上一张图片按钮 21 | btnPrev: $("#album-image-btn-prev"), 22 | // 查看下一张图片按钮 23 | btnNext: $("#album-image-btn-next"), 24 | // 大图片显示区域的左侧 25 | prevBlock: $("#album-image-nav-left-block"), 26 | // 大图片显示区域的右侧 27 | nextBlock: $("#album-image-nav-right-block"), 28 | // 大图片切换时的loading图片 29 | overlay: $("#album-image-loading-overlay"), 30 | // 图片缩略图 Carousel 对象 31 | Carousel: new jQuery.Carousel({ 32 | root: '#album-carousel', 33 | carousel: '#album-carousel-list', 34 | pages: { 35 | prev: '#album-carousel-btn-prev', 36 | next: '#album-carousel-btn-next' 37 | }, 38 | direction: 'H' 39 | }), 40 | // 当前显示图片在缩略图的中索引值 41 | curIndex: 0, 42 | // 大图片显示区域的最大宽度 43 | maxWidth: 1000, 44 | // 大图片显示区域的最高宽度 45 | maxHeight: 1200 46 | }; 47 | 48 | // 合并用户配置项和默认配置项 49 | $.extend(this.setting, config); 50 | 51 | // 上一个选中的缩略图 52 | this.selectedItem = null; 53 | // 当前选中的缩略图 54 | this.currentItem = null; 55 | // 图片是否正在加载切换 56 | this.isloading = false; 57 | 58 | // 初始化对象方法 59 | this.init(); 60 | 61 | return this; 62 | }; 63 | 64 | jQuery.Album.prototype = { 65 | /** 66 | * 初始化方法 67 | * @method init 68 | */ 69 | init: function(){ 70 | // 选中缩略图 71 | // 改变图片 72 | // 绑定相册程序各个DOM节点的事件处理函数 73 | this.select().change().bindEvent(); 74 | 75 | return this; 76 | }, 77 | /** 78 | * 更新大图片和图片说明 79 | * @method change 80 | */ 81 | change: function(){ 82 | var Album = this, 83 | currentItem = Album.currentItem, 84 | image = Album.getImage(), 85 | title = Album.getTitle(), 86 | overlay = Album.getOverlay(), 87 | btnDownload = Album.getBtnDownload(), 88 | src = currentItem.find("a:first").attr("href"), 89 | alt = currentItem.find("img:first").attr("alt"), 90 | percent = 0, 91 | preloader = new Image(); 92 | 93 | // 开始显示loading 94 | overlay.removeClass(CLS_HIDE); 95 | this.isloading = true; 96 | 97 | // 必须使用 preloader 来实现图片的load事件 98 | // preloader = new Image() 创建一个新的Image对象 99 | // 给 preloader 设置加载图片的路径 100 | preloader.src = src; 101 | // 之后就可以开始使用load事件，获得新的图片的实际尺寸 102 | // img标签是一个替换元素，我们不能在一开始就获得图片的实际大小 103 | // 必须是图片下载(load)完成后，才能获得实际大小 104 | $(preloader).load(function(evt){ 105 | var width = preloader.width, 106 | height = preloader.height, 107 | maxWidth = Album.getMaxWidth(), 108 | maxHeight = Album.getMaxHeight(); 109 | 110 | // 获得图片的宽/高的比率 111 | percent = width / height; 112 | 113 | // 根据图片实际大小，等比缩放图片 114 | // 图片的宽度大于 maxWidth 115 | if (width > maxWidth) { 116 | // 图片按照最大宽度显示（缩放） 117 | // 图片的高度在maxHeight以内 118 | width = maxWidth; 119 | height = width / percent; 120 | 121 | // 按最大宽度缩放后，图片的高度仍超过maxHeight 122 | // 这是要图片应该是一个纵向高度比较长的图片 123 | if (height > maxHeight) { 124 | // 这里要将之前的最大宽度再按图片的长宽比来缩小 125 | // 这时的图片是高度等于maxHeight的 126 | // 而宽度是小于maxWidth的缩略图 127 | percent = maxHeight / height; 128 | width = width * percent; 129 | height = maxHeight; 130 | } 131 | } 132 | else { 133 | // 图片的原始宽度小于等于maxWidth 134 | if (width <= maxWidth) { 135 | // 高度超过maxHeight，再等比调整图片高度 136 | if (height > maxHeight) { 137 | percent = maxHeight / height; 138 | width = width * percent; 139 | height = maxHeight; 140 | } 141 | } 142 | } 143 | 144 | // 图片缩放和调整显示位置 145 | image.animate({ 146 | "width": width + PX, 147 | "height": height + PX, 148 | "margin-left": -(width / 2) + PX, 149 | "margin-top": -(height / 2) + PX 150 | }, 500, function(){ 151 | // 更新图片路径和图片alt属性 152 | image.attr({ 153 | "src": src, 154 | "alt": alt 155 | }); 156 | // 更新图片说明文字 157 | title.html(alt); 158 | // 更新下载图片的链接路径 159 | btnDownload.attr("href", src); 160 | 161 | // 隐藏loading图片的遮罩层 162 | overlay.addClass(CLS_HIDE); 163 | Album.isloading = false; 164 | }); 165 | }); 166 | 167 | return this; 168 | }, 169 | /** 170 | * 选中缩略图 171 | * @method select 172 | */ 173 | select: function(){ 174 | var selectedItem = this.selectedItem, 175 | currentItem = null, 176 | items = this.getItems(), 177 | curIndex = this.getCurrentIndex(); 178 | 179 | // 如果有上次选中的图片，则去掉它的选中样式 180 | if (selectedItem) { 181 | selectedItem.removeClass(CLS_SELECTED); 182 | } 183 | // 给当前选中缩略图添加选中样式 184 | currentItem = this.currentItem = $(items[curIndex]); 185 | currentItem.addClass(CLS_SELECTED); 186 | 187 | // 现在选中的图片就是上次选中的图片了 188 | this.selectedItem = currentItem; 189 | 190 | return this; 191 | }, 192 | /** 193 | * 显示上一张图片 194 | * @method prev 195 | */ 196 | prev: function(){ 197 | // 当前缩略图的索引值减1 198 | this.setCurrentIndex(this.getCurrentIndex() - 1); 199 | 200 | // 移动到第一张以后 201 | if (this.getCurrentIndex() < 0) { 202 | // 循环到最后一张图片，并且滚动缩略图 203 | this.setCurrentIndex(this.getLength() - 1).prevGroup(); 204 | } 205 | else { 206 | // 不是第一张图片 207 | if (this.getCurrentIndex() > 0) { 208 | // 移动到缩略图当前显示区域索引值最小的一张图片之前，这时候需要移动缩略图区域到上一组图片 209 | if (this.getCurrentIndex() < this.getCurrentPage() * this.getItemsPrePage()) { 210 | this.prevGroup(); 211 | } 212 | } 213 | } 214 | 215 | this.select().change(); 216 | 217 | return this; 218 | }, 219 | /** 220 | * 显示下一张图片 221 | * @method next 222 | */ 223 | next: function(){ 224 | // 当前缩略图的索引值+1 225 | this.setCurrentIndex(this.getCurrentIndex() + 1); 226 | 227 | // 移动到最后一张以后 228 | if (this.getCurrentIndex() > this.getLength() - 1) { 229 | // 循环显示第一张图片，并且滚动缩略图 230 | this.setCurrentIndex(0).nextGroup(); 231 | } 232 | else { 233 | // 不是最后一张图片 234 | if (this.getCurrentPage() < this.getMaxPages()) { 235 | // 移动到缩略图当前显示区域索引值最大的一张图片之后，这时候需要移动缩略图区域到下一组图片 236 | if (this.getCurrentIndex() > ((this.getCurrentPage() + 1) * this.getItemsPrePage()) - 1) { 237 | this.nextGroup(); 238 | } 239 | } 240 | } 241 | 242 | this.select().change(); 243 | 244 | return this; 245 | }, 246 | prevGroup: function(){ 247 | var Carousel = this.getCarousel(); 248 | 249 | Carousel.prev(); 250 | 251 | return this; 252 | }, 253 | nextGroup: function(){ 254 | var Carousel = this.getCarousel(); 255 | 256 | Carousel.next(); 257 | 258 | return this; 259 | 260 | }, 261 | /** 262 | * 给相册的各个DOM节点绑定事件处理函数 263 | */ 264 | bindEvent: function(){ 265 | var Album = this, 266 | root = Album.getRoot(), 267 | navBlock = Album.getNavBlock(), 268 | prevBlock = Album.getPrevBlock(), 269 | nextBlock = Album.getNextBlock(), 270 | btnPrev = Album.getBtnPrev(), 271 | btnNext = Album.getBtnNext(), 272 | items = Album.getItems(); 273 | 274 | // 鼠标放到大图图片区域显示上下翻页按钮 275 | root.hover(function(){ 276 | navBlock.removeClass(CLS_HIDE); 277 | }, function(){ 278 | navBlock.addClass(CLS_HIDE); 279 | }); 280 | 281 | // 鼠标点击图片左边区域，查看上一张图片 282 | prevBlock.click(function(evt){ 283 | Album.prev(); 284 | 285 | evt.preventDefault(); 286 | evt.stopPropagation(); 287 | }); 288 | 289 | // 鼠标点击图片右边区域，查看下一张图片 290 | nextBlock.click(function(evt){ 291 | Album.next(); 292 | 293 | evt.preventDefault(); 294 | evt.stopPropagation(); 295 | }); 296 | 297 | // 鼠标点击上一张按钮，查看上一张图片 298 | btnPrev.click(function(evt){ 299 | Album.prev(); 300 | 301 | evt.preventDefault(); 302 | evt.stopPropagation(); 303 | }); 304 | 305 | // 鼠标点击下一张按钮，查看下一张图片 306 | btnNext.click(function(evt){ 307 | Album.next(); 308 | 309 | evt.preventDefault(); 310 | evt.stopPropagation(); 311 | }); 312 | 313 | // 鼠标点击每张缩略图，查看选中图片 314 | // TODO: 是否需要使用delegate来优化一下 315 | items.each(function(i, item){ 316 | $(item).click(function(evt){ 317 | if (!$(this).hasClass(CLS_SELECTED) && !Album.isLoading) { 318 | Album.setCurrentIndex(i).select().change(); 319 | } 320 | evt.preventDefault(); 321 | evt.stopPropagation(); 322 | }); 323 | }); 324 | 325 | return this; 326 | }, 327 | getRoot: function(){ 328 | return $(this.setting.root); 329 | }, 330 | getImage: function(){ 331 | return $(this.setting.image); 332 | }, 333 | getTitle: function(){ 334 | return $(this.setting.title); 335 | }, 336 | getBtnDownload: function(){ 337 | return $(this.setting.btnDownload); 338 | }, 339 | getNavBlock: function(){ 340 | return $(this.setting.navBlock); 341 | }, 342 | getPrevBlock: function(){ 343 | return $(this.setting.prevBlock); 344 | }, 345 | getNextBlock: function(){ 346 | return $(this.setting.nextBlock); 347 | }, 348 | getBtnPrev: function(){ 349 | return $(this.setting.btnPrev); 350 | }, 351 | getBtnNext: function(){ 352 | return $(this.setting.btnNext); 353 | }, 354 | getOverlay: function(){ 355 | return $(this.setting.overlay); 356 | }, 357 | getCarousel: function(){ 358 | return this.setting.Carousel; 359 | }, 360 | getCurrentPage: function(){ 361 | var Carousel = this.getCarousel(); 362 | 363 | return Carousel.setting.curPage; 364 | }, 365 | setCurrentPage: function(page){ 366 | var Carousel = this.getCarousel(); 367 | 368 | Carousel.setting.curPage = page; 369 | 370 | return this; 371 | }, 372 | getMaxPages: function(){ 373 | var Carousel = this.getCarousel(); 374 | 375 | return Carousel.setting.maxPages; 376 | }, 377 | getItemsPrePage: function(){ 378 | var Carousel = this.getCarousel(); 379 | 380 | return Carousel.setting.itemsPrePage; 381 | }, 382 | /** 383 | * 获得相册的所有缩略图 384 | */ 385 | getItems: function(){ 386 | return this.getSamples(); 387 | }, 388 | /** 389 | * getItems 的别名 390 | */ 391 | getSamples: function(){ 392 | var Carousel = this.getCarousel(); 393 | 394 | return Carousel.setting.items; 395 | }, 396 | getLength: function(){ 397 | return this.getItems().length; 398 | }, 399 | getCurrentIndex: function(){ 400 | return this.setting.curIndex; 401 | }, 402 | /** 403 | * 设置显示图片在缩略图中的索引值 404 | * @method setCurrentIndex 405 | * @param {Object} i - 索引值 406 | */ 407 | setCurrentIndex: function(i){ 408 | this.setting.curIndex = i; 409 | 410 | return this; 411 | }, 412 | getMaxWidth: function(){ 413 | return this.setting.maxWidth; 414 | }, 415 | getMaxHeight: function(){ 416 | return this.setting.maxHeight; 417 | } 418 | }; 419 | })(jQuery); -------------------------------------------------------------------------------- /js/carousel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author liyueqing 3 | */ 4 | jQuery.Carousel = function(config){ 5 | this.setting = { 6 | root: null, 7 | related: null, 8 | relatedlist: null, 9 | relateditems: null, 10 | carousel: null, 11 | pages: { 12 | prevBlock: null, 13 | nextBlock: null, 14 | prev: null, 15 | next: null, 16 | current: null, 17 | total: null 18 | }, 19 | timer: null, 20 | curPage: 0, 21 | maxPages: 0, 22 | speed: 1000, 23 | item: 'li', 24 | items: null, 25 | itemsPrePage: 0, 26 | itemsPreStep: 0, 27 | direction: 'V', 28 | auto: false , 29 | isButtonsOut: false 30 | }; 31 | 32 | $.extend(this.setting, config); 33 | 34 | this.init(); 35 | 36 | return this; 37 | }; 38 | 39 | jQuery.Carousel.prototype = { 40 | init: function(){ 41 | var Carousel = this, 42 | setting = Carousel.setting, 43 | direction = setting.direction.toUpperCase(), 44 | carousel = setting.carousel, 45 | carouselWidth = 0, 46 | pages = setting.pages, 47 | next = pages.next, 48 | prev = pages.prev, 49 | related = setting.related, 50 | relatedlist = setting.relatedlist, 51 | current = pages.current, 52 | total = pages.total, 53 | maxPages = 0; 54 | 55 | this.deleteItems(); 56 | setting.items = $(carousel).find(setting.item); 57 | if (!setting.itemsPreStep) { 58 | setting.itemsPrePage = $(carousel).parent().width() / $(setting.items[0]).width(); 59 | maxPages = setting.maxPages = Math.ceil($(setting.items).length / setting.itemsPrePage); 60 | } 61 | else{ 62 | if (setting.itemsPreStep > 0) { 63 | if ($(setting.items).length < setting.itemsPrePage) { 64 | maxPages = setting.maxPages = 1; 65 | } 66 | else{ 67 | maxPages = setting.maxPages = 1 + Math.ceil(($(setting.items).length - setting.itemsPrePage)/setting.itemsPreStep); 68 | } 69 | } 70 | } 71 | 72 | if (maxPages < 2) { 73 | $(next).addClass('hide'); 74 | $(prev).addClass('hide'); 75 | } 76 | 77 | if(direction==='H'){ 78 | $(carousel).css('width', ($(setting.items[0]).width() * setting.items.length) + 'px'); 79 | } 80 | 81 | if(related && relatedlist){ 82 | setting.relateditems = $(relatedlist).find('li'); 83 | } 84 | 85 | if (current) { 86 | $(current).html(setting.curPage + 1); 87 | } 88 | if (total) { 89 | $(total).html(maxPages); 90 | } 91 | 92 | this.bind(); 93 | 94 | if(setting.auto){ 95 | setting.timer = setTimeout(function(){ 96 | Carousel.auto.call(Carousel); 97 | },4000); 98 | } 99 | 100 | return this; 101 | }, 102 | bind: function(){ 103 | var Carousel = this, 104 | setting = this.setting, 105 | root = $(setting.root), 106 | related = setting.related, 107 | relateditems = setting.relateditems, 108 | pages = setting.pages, 109 | prevBlock = pages.prevBlock, 110 | nextBlock = pages.nextBlock, 111 | btnNext = $(root.find(pages.next)[0]), 112 | btnPrev = $(root.find(pages.prev)[0]), 113 | clearTimer = function(evt){ 114 | if (setting.timer) { 115 | clearTimeout(setting.timer); 116 | setting.timer = null; 117 | } 118 | }, 119 | setTimer = function(evt){ 120 | setting.timer = setTimeout(function(){ 121 | Carousel.auto.call(Carousel); 122 | }, 4000); 123 | }; 124 | 125 | if (setting.auto) { 126 | $(root).mouseover(clearTimer); 127 | $(root).mouseout(setTimer); 128 | 129 | if (setting.isButtonsOut) { 130 | btnNext.mouseover(clearTimer); 131 | btnNext.mouseout(setTimer); 132 | 133 | btnPrev.mouseover(clearTimer); 134 | btnPrev.mouseout(setTimer); 135 | } 136 | } 137 | 138 | if (prevBlock && nextBlock) { 139 | root.mouseover(function(){ 140 | $(btnPrev).removeClass('hide'); 141 | $(btnNext).removeClass('hide'); 142 | }); 143 | root.mouseout(function(){ 144 | $(btnPrev).addClass('hide'); 145 | $(btnNext).addClass('hide'); 146 | }); 147 | 148 | $(prevBlock).click(function(evt){ 149 | Carousel.prev.call(Carousel); 150 | 151 | evt.preventDefault(); 152 | evt.stopPropagation(); 153 | }); 154 | $(nextBlock).click(function(evt){ 155 | Carousel.next.call(Carousel); 156 | 157 | evt.preventDefault(); 158 | evt.stopPropagation(); 159 | }); 160 | } 161 | 162 | $(btnPrev).click(function(evt){ 163 | Carousel.prev.call(Carousel); 164 | 165 | evt.preventDefault(); 166 | evt.stopPropagation(); 167 | }); 168 | 169 | $(btnNext).click(function(evt){ 170 | Carousel.next.call(Carousel); 171 | 172 | evt.preventDefault(); 173 | evt.stopPropagation(); 174 | }); 175 | 176 | if(related){ 177 | $(relateditems).hover(function(evt){ 178 | $(this).addClass('hover'); 179 | },function(evt){ 180 | $(this).removeClass('hover'); 181 | }); 182 | 183 | $('#lnk-back-beginning').click(function(evt){ 184 | setting.curPage = 0; 185 | 186 | Carousel.current.call(Carousel, setting.curPage); 187 | $(related).addClass('hide'); 188 | 189 | evt.preventDefault(); 190 | evt.stopPropagation(); 191 | }); 192 | } 193 | 194 | return this; 195 | }, 196 | next: function(){ 197 | var setting = this.setting, 198 | pages = setting.pages, 199 | related = setting.related, 200 | current = pages.current, 201 | total = pages.total, 202 | maxPages = setting.maxPages; 203 | 204 | setting.curPage += 1; 205 | if (setting.curPage === maxPages) { 206 | if (!related) { 207 | setting.curPage = 0; 208 | } 209 | } 210 | 211 | if (related) { 212 | if (setting.curPage === maxPages) { 213 | $(related).removeClass('hide'); 214 | } 215 | else { 216 | this.current(setting.curPage); 217 | } 218 | } 219 | else { 220 | this.current(setting.curPage); 221 | } 222 | 223 | return this; 224 | }, 225 | prev: function(){ 226 | var setting = this.setting, 227 | pages = setting.pages, 228 | current = pages.current, 229 | total = pages.total, 230 | maxPages = setting.maxPages; 231 | 232 | setting.curPage -= 1; 233 | if (setting.curPage < 0) { 234 | setting.curPage = maxPages - 1; 235 | } 236 | this.current(setting.curPage); 237 | 238 | return this; 239 | }, 240 | current: function(index){ 241 | var carousel = this, 242 | setting = this.setting, 243 | pages = setting.pages, 244 | current = pages.current, 245 | total = pages.total, 246 | maxPages = setting.maxPages; 247 | 248 | if (current) { 249 | $(current).html(setting.curPage + 1); 250 | } 251 | if (total) { 252 | $(total).html(maxPages); 253 | } 254 | 255 | this.move(setting.curPage); 256 | 257 | return this; 258 | }, 259 | move: function(index){ 260 | var setting = this.setting, 261 | direction = setting.direction, 262 | carousel = $(setting.carousel); 263 | 264 | if (direction.toUpperCase() === 'H') { 265 | property = 'left'; 266 | scrollValue = setting.itemsPreStep ? (setting.itemsPreStep * $(setting.items[0]).width()) * index : (setting.itemsPrePage ? (setting.itemsPrePage * $(setting.items[0]).width()) * index : $(setting.root).width() * index); 267 | 268 | carousel.animate({ 269 | 'left': '-' + scrollValue + 'px' 270 | }, setting.speed); 271 | } 272 | else { 273 | if (direction.toUpperCase() === 'V') { 274 | scrollValue = setting.itemsPreStep ? (setting.itemsPreStep * $(setting.items[0]).height()) * index : $(setting.root).height() * index; 275 | carousel.animate({ 276 | 'top': '-' + scrollValue + 'px' 277 | }, setting.speed); 278 | } 279 | } 280 | 281 | return this; 282 | }, 283 | deleteItems: function(){ 284 | var listPhotos = $(this.setting.carousel).find('img'); 285 | 286 | if (listPhotos.length === 0) { 287 | return false; 288 | } 289 | listPhotos.each(function(i, img){ 290 | if ($(img).attr('src').indexOf('.jpg') === -1) { 291 | $(img).parent().remove(); 292 | } 293 | }); 294 | 295 | return this; 296 | }, 297 | auto: function(){ 298 | var Carousel = this, 299 | setting = this.setting; 300 | 301 | if(setting.timer){ 302 | clearTimeout(setting.timer); 303 | setting.timer = null; 304 | } 305 | 306 | if(setting.maxPages<2){ 307 | return false; 308 | } 309 | 310 | setting.curPage += 1; 311 | if(setting.curPage===setting.maxPages){ 312 | setting.curPage = 0; 313 | } 314 | 315 | this.current(setting.curPage); 316 | 317 | setting.timer = setTimeout(function(){ 318 | Carousel.auto.call(Carousel); 319 | },4000); 320 | 321 | return this; 322 | } 323 | }; 324 | 325 | jQuery.carousels = function(){ 326 | var carousels = [], i = 0, len = arguments.length; 327 | 328 | for (; i < len; i += 1) { 329 | carousels[i] = new jQuery.Carousel(arguments[i]); 330 | } 331 | 332 | return carousels; 333 | }; 334 | -------------------------------------------------------------------------------- /linkide.md: -------------------------------------------------------------------------------- 1 | ## LinkIDE 开发者工具 2 | 3 | 为帮助开发者更方便、高效的开发和调试基于`聆客`(Link)的小程序，平台推出了`LinkIDE`，它是一个桌面应用，支持在 windows 和 Mac 上使用，通过打通上层的 `Link 平台` 和底层的 `BUI-Weex 开发框架`，使得开发者可以通过 LinkIDE 管理程序包，便捷的进行开发和调试。 4 | 5 | ![](./assets/ide7.png) 6 | 7 | ### 程序包 & 应用 8 | 这里试图为开发者解释 Link平台 中两个关键的概念： 9 | 10 | **程序包**：是指程序源码，每个程序包可以分为`android端`、`iOS端`、`网页端`，每个端下面可以独立发布版本。（程序包 > 终端 > 终端版本） 11 | 12 | **应用**：基于程序包组装应用，一个程序包可以包装成为多个应用（通过入口、启动参数等方式进行区分） 13 | 14 | 其中程序包管理是面向开发者(Developer),应用管理是面向 管理者或者运维人员 (Admin)，一个应用的发布需要得到审核，允许发布后才能正式发布到生产环境。 15 | 16 | ### 安装包下载 17 | 18 | [【Windows版本下载】]()[【Mac版本下载】]() （内测中，暂不对外提供） 19 | 20 | ### 安装依赖 21 | `LinkIDE` 本身基于 Node,NPM环境，小程序工程模版的创建和运行基于 `weex-toolkit` 和 `buiweex-toolkit`(npm package安装在全局),它会在初次使用的时候检测相关依赖。 22 | 23 | ![](./assets/ide1.png) 24 | 25 | 如果 node modules 安装失败，还可以尝试手动安装(打开cmd(win) 或者 终端(mac))： 26 | 27 | ``` 28 | npm install -g weex-toolkit bui-weex-toolkit weex-devtool 29 | ``` 30 | 或者 31 | 32 | ``` 33 | cnpm install -g weex-toolkit bui-weex-toolkit weex-devtool 34 | ``` 35 | 36 | ### 开发者登录 37 | 38 | 开发者需要使用 `聆客`手机端的`扫一扫`功能，扫描二维码进行登录。 39 | 40 | ![](./assets/ide2.png) 41 | 42 | ### 我的程序包 43 | 44 | 在这里可以看到当前开发者所在企业的所有程序包 45 | 46 | ![](./assets/ide3.png) 47 | 48 | ### 添加小程序 49 | 50 | ![](./assets/ide4.png) 51 | 52 | ### 开发调试小程序 53 | 54 | ![](./assets/ide5.png) 55 | 56 | ### 发布小程序 57 | 58 | ![](./assets/ide6.png) 59 | 60 | 尽情享受编码乐趣吧! -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bingo-oss/bui-weex-guidedoc/4c4ecc627591e4fc5fc21900d9a245cdc903b6cc/logo.png -------------------------------------------------------------------------------- /page.md: -------------------------------------------------------------------------------- 1 | ## 页面开发 2 | 3 | Weex框架要求使用 [Vue2.0](https://vuejs.org/) 进行页面开发。开发者通过编写 `*.vue` 文件，基于`