精华内容
下载资源
问答
  • 可视化制作工具(基于该内核,可以做BI工具,建站工具,图形设计工具,在线PPT工具等一系列工具),H5DS提供了丰富的插件扩展接口,让插件可自由快速扩展和动态加载,同时也支持API接入 该产品的特点: 【高维护...
  • h5ds-master.zip

    2020-09-09 16:18:42
    H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。示范网站:h5ds.com http://www.h5ds.com
  • H5DS$(function() {/*** 参数说明:callBack, // 渲染完成后的回调函数 Functiondata, // 默认加载的数据 Objectplugins = [], // 加载的插件名称 eg: ['demo']imageSourceModal, // 图片资源弹窗 ...
    H5DS

    $(function() {

    /**

    * 参数说明:

    callBack, // 渲染完成后的回调函数 Function

    data, // 默认加载的数据 Object

    plugins = [], // 加载的插件名称 eg: ['demo']

    imageSourceModal, // 图片资源弹窗 ReactDOM

    soundSourceModal, // 音乐资源弹窗 ReactDOM

    template, // 单页模板列表 ReactDOM

    publishHost = '', // 发布应用的HOST地址:eg: http://localhost:8888

    pluginsHost = '.', // 插件加载地址,默认: '.',自动会加上 '/plugins'

    publishApp, // 发布APP。Function return Promise

    saveApp, // 保存APP 。 Function return Promise

    headerNav, // 右上角的链接。右上角可以自定义菜单 ReactDOM

    savePage, // 收藏页面调用 Function return Promise

    saveLayer, // 收藏图层调用 Function reutrn Promise

    appId = 'test_app_id', // appId

    target = document.querySelector('body') // 默认渲染的区域,默认是document.querySelector('body')

    */

    new H5DSCore({

    target: document.getElementById('App')

    });

    })

    展开全文
  • 1.h5ds 网址 [http://www.h5ds.com](http://www.h5ds.com "") 2.码良 [https://godspen.ymm56.com](https://godspen.ymm56.com "") 3.鲁班 [https://ly525.github.io/luban-h5/zh/]...
  • H5DS$(function() {/*** 参数说明:callBack, // 渲染完成后的回调函数 Functiondata, // 默认加载的数据 Objectplugins = [], // 加载的插件名称 eg: ['demo']imageSourceModal, // 图片资源弹窗 ...
    H5DS

    $(function() {

    /**

    * 参数说明:

    callBack, // 渲染完成后的回调函数 Function

    data, // 默认加载的数据 Object

    plugins = [], // 加载的插件名称 eg: ['demo']

    imageSourceModal, // 图片资源弹窗 ReactDOM

    soundSourceModal, // 音乐资源弹窗 ReactDOM

    template, // 单页模板列表 ReactDOM

    publishHost = '', // 发布应用的HOST地址:eg: http://localhost:8888

    pluginsHost = '.', // 插件加载地址,默认: '.',自动会加上 '/plugins'

    publishApp, // 发布APP。Function return Promise

    saveApp, // 保存APP 。 Function return Promise

    headerNav, // 右上角的链接。右上角可以自定义菜单 ReactDOM

    savePage, // 收藏页面调用 Function return Promise

    saveLayer, // 收藏图层调用 Function reutrn Promise

    appId = 'test_app_id', // appId

    target = document.querySelector('body') // 默认渲染的区域,默认是document.querySelector('body')

    */

    new H5DSCore({

    target: document.getElementById('App')

    });

    })

    展开全文
  • 在做H5DS编辑器的时候,我遇到一个需求:通过时间轴的游标控制动画的进度。看下效果图: 技术选型: 视图:react 动画: 这里我们采用CSS3动画库https://animate.style/ 好了,就这些了! 实现原理 添加动画...

    在做H5DS编辑器的时候,我遇到一个需求:通过时间轴的游标控制动画的进度。看下效果图:

    技术选型:

    视图:react

    动画: 这里我们采用CSS3动画库 https://animate.style/

    好了,就这些了!

    实现原理

    添加动画的时候,动态的给style添加动画属性:

    <div style={{animation: `2s ease 0s 1 normal forwards paused bounceIn`}}>
       五星SVG
    </div>

    上面代码是让五星弹出的动画效果。但是我们的需求是通过拖动时间轴去控制动画的状态。在网上查了很多资料都未发现解决方案,但是在看了w3school之后,然后发现了这样的一句话,如果animation-delay是-2,会跳过2秒进入动画周期,有图为证:

    如果同时设置了animation-play-state: paused;,然后动态的去修改animation-delay的负数参数会有什么效果呢?我试了一下,于是发现了宝藏!这不就是我要的效果么。看下图:

     

    看来还是w3school牛x~

    既然实现原理OK了,我们就可以具体实现了~

    时间轴实现

    因为H5DS的时间轴设计的业务过于复杂,可以拖动排序、删除、添加、拷贝、批量选中、拖动游标、拖动修改动画时长、拖动设置动画延迟时间等,这里代码展示不完全的。

    这里大概做一个描述:

    我们把动画以JSON的方式存储:

    const animates = [
        {
            label: '弹入',
            type: 'in', // 进入、离开、强调动画
            direction: 'normal',
            fillMode: 'forwards',
            name: 'bounceIn',
            duration: 1,
            delay: 0,
            count: 1,
            timing: 'ease'
        },
        ...
    ]
    

    然后把JSON数据给JSX:

    <div style={{animation: `${elem.name} ${elem.duration}s ${elem.timing} ${elem.delay}s ${elem.count} ${elem.direction} ${elem.playState || 'running'} ${elem.fillMode}`}}>
       五星SVG
    </div>

    当我们在拖动游标的时候,只需要动态的修改delay参数即可完成动画的控制,需要注意的是这里的delay参数必须是负数


    我是H5DS(https://www.h5ds.com)的作者,这是一个非常棒的工具,可以协助开发者做H5网页,希望大家能更多的关注,如果有相关的技术问题,可以加入我们的QQ群549856478咨询,希望结交更多对前端技术感兴趣的朋友~

    展开全文
  • ds屏支持电脑和手机端的幻灯片轮播JQ自定义菜单导航H5ds屏支持电脑和手机端的幻灯片轮播JQ自定义菜单导航H5
  • 项目简介 H5DS (HTML5 Design software) 这是... H5DS 官方 Git (https://github.com/h5ds/h5ds) ,简体中文 UTF8 版本,其他版本请自行转码 h5ds 官方站:http://www.h5ds.com 相关网站 h5ds 官方站:http:/...

    项目简介

    • H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。
    • H5DS 官方 Git (https://github.com/h5ds/h5ds) ,简体中文 UTF8 版本,其他版本请自行转码
    • h5ds 官方站:http://www.h5ds.com

    img

    相关网站

    技术交流群

    QQ群1 549856478

    安装使用说明

    1. 准备好运行环境

    运行环境:node v6.x npm 5.x

    2. 执行命令安装依赖

    执行 npm install 安装第三方依赖,如果npm安装失败,可以试试cnpm安装,具体使用说明见:http://npm.taobao.org/

    安装依赖可能时间会比较长,请耐心等待。正常情况下,安装成功后,控制台不会出现error。

    安装成功:

    3. 安装成功后,启动项目

    安装成功后,启动npm start 会自动启动项目,打开浏览器 http://localhost:8787 即可访问项目。

    启动成功后:

    技术架构:

    • 1、功能介绍
    • 2、技术架构
    • 3、性能优化
    • 4、细节分享

    1、项目功能介绍

    很久没写过技术类的文章了,这次给大家分享一个近期的项目,采用react+mobx+jquery构建的大型工具类项目。查看项目网址

    如果用过易企秀,maka或者百度H5,搜狐快站的朋友应该对这个工具是非常熟悉的,用户通过托拉拽等操作,即可轻松实现HTML5代码的编辑工作,大大节约了开发成本,也可以对模板进行二次编辑,快速生成新的H5页面,今天的主角是H5DS (全称:HTML5 Design software) 这是一款WEB的H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。

    做产品前,规划很重要,这将直接决定项目的成败!有的项目需要1年,2年或者更长的时间去规划,规划 好了才能厚积薄发!这时候我们需要逃离程序员的思维,不要单纯的从程序开发的角度去看待整个项目!

    1. 产品思维:程序员在要求产品经理懂一些代码的时候,作为程序员也要有产品思维,在做产品前,心里得有个谱,要做一个怎样的产品(大型项目,小型项目,精品项目,随便搞搞练手…)?面向的用户群体(to C, to B,面向设计师,面向程序员…)?产品定位(面向高端用户,面向低端用户)?用户群体的需求特征(懂程序?懂设计?…)?用户的操作习惯(比如设计师大部分都会使用PS,是按照PS的设计风格来做?…)?等等,一大堆的问题,在做产品前,先尽量的总结这些疑问,然后给产品一个比较好的定位。

    2. 程序员思维:一款优秀的工具具备有高拓展性,方便易用,性能卓越,我们的目标不只是做工具,还要做一个vscode一样的高扩展性的工具,如何解决高扩展性的问题?如何做编辑器的内核抽离?这些应该是程序员考虑的事情。

    3. 如何推广?如何包装?如何运营?如何让这个项目火起来并被大家接受和认可?如何让更多程序员参与其中?这些是站在一个运营人员的角度考虑的问题。

    兼顾以上几点,我们不仅是一个优秀的程序员,还是一个优秀的产品经理,更是一个接地气的运营人员,当我们做项目的前期,无论是产品,程序员,运营推广,这些方面的都得考虑到,虽然一个人不能做全部的工作,但是懂点不至于被别人忽悠。如果你的目标是做管理而不仅仅是一个程序员,那这些能力,多少应该掌握一点。

    2、技术架构方案

    技术选型如下:

    前端:react, mobx, less, jquery

    后端:nodejs, mysql, ngnix

    工具:babel, webpack, gulp, eslint

    H5DS的技术选型基本上是JS的技术栈,只能说这套技术很前端。接下来我解释下,为什么要这样选型。

    1. why react ?

      整个H5页面制作的思路是这样的:生成后的H5页面虽然是单页,但是单页下面还是有多个子页面,我们可以大致的可以分为3个类。APP包含了整个页面的内容。Page包含了单个子页面的内容,Layer是每个子页面里面的元素。这样理解我们的思路就很清晰了。每个H5页面对应有一个JSON文件,而JSON转化为JSX模板,再通过renderToStaticMarkup将JSX转化为HTML, 我觉得这幅图是最有效的说明,react强大的服务端渲染函数,可以直接吧JSX转化为HTML。没有任何人说过,服务器渲染方法就只能在服务器端使用,这里我直接拿到前端使用,而且效果还非常棒,具体的方法renderToStaticMarkup

     
    1. // 这个JSON 文件大致格式
    2. {
    3. ...,
    4. "name": "H5页面名称",
    5. "desc": "H5页面描述信息",
    6. "pic": "主图URL",
    7. "pages": [ // H5由多个子页面组成
    8. {
    9. ...,
    10. layers: [] // 子页面由多个图层组成
    11. }
    12. ]
    13. }
    14.  
    15. // JSX -> HTML 的方法
    16. import { renderToStaticMarkup } from 'react-dom/server';
    17. renderToStaticMarkup(JSX);
    1. why mobx ?

    我是个野蛮的开发者,喜欢用最简单的代码,去实现业务,而mobx更加灵活多变,没有那么多限制和约束,而redux好比墨守成规的名门子弟,虽然约束是可以让代码更加规范,如果是以大量的代码堆积出来的规范,我还是觉得已经脱离了技术的实际意义,同样是增加维护成本的,我绝对不是一个合格的程序员,如果能 code less,do more,我宁愿牺牲规范不择手段。

    1. why jquery ?

    之前很多朋友这样对我说:用了react就不要用jquery了,jquery能做的事情react也能做,为什么还要用其他库?一点也不规范。其实我的回答往往是这样的:我比较任性,而且喜欢jquery!为什么都普遍认为jquery和react不要共存,大致有以下几点:

    1. 从框架层面讲,react可以通过state修改dom,数据会从Virtual DOM到真实的DOM走一遍,如果用了jquery是直接修改DOM,这样导致的结果就是state和真实的DOM就不能对应起来了,react也就失去了他存在的意义。

    2. 从思想方面来讲,jquery直接操作dom和react的思想所违背。

    但是实际的业务千变万化,有哪个框架能说自己能轻松实现所有业务?jquery是工具库,react是ui库,如果运用得当,个人觉得配合起来还是非常不错的选择!有时候用jquery操作DOM,在性能方面能完胜react。比如拖动排序功能!

    技术选型的问题说完了,接下来聊聊整个项目的架构吧!

    第三个模块大家仔细看会发现,实际上是和中间的业务层独立开的,这样更有利于项目的扩展和二次开发。第三个模块这里我们把他定义为内核,基于这个内核,我们可以做web层,server层,以及扩展layer层,内核更像ueditor那样的存在,可以直接在项目中引用,让内核不再依赖任何server,可以独立使用。

    3、性能优化处理

    做工具类的项目,性能是非常大的挑战,我总结了以下几个常见的性能优化点:

    1. 数据缓存。(indexeddb,localStorage,localSession)

    2. 交互优化。(防抖debounce,节流throttle,事件委托)

    3. 内存释放。(componentWillUnmount,DOM释放,引用地址释放)

    4、技术细节分享

    1、拖动排序的性能优化方案

    拖动排序如果用纯react去实现。业务应该是这样的:

    如果用jquery + react 去实现:

    第二种结合jquery的方式,大大减少了react中render函数的执行,不用多次执行diff操作,实现了高性能的拖动方案。

    2、全机型适配方案

    我们固定了显示区域大小为 320 x 514,要兼容所有机型,就要对其进行缩放处理,要么高100%,要么是宽100%,通过JS去计算显示区域的缩放比例,然后居中处理,就可做到最大化的兼容各种机型。背景是全局的,示意图分别表示手机常用尺寸的实例,高度超出的处理,宽度超出的处理,红色部分是显示区域,灰色部分是320*486的原始尺寸比例,黑色阴影部分是灰色部分进行scale缩放填充的区域。

    版权声明

    您可以下载本站代码,但未经许可 禁止 在本产品的整体或任何部分基础上以发展任何派生版本、修改版本或第三方版本用于 重新分发 ,您可以下载源码进行学习或者商业使用而无需支付任何费用,任何企业或者个人在未获得四川爱趣五科技有限公司的书面授权之前,不可去掉编辑器的LOGO和官方链接地址已经相关的版权信息,您若有违反规定,四川爱趣五科技有限公司有权随时中止或终止您对H5DS产品的使用资格并保留追究相关法律责任的权利

    补充

    源码结构图

    展开全文
  • H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。
  • 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。 H5DS 官方 Git (https://github.com/h5ds/h5ds) ,简体中文 UTF8 版本,其他版本...h5ds 官...
  • H5DS编辑器,软件截图: 推荐理由1:时间轴 支持动画时间轴,调试动画和音频 给图层添加动画后可以通过时间轴设置动画,真的很直观和方便。效率提升N倍。其中紫色块表示进入动画,蓝色是离开动画,黄色块...
  • H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面,界面如下 制作流程 注册 -> 登录 -> 新建H5 -> 编辑H5 (添加页面,添加图层,拖动设置参数)...
  • H5DS编辑器,软件截图: 推荐理由1:时间轴 支持动画时间轴,调试动画和音频 给图层添加动画后可以通过时间轴设置动画,真的很直观和方便。效率提升N倍。其中紫色块表示进入动画,蓝色是离开动画,黄色块是强调...
  • DS-DIGI.TTF和DS_DIGIB.TTF字体。H5前端开发字体包含DS-DIGI.TTF和DS_DIGIB.TTF字体。
  • python 读取h5格式的遥感影像 import gdal #h5格式影像 file = r"D:\COSMO\CSKS1_GEC_B_HI_10_VV_RD_FF_20180115091818_20180115091825.h5" #输出tiff格式影像 tiff_file =r"D:\test\test.tif" #获取h5影像的数据集...
  • 鲁班H5是一个前后端都开源的h5快速制作平台,类似于开源版本的易企秀、人人秀,可以通过拖拽的形式,快速生成H5。 # 1.5.0 更新的内容 Bug Fix 修复预览 跨页面通信问题 修复克隆作品时候,动画复制不完整问题 新...
  • h5py基本操作

    千次阅读 2019-01-15 21:52:25
    h5py 文件介绍 一个h5py文件是 “dataset” 和 “group” 二合一的容器。 dataset : 类似数组组织的数据的集合,像 numpy 数组一样工作 group : 包含了其它 dataset 和 其它 group ,像字典一样工作 看下图: ...
  • H5唤醒APP

    万次阅读 2016-05-30 17:53:40
    支付宝https://ds.alipay.com/?from=mobileweb&lt;html class="normal "&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;支付宝&lt;/...
  • H5新增

    2019-09-26 07:45:57
    HTML5 发展史 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG(网页超文本应用技术工作小组)提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月... ...
  • H5 签到功能

    2019-08-07 23:39:00
    H5 签到功能 原文:H5 签到功能 Introduce(介绍) 用户签到的H5例子(css+jquery,无图片),由于网上找的的用户签到例子都不好,要不就是好多图片组成的,要不就大量冗余代码,所以特意做了个签到界面...
  • h5py使用基础笔记

    千次阅读 2018-09-25 13:27:02
    h5py文件的创建和读取,group和dataset的基本使用。
  • h5py如何存储字符串

    2021-07-23 16:24:38
    h5py如何存储字符串 确定存储的数据类型,python3 vlen = str ,python 2 vlen=unicode。 新建数据库后,明确数组的维度,传入类型,再赋值。... ds = f.create_dataset('test_dict', data.shape , dtype
  • 支付宝小程序跳转到h5页面web-view

    万次阅读 2018-12-25 15:10:03
    支付宝小程序跳转到h5页面web-view 基础库 1.6.0 开始支持,低版本需做兼容 组件是一个可以用来承载H5网页的组件,会自动铺满整个小程序页面。 web-view 要渲染的H5网页URL。H5网页URL需要登录小程序管理后台-小...
  • 前言偶然的机会在github上逛,看到一个diy H5的项目叫鲁班,多么眼熟的项目名。毕竟曾经有梦想过但最后没做好。那今天我们就来认识下这个项目。自我介绍就叫小小鲁班吧(真名可以不说吗) 一只没有去过大厂,一直在某...
  • 移动端H5页面,上下滑动翻页

    万次阅读 多人点赞 2017-09-26 15:10:02
    移动端H5页面,上下滑动翻页 向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口 向下滑动进入前一页 , 当前页(加CSS样式outDown)向下移动移出窗口 ...
  • 支付宝h5跳转小程序

    2021-03-12 11:12:07
    其他 APP 或 外部 H5 跳转小程序目前有两种方式可以跳转: Scheme 拼接方式: 前缀https://ds.alipay.com/?scheme= 后拼接 Scheme alipays://platformapi/startapp?appId=xxx&page=x/y/z&query=xx%3dxx 小...
  • h5py 必知--String存储

    万次阅读 多人点赞 2018-04-28 01:16:09
    1. h5py 文件介绍 一个h5py文件是 “dataset” 和 “group” 二合一的容器。 1. dataset : 类似数组组织的数据的集合,像 numpy 数组一样工作 2. group : 包含了其它 dataset 和 其它 group ,像字典一样工作 看...
  • 支付宝H5唤醒APP

    万次阅读 2016-08-21 21:51:06
     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,blockquote,th,td {   margin: 0;   padding: 0;   }   table {   border-collapse: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,253
精华内容 1,301
关键字:

H5DS