amazeui/amazeui-dingtalk

Web Components for DingTalk based on React.js

Amaze UI 是基于社区开源项目构建的一个跨屏前端框架。

Docs in English

README in English

React 版 | 独立插件 | Amaze UI Touch

功能简介

移动优先

以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

组件丰富，模块化

Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

本地化支持

相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。

轻量级，高性能

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

下载及使用

用户可以从 Amaze UI 官网 下载打包好的模板。

所有文档存放在 docs/ 目录下，为方便查看演示效果，建议通过 Amaze UI 官网查看文档。

开发及构建

用户可以在 Amaze UI 的基础上进行二次开发。

目录结构

amazeui
|-- HISTORY.md
|-- LICENSE
|-- README.md
|-- package.json
|-- dist        # 构建目录
|-- docs        # 文档
|-- fonts       # Icon font，目前使用了 http://staticfile.org/
|-- gulpfile.js # 构建配置文件
|-- js          # JS 文件
|-- less        # LESS 文件
|-- tools       # 相关工具
|-- vendor
`-- widget      # Web 组件

构建工具

Amaze UI 使用 gulp.js 构建项目。

首先全局安装 gulp：

npm install -g gulp

克隆项目文件:

git clone https://github.com/allmobilize/amazeui.git

然后进入目录安装依赖：

npm install

接下来，执行 gulp：

gulp

Bug 反馈及需求提交

参考、使用的项目

• Zepto.js (MIT License)
• Sea.js (MIT License)
• Handlebars.js (MIT License)
• normalize.css (MIT License)
• FontAwesome (CC BY 3.0 License)
• Bootstrap (MIT License)
• UIkit (MIT License)
• Foundation (MIT License)
• Framework7 (MIT License)
• Alice (MIT License)
• Arale (MIT License)
• Pure (BSD License)
• Semantic UI (MIT License)
• FastClick (MIT License)
• screenfull.js (MIT License)
• FlexSlider (GPL 2.0)
• Hammer.js (MIT License)
• Flat UI (CC BY 3.0 and MIT License)
• store.js (MIT License)
• bootstrap-datepicker.js (Apache License 2.0)
• iScroll (MIT License)

可能会有部分项目遗漏，我们会不断整理更新。

Developed with Open Source Licensed WebStorm

amazeui-dingtalk's Issues

钉钉内项目运行白屏

测试用例1：

• https://n1k0.github.io/tinysynth/ （基于react.js 版本号：15.3.2）
• 魅族pro6：
  • 原生浏览器：可用
  • 钉钉：白屏
• 华为荣耀8：
  • 原生浏览器：白屏
  • 钉钉：可用

测试用例2：

• http://d.paiago.com/?corpid=ding4940d8b848e83b4a&lwfrom=user_dingfriend（Amaze UI for 钉钉）
• 魅族pro6
  • 原生浏览器：可用
  • 钉钉：白屏
• 华为荣耀8：
  • 原生浏览器：白屏
  • 钉钉：可用

测试结论：

• 在有问题的机型下，整个打包的 js 都没有运行 ,也无报错信息出现， 比较难定位到问题。

项目运行不了有错误

ERROR in ./docs/components/navbar/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/home/hml/amazeui-dingtalk/docs/components/navbar/../../../kitchen-sink/pages/NavbarExample.js'
at Error (native)
@ ./docs/components/index.js 48:15-34

ERROR in ./docs/components/tabbar/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/home/hml/amazeui-dingtalk/docs/components/tabbar/../../../kitchen-sink/pages/TabbarExample.js'
at Error (native)
@ ./docs/components/index.js 60:15-34

文档 需要更新

复现步奏

1. 依赖项的版本号需要固定在15.2.1
   2.react-with-addons 必须放在react-dom之前， 否则notification，SearchBar的部分事件不能响应

    <div id="content-root">
        <script type="text/javascript" src="https://cdn.bootcss.com/react/15.2.1/react.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/react/15.2.1/react-dom.js"></script>
        <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/amazeui-dingtalk.js"></script>
        <script type="text/javascript" src="./script/main.js"></script>
    </div>

顺序不能颠倒

打包后为什么没有入口文件index.html,是要自己建立吗

欢迎你为 Amaze UI 添砖加瓦。

• 如果你想反馈 bug 或者使用问题，请务必按照以下格式提交，以便问题定位和解决，节省来回问答的时间；
• 如果你不熟悉 Markdown 语法，请先阅读 Mastering Markdown；
• 如果你不知道如何上传文件，请参考 File attachments on issues and pull requests，或者留意一下输入框底部的小字 Attach files by dragging & dropping, selecting them, or pasting from the clipboard.，点击 selecting them 也可以上传；
• 最后，请在提交 issue 之前删除提示性的文字，包括本行及以上部分，以及下面括号中的内容。

问题描述

（简明扼要地描述一下问题）

产生环境

• 设备及型号：（手机、平板等移动设备时填写此项，如 iPhone 6s Plus）

• 操作系统及版本：（在系统设置关于里面可以查看）

• 浏览器及版本：（一般在浏览器「帮助」或者「关于」里面）

• 演示地址：（请尽量提供可在线查看的演示地址）

• 问题截图/录屏：

  （截图和录屏有助于我们更直观的理解你想表达的问题。如果需要，你可以使用 LICEcap 录制 GIF 动画）

复现步奏

...

server rendering 运行不了

$ npm start

[email protected] start /Users/xiexuemei/qjd/work/amazeui-dingtalk/examples/server-rendering
node bootstrap.js

/Users/xiexuemei/qjd/work/amazeui-dingtalk/js/react/SearchBar.js:156
var brands = Array.from(document.querySelectorAll('.item-title')).map(function (item) {
^

ReferenceError: document is not defined

文档中错误：关于webpack external 的 'react-addons-css-transition-group'

问题描述

文档中 描述

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'amazeui-dingtalk': 'AMUIDingTalk',
  'react-addons-css-transition-group':
    ['React', 'addons', 'CSSTransitionGroup'] //这里错了，编译不通过
}

需要改成

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'amazeui-dingtalk': 'AMUIDingTalk',
 'react-addons-css-transition-group': {
    root: ['React', 'addons', 'CSSTransitionGroup'],
    commonjs2: 'react-addons-css-transition-group',
    commonjs: 'react-addons-css-transition-group',
    amd: 'react-addons-css-transition-group'
  },
}