您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

WeUI开发H5应用

时间:2020-12-29 13:50:45  来源:  作者:

前言

浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。

随着能力越来越强,从直接编写htmlcssJAVAscript,到通过一些约定的规则来更好的分组开发,如基于es6、less、typescript等来开发,再应用一些辅助工具如gulp、webpack等构建,形成可模块化开发,分工协作、编译组合的能力。对比类似visual studio、Android Studio客户端的开发工具,相关工作流程越来越一致。

  1. 编写html、css(含less)、JavaScript(含typescript)等
  2. 编写package.json(类似makefile文件)
  3. 构建(webpack、glup等)

标准能够让大家跟随,从最最朴实的共识开始,开放而后茁壮成长。

规则与概念很难建立,需要清晰定义边界,并在执行中持续巩固……

就目前为止标准化最好的仍然是H5系列,丰富的构建工具支持着H5的开发,这正代表着H5的崛起。

WeUI开发H5应用

 

WeUI基于橙色技术栈开发

WeUI是腾讯提供的一个样式框架,适合应用来制作与微信能够更搭配的公众号与小程序。基于MIT许可,提供了常用的如按钮、进度条、导航、对话框、表单等组件,可简化相关的设计工作。

环境准备

代码路径如下: https://github.com/Tencent/weui

WeUI使用了less来开发样式,用Gulp管理工程。我使用的环境如下:

 

基本环境

直接下载weui后,编译会报错。需要修改一些内容。如下图:

修改package.json版本

默认weui使用3.9.1版本的gulp来处理,需要将

WeUI开发H5应用

 

修改gulpfile.js文件

gulp4.0对任务的定义,要求使用serial限定。

WeUI开发H5应用

 

安装weui依赖的包

按照提示分贝安装如下包

WeUI开发H5应用

 

查看相关的任务

WeUI开发H5应用

 

编译

编译时,提示async要另外处理,可忽略。

WeUI开发H5应用

 

修改了下gulpfile.js,确保返回异步结果。

WeUI开发H5应用

 

然后执行gulp获得如下结果。

WeUI开发H5应用

 

测试

WeUI开发H5应用

 

此时会自动打开浏览器,也可手工输入http://127.0.0.1:8081

WeUI开发H5应用

 

相关技术

H5,Css,Javascript就不提了,WeUI基于如下几项技术,要有一些了解,便于更好的应用。

Zepto.js

http://www.zeptojs.cn/

类似于Jquery的库,可以充分使用其选择器,用起来上手较快。

less

http://lesscss.org

支持变量定义,支持文件引入,可以更好的用来分工协作来编写好CSS。

 

gulp

weui使用gulp来完成项目的构建。必备的gulp只是还是很有必要。https://gulpjs.com/

WeUI开发H5应用

 

Gulp的工作示意图

# node --version
v14.9.0
# npm --version
6.14.8
# npm install --global gulp-cli
# npx mkdirp my-project
# cd my-project
# npm init
# npm install --save-dev gulp
# gulp --version
CLI version: 2.3.0
Local version: 4.0.2
# 

创建gulpfile.js

在根目录下创建文件

function defaultTask(cb) {
    // place code for your default task here
    cb();
  }
  
  exports.default = defaultTask

应用

使用WeUI自然最好是从工程自带的Exam开始,http://localhost:8081/example/ 如下先做一些简单的应用介绍。

抽屉列表样式

从源码看,这里是WeUI的首页样式,一个抽屉列表样式,通过gulpfile.js编译为一个单页应用。

WeUI开发H5应用

 

默认使用的是这里的文件

WeUI开发H5应用

 


WeUI开发H5应用

 

H5代码

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="./images/logo.png" alt="WeUI" height="21px" />
        </h1>
        <p class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">表单</p>
                    <img src="./images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="button" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Button</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <!--
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="input" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Input</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        -->
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Form</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>List</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="slider" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Slider</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="uploader" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Uploader</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">基础组件</p>
                    <img src="./images/icon_nav_layout.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="article" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Article</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="badge" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Badge</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="flex" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Flex</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="footer" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Footer</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="gallery" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Gallery</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="grid" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Grid</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="icons" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Icons</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="loading" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Loading</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="loadmore" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Loadmore</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="panel" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Panel</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="preview" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Preview</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="progress" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Progress</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">操作反馈</p>
                    <img src="./images/icon_nav_feedback.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="actionsheet" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Actionsheet</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="dialog" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="half-screen-dialog" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Half-screen Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="msg" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Msg</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="picker" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Picker</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="toast" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Toast</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="top-tips" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>TopTips</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">导航相关</p>
                    <img src="./images/icon_nav_nav.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="navbar" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Navbar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="tabbar" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Tabbar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">搜索相关</p>
                    <img src="./images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="searchbar" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_item" data-id="layers">
                    <p class="weui-flex__item">层级规范</p>
                    <img src="./images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</div>

Javascript代码

<script type="text/javascript">
    $(function(){
        var winH = $(window).height();
        var categorySpace = 10;

        $('.js_item').on('click', function(){
            console.log($(this),$(this).data('id'));
            var id = $(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this = $(this),
                $inner = $this.next('.js_categoryInner'),
                $page = $this.parents('.page'),
                $parent = $(this).parent('li');
            var innerH = $inner.data('height');

            if(!innerH){
                $inner.css('height', 'auto');
                innerH = $inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop = this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }

            var winH = $(window).height();
            var $foot = $('body').find('.page__ft');
            if($foot.length < 1) return;

            if($foot.position().top + $foot.height() < winH){
                $foot.addClass('j_bottom');
            }else{
                $foot.removeClass('j_bottom');
            }
        });
    });
</script>

依赖文件

<html>
<head>
    ...
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
    ...
</head>
<body>
...
<script src="./zepto.min.js"></script>
<script src="./example.js"></script>
...
</body>
</html>

更新测试一把

  1. 先修改gulpfile.js
  2. 参考WeUI创建index.html与home.html
  3. 编辑home.html
/**
 * 增加study的html数据
 */
gulp.task('build:study:html', function() {
    return gulp
    .src('src/study/index.html', option)
    .pipe(
        tap(function(file) {
            var dir = path.dirname(file.path);
            var contents = file.contents.toString();
            contents = contents.replace(
                /<links+rel="import"s+href="(.*)">/gi,
                function(match, $1) {
                    var filename = path.join(dir, $1);
                    var id = path.basename(filename, '.html');
                    var content = fs.readFileSync(filename, 'utf-8');
                    return (
                        '<script type="text/html" id="tpl_' +
                        id +
                        '">n' +
                        content +
                        'n</script>'
                    );
                },
            );
            file.contents = new Buffer(contents);
        }),
    )
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }));
});
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>WeUI</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="../example/example.css"/>
</head>
<body ontouchstart>
    <div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>

    <div class="container" id="container"></div>

    <link rel="import" href="./home.html">
    
    
    <script src="../example/zepto.min.js"></script>
    <script src="../example/example.js"></script>
</body>
</html>
<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="./images/logo.png" alt="WeUI" height="21px" />
        </h1>
        <p class="page__desc">Hello world WeUI, This is the first day to study.</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">表单</p>
                    <img src="./images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="button" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Button</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <!--
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="input" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Input</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        -->
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Form</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>List</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
           
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">搜索相关</p>
                    <img src="./images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="searchbar" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_item" data-id="layers">
                    <p class="weui-flex__item">层级规范</p>
                    <img src="./images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var winH = $(window).height();
        var categorySpace = 10;

        $('.js_item').on('click', function(){
            var id = $(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this = $(this),
                $inner = $this.next('.js_categoryInner'),
                $page = $this.parents('.page'),
                $parent = $(this).parent('li');
            var innerH = $inner.data('height');

            if(!innerH){
                $inner.css('height', 'auto');
                innerH = $inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop = this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }

            var winH = $(window).height();
            var $foot = $('body').find('.page__ft');
            if($foot.length < 1) return;

            if($foot.position().top + $foot.height() < winH){
                $foot.addClass('j_bottom');
            }else{
                $foot.removeClass('j_bottom');
            }
        });
    });
</script>
gulp build:study:html
# 然后 浏览器访问 http://127.0.0.1:8081
WeUI开发H5应用

 

目录结构如上

WeUI开发H5应用

 

表单

WeUI开发H5应用

 

基础组件

WeUI开发H5应用

 

操作反馈

WeUI开发H5应用

 

导航相关

WeUI开发H5应用

 


WeUI开发H5应用

 


WeUI开发H5应用

 

搜索相关

WeUI开发H5应用

 


WeUI开发H5应用

 

层级规范

WeUI开发H5应用

 


WeUI开发H5应用

 

总结

WeUI构造了可以较好与微信兼容的样式,但是部分放到了Example里,如果要使用需要将example.css的,需要结合zepto.js和example.js一起完成交互。但是足够帮助写出一个相对不错的H5应用。

但即便如此,也依稀看出产品意识的确不够,形到而意不到。万事果然最佳是相称,意到而形不致,也是眼高手低。

改进点

https://github.com/gaussgao/weui-study.git

  1. 明确设计概念
  2. 给出应用使用手册
  3. 给出二次开发指引
  4. 增加必备的导航样式


Tags:H5应用   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29  Tags: H5应用  点击:(165)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(228)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条