精华内容
下载资源
问答
  • Epub是团队引入的专业级H5应用开发工具,能够快速制作出高质量的H5运营交互页面,具有动画控制、交互设定、社交应用和数据应用的特点,其制作过程就类似于制作一个PPT,比较容易上手。 动画控制:是目前唯一...

    Epub360

     

    Epub是团队引入的专业级H5应用开发工具,能够快速制作出高质量的H5运营交互页面,具有动画控制、交互设定、社交应用和数据应用的特点,其制作过程就类似于制作一个PPT,比较容易上手。

    • 动画控制:是目前唯一支持SVG路径动画、SVG变形动画、精细化序列帧动画控制的H5设计工具,同时还支持关联控制,真正做到专业级的交互动画控制。

    • 交互设定:手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制...并结合Epub提供的数十种触发器控制,完全满足您个性化的交互设计需求。

    • 社交应用:国内率先支持微信高级接口JsSDK,可实现获取昵称头像、拍照、录音等功能,结合投票、评论、助力、信息列表组件,可轻松实现社交互动类H5的设计。

    • 数据应用:参数变量、条件判断、数据库等高级数据组件,可轻松实现测试题、抽奖、社交轻游戏类H5的设计,未来将实现WebApp级别的专业应用可视化设计

    转载于:https://www.cnblogs.com/fei33423/p/7505858.html

    展开全文
  • 本文中提到的“H5”均指代“基于移动端传播的可交互(不限于播放影音,页面滑动,擦除,...是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度 H5工具 Github 地址:https://github.com/ly5...

    本文中提到的“H5”均指代“基于移动端传播的可交互(不限于播放影音,页面滑动,擦除,页内动画,表单收集等方式)的轻量网站”)。相当于微信上的PPT,主要用于品牌方传播和推广的载体 - 摘自一个Geek范的H5页面制作工具

    鲁班H5是什么?

    1. 是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度 H5 等工具
    2. GitHub地址 ,欢迎关注与交流!

    一些截图

    动图

    编辑器模块

    image

    image

    作品列表

    image

    基础数据统计(PV、UV 统计未完成)

    image

    表单统计

    image

    工具诞生的目的

    1. 自己的工作:自己大部分时间在做的都是 ToB 端的项目,也就是大家通常认为的各种管理后台等等,确实是的。
    2. 三年的经历:在从事前端工作的三年时间中,在前面两年时间里,是没有产品经理、交互设计师、UI 设计师的,大部分时间是老大说需求,自己和后端同事商量,向运营、后端了解学习业务,上线,上线之后,有不合适的,再修改。第三年的时候,有了产品经理,流程并没有太大的区别,因为没有接触到交互设计师,产品同学在开始有一些并没有考虑到的需求,我们做了一个版本之后,发现又要改回在另外一个平台的交互,有些痛苦。
    3. 一些挥之不去的想法
    4. 可不可以做一个根据 JSON 或者 拖拽生成 管理后台的东西呢,这样的话,再有这样的需求,我们可以快速弄出来一个带有交互的原型,让产品同学自己去试用,或者说让产品同学自己去快速做一个出来(有的同学说,为何产品不用axure做一个,?,不太会?)
    5. 做不到啊:在研究拖拽生成管理后台的时候,慢慢的发现技术难度略大,自己的能力不足以支持这么大的一个架构。
    6. 那把想法向移动端偏移点吧:心想:如果以后有简单的移动端的需求,就可以让产品或者设计师同学自己去拖拖拽拽生成了。有复杂的需求,技术同学再做支持,甚至可以考虑支持脚本编程,这样在产品或者设计师同学做的基础上,我们直接补充业务逻辑就OK了(后面研究了下,发现确实可行,有兴趣的同学,我们可以一起交流)
    7. 到现在的结果:
      在业余时间的研究(找了GitHub的很多demo,以及请教了网路上的很多厉害的同学,最后会提到),发现技术上确实可行。经过了两三个月的调研,阅读资料,加上两个月左右的 coding。终于有了一个略微能拿出手的小项目了,也就是标题中提到的:[鲁班H5],一款前后端都开源的H5开发工具,可以理解为开源版本的易企秀或人人秀。

    相关地址和链接:

    1. GitHub 地址:https://github.com/ly525/luban-h5

    2. 前端和后端都已经开源,更多的细节和详情,请阅读 GitHub的 README,如果有任何不清楚的地方,please open an issue

    3. 具体的技术栈和本地开发的步骤,在 README 中已经提及,前往阅读即可

      技术栈(当前):前端:Vue.js + 后端:Strapi.js (带有管理后台) + 存储:Sqlite (or Mysql)

    4. 在线预览地址:https://ly525.github.io/luban-h5/ (该预览版本不太完整,因为无法和后端API 结合,最好在本地进行dev 预览)

    鲁班H5 的功能列表

    前端

    1. 编辑器

      • 参考线
      • 吸附线、组件对齐
      • 拖拽改变组件形状
      • 元素: 复制(画布)
      • 元素: 删除(画布)
      • 元素: 编辑(画布)
      • 页面:新增
      • 页面:复制
      • 页面:删除
      • 快速预览
      • 撤销、重做
    2. 组件系统

      • 文字
      • 普通按钮
      • 表单按钮
      • 表单输入框
      • 普通图片
      • 背景图
      • 视频(Iframe形式)
    3. 增强功能

      • 上传 PSD,一键转换为 H5(已经调研,可以实现)
      • 图片库
      • 第三方无版权图片搜索
      • 自定义脚本(已经调研,可以实现)
      • 动画(已经调研,可以实现)

    后端

    - [x] 创建、保存、更新作品
    - [x] 表单数据收集
    - [x] 表单数据展示
    - [x] 在线预览
    - [x] 二维码预览
    - [ ] PV、UV 统计(已经调研,可以实现)
    

    本地开发

    本地开发请参照 readme

    目前仍然在不断迭代中,如果大家有任何的建议和建议,可以加入钉钉群、QQ群(微信群有二维码问题就不放了)和我反馈、交流。当然在GitHub 提 issue 也是非常欢迎的

    展开全文
  • 推荐一个基于Vue 的 H5 快速开发模板

    千次阅读 2020-03-06 19:49:37
    在移动端网页开发时,样式适配始终是一个绕不开的问题。对此目前主流方案有 vw 和 rem(当然还有 vw + rem 结合方案),其实基本原理都是相通的,就是随着屏幕宽度或字体大小成正比变化。因为原理方面的详细资料网络...

    在移动端网页开发时,样式适配始终是一个绕不开的问题。对此目前主流方案有 vw 和 rem(当然还有 vw + rem 结合方案),其实基本原理都是相通的,就是随着屏幕宽度或字体大小成正比变化。因为原理方面的详细资料网络上已经有很多了,就不在这里赘述了,下面主要提供一些这工程方面的工具。
    关于 rem,阿里无线前端团队在 15 年的时候基于 rem 推出了 flexible 方案,以及 postcss 提供的自动转换 px 到 rem 的插件 postcss-pxtorem。
    关于 vw,可以使用 postcss-px-to-viewport 进行自动转换 px 到 vw。postcss-px-to-viewport 相关配置如下:
    “postcss-px-to-viewport”: {
    viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度,一般是375
    viewportHeight: 667, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
    unitPrecision: 3, // 指定px转换为视窗单位值的小数位数(很多时候无法整除)
    viewportUnit: ‘vw’, // 指定需要转换成的视窗单位,建议使用vw
    selectorBlackList: [’.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1, // 小于或等于1px不转换为视窗单位,你也可以设置为你想要的值
    mediaQuery: false // 媒体查询里的单位是否需要转换单位
    }
    复制代码表单校验
    由于大部分移动端组件库都不提供表单校验,因此需要自己封装, 本项目的表单校验方案是在 async-validator 基础上进行二次封装,代码如下,原理很简单,基本满足需求。
    移动端 console
    在调试方面,本项目使用 VConsole 作为手机端调试面板,功能相当于打开 PC 控制台,可以很方便地查看 console, network, cookie, localStorage 等关键调试信息。
    错误监控
    移动端网页相对 PC 端,主要有设备众多,网络条件各异,调试困难等特点。导致如下问题:

    设备兼容或网络异常导致只有部分情况下才出现的 bug,测试无法全面覆盖
    无法获取出现 bug 的用户的设备,又不能复现反馈的 bug
    部分 bug 只出现几次,后面无法复现,不能还原事故现场

    这时就非常需要一个异常监控平台,将异常实时上传到平台,并及时通知相关人员。
    相关工具有 sentry,fundebug 等,其中 sentry 因为功能强大,支持多平台监控(不仅可以监控前端项目),完全开源,可以私有化部署等特点,而被广泛采纳。
    DSBridge
    DSBridge的主要特点:

    DSBridge真正跨平台,官方同时支持ios和android。
    DSBridge支持同步调用。
    三端友好;无论是在ios、android或者web,使用起来都非常简单优雅,这一点和WebViewJavascriptBridge相比,简直就是艺术。
    DSBridge为国人项目,有详细中文文档和问题反馈渠道。

    DSBridge 是H5页面与Native之间通信的桥梁,它有如下特点:

    跨平台;同时支持ios和android。
    双向调用;js可以调用native, native可以调用js
    不仅支持异步调用,而且页支持同步调用(dsbridge是唯一一个支持同步调用的javascript bridge)
    支持进度回调,多次返回(常用于文件下载进度、计时器等)
    Android支持腾讯x5内核
    三端易用;无论是前端还是android或ios,使用都非常简单,极大的降低集成/学习成本

    Svg Icon 图标
    这里要使用到 svg-sprite-loader 这个神器了, 它是一个 webpack loader ,可以将多个 svg 打包成 svg-sprite 。
    国际化
    使用vue-i18n实现国际化
    自动生成代码
    在开发过程中,无论我们添加页面也好还是添加组件也好。都需要不停地新建Vue文件(或者其他框架或者html/js/css文件),这个时候自动生成一些重复的文件结构是很有必要的。
    规范 git 提交
    代码提交记录是一个很好的代码修改日志。规范的代码提交记录,不管在平时代码开发维护过程中,还是在定位 bug 或者回退版本来说都是极为重要。

    生成 CHANGELOG

    分层架构
    目前前端开发主要是以单页应用为主,当应用的业务逻辑足够复杂的时候,总会遇到各种各样的问题
    services
    Services 层是用来对底层技术进行操作的,例如封装 AJAX 请求,操作浏览器 cookie、locaStorage、indexDB,操作 native 提供的能力(如调用摄像头等),以及建立 Websocket 与后端进行交互等。
    entities
    实体 Entity 是领域驱动设计的核心概念,它是领域服务的载体,它定义了业务中某个个体的属性和方法。区分一个对象是否是实体,主要是看他是否有唯一的标志符(例如 id)

    https://weibo.com/ttarticle/p/show?id=2309404477410434220075
    https://weibo.com/ttarticle/p/show?id=2309404476939028005414
    https://weibo.com/ttarticle/p/show?id=2309404476938709237806
    https://weibo.com/ttarticle/p/show?id=2309404476938319167573
    https://weibo.com/ttarticle/p/show?id=2309404476933961285964
    https://weibo.com/ttarticle/p/show?id=2309404474523817738288
    interactors
    Interactors 层是负责处理业务逻辑的层,主要是由业务用例组成。一般情况下 Interactor 是一个单例,它使我们能够存储一些状态并避免不必要的 HTTP 调用,提供一种重置应用程序状态属性的方法
    其他处理

    点击网页输入框会导致网页放大
    唤起键盘后元素被键盘顶起
    唤起软键盘后会遮挡输入框
    键盘收回后页面不回落
    webpack 的配置

    开箱即用,适用于 H5 便利开发的一套模板,还不完善,后续会有补充…

    展开全文
  • 本文中提到的“H5”均指代“基于移动端传播的可交互(不限于播放影音,页面滑动,擦除,...是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度 H5工具 Github 地址:github.com/ly525/luban...

    本文中提到的“H5”均指代“基于移动端传播的可交互(不限于播放影音,页面滑动,擦除,页内动画,表单收集等方式)的轻量网站”)。相当于微信上的PPT,主要用于品牌方传播和推广的载体 - 摘自一个Geek范的H5页面制作工具

    鲁班H5是什么?

    1. 是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度 H5 等工具
    2. Github 地址:github.com/ly525/luban… ,欢迎关注与交流!

    一些截图

    动图

    编辑器模块

    作品列表

    基础数据统计(PV、UV 统计未完成)

    表单统计

    工具诞生的目的

    1. 自己的工作:自己大部分时间在做的都是 ToB 端的项目,也就是大家通常认为的各种管理后台等等,确实是的。
    2. 三年的经历:在从事前端工作的三年时间中,在前面两年时间里,是没有产品经理、交互设计师、UI 设计师的,大部分时间是老大说需求,自己和后端同事商量,向运营、后端了解学习业务,上线,上线之后,有不合适的,再修改。第三年的时候,有了产品经理,流程并没有太大的区别,因为没有接触到交互设计师,产品同学在开始有一些并没有考虑到的需求,我们做了一个版本之后,发现又要改回在另外一个平台的交互,有些痛苦。
    3. 一些挥之不去的想法
    4. 可不可以做一个根据 JSON 或者 拖拽生成 管理后台的东西呢,这样的话,再有这样的需求,我们可以快速弄出来一个带有交互的原型,让产品同学自己去试用,或者说让产品同学自己去快速做一个出来(有的同学说,为何产品不用axure做一个,?,不太会?)
    5. 做不到啊:在研究拖拽生成管理后台的时候,慢慢的发现技术难度略大,自己的能力不足以支持这么大的一个架构。
    6. 那把想法向移动端偏移点吧:心想:如果以后有简单的移动端的需求,就可以让产品或者设计师同学自己去拖拖拽拽生成了。有复杂的需求,技术同学再做支持,甚至可以考虑支持脚本编程,这样在产品或者设计师同学做的基础上,我们直接补充业务逻辑就OK了(后面研究了下,发现确实可行,有兴趣的同学,我们可以一起交流)
    7. 到现在的结果: 在业余时间的研究(找了GitHub的很多demo,以及请教了网路上的很多厉害的同学,最后会提到),发现技术上确实可行。经过了两三个月的调研,阅读资料,加上两个月左右的 coding。终于有了一个略微能拿出手的小项目了,也就是标题中提到的:[鲁班H5],一款前后端都开源的H5开发工具,可以理解为开源版本的易企秀或人人秀。

    相关地址和链接:

    1. GitHub 地址:github.com/ly525/luban…

    2. 前端和后端都已经开源,更多的细节和详情,请阅读 GitHub的 README,如果有任何不清楚的地方,please open an issue

    3. 具体的技术栈和本地开发的步骤,在 README 中已经提及,前往阅读即可

      技术栈(当前):前端:Vue.js + 后端:Strapi.js (带有管理后台) + 存储:Sqlite (or Mysql)

    4. 在线预览地址:ly525.github.io/luban-h5/ (该预览版本不太完整,因为无法和后端API 结合,最好在本地进行dev 预览)

    鲁班H5 的功能列表

    前端

    1. 编辑器

      • 参考线
      • 吸附线、组件对齐
      • 拖拽改变组件形状
      • 元素: 复制(画布)
      • 元素: 删除(画布)
      • 元素: 编辑(画布)
      • 页面:新增
      • 页面:复制
      • 页面:删除
      • 快速预览
      • 撤销、重做
    2. 组件系统

      • 文字
      • 普通按钮
      • 表单按钮
      • 表单输入框
      • 普通图片
      • 背景图
      • 视频(Iframe形式)
    3. 增强功能

      • 上传 PSD,一键转换为 H5(已经调研,可以实现)
      • 图片库
      • 第三方无版权图片搜索
      • 自定义脚本(已经调研,可以实现)
      • 动画(已经调研,可以实现)

    后端

    - [x] 创建、保存、更新作品
    - [x] 表单数据收集
    - [x] 表单数据展示
    - [x] 在线预览
    - [x] 二维码预览
    - [ ] PV、UV 统计(已经调研,可以实现)
    复制代码

    本地开发

    本地开发请参照 readme

    目前仍然在不断迭代中,如果大家有任何的建议和建议,可以加入钉钉群、QQ群(微信群有二维码问题就不放了)和我反馈、交流。当然在GitHub 提 issue 也是非常欢迎的

    交流群


    因为微信群二维码会过期,所以 微信群和QQ群 的二维码请前往查看鲁班-H5 微信群和QQ群 查看


    钉钉讨论组(推荐, 对代码排版相对友好)

    转载于:https://juejin.im/post/5d5817775188253761068f9c

    展开全文
  • h5开发必备之切图工具cutterman

    万次阅读 2017-09-23 12:06:50
    h5开发必备之切图工具cutterman 设计师,给我们开发的psd图,很多时候需要我们切的,那么我们有什么快速切图的工具。 今天来介绍一块很是牛逼的ps插件,它非常小但是功能非常强大,可以节省很都传统切图的时间。 ...
  • 以获取当前用户的部门信息的H5微应用为例,帮助您快速了解钉钉H5微应用的开发流程。 介绍内容: H5微应用的开发、发布流程 如何实现应用内免登 如何获取用户的通讯录信息 准备工作 注册了...
  • > 想要快速开发app,可是没有做app程序员,现有H5页面,想起大佬推荐个h5套壳工具 页面交互比较多,不知道最新哪种工具比较好
  • 如何快速开发H5列表页面

    千次阅读 2019-07-11 10:24:03
    小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面。拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不...确定后需求后就要选择合适的技术框架和开发工具进...
  • 推荐几个H5、app制作开发工具

    万次阅读 多人点赞 2017-05-22 09:49:33
    我们已经进入移动互联网时代,而app是移动互联网的载体。...下面就由小编我来为大家一一介绍四大最好用的app制作开发工具! 即速应用 即速应用是由咫尺网络开发的一款新产品,完全免费,上线之后短时间内已...
  • 全新的中文安卓快速开发工具

    千次阅读 2019-07-01 15:06:47
    中文编程越多越好! 这样我们老大的新专辑就会有更多人听了! 哒哒哒~ 先上图: (新建项目图可开发安卓、...开发工具安卓工程插件简介: 以上的图都是VcnStudio开发安卓项目的截图和界面;其他的后面再发贴。 其中...
  • 为您提供鲁班H5页面生成工具下载,鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度H5工具。鲁班H5特征:1、编辑器参考线吸附线、组件对齐拽改变组件形状元素: 复制(画布)元素: ...
  • 为您提供鲁班H5页面生成工具下载,鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度H5工具。鲁班H5特征:1、编辑器参考线吸附线、组件对齐拽改变组件形状元素: 复制(画布)元素: ...
  • 为您提供鲁班H5页面生成工具下载,鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度H5工具。鲁班H5特征:1、编辑器参考线吸附线、组件对齐拽改变组件形状元素: 复制(画布)元素: ...
  • 让不会写代码的人也能轻松快速上手制作H5页面,界面如下 制作流程 注册 -> 登录 -> 新建H5 -> 编辑H5 (添加页面,添加图层,拖动设置参数) -> 预览/保存/发布 -> end 开源地...
  • H5页面开发流程

    2019-10-08 18:22:31
    H5页面开发采用前端工程自动化构建工具——Yeoman。Yeoman具有集成的包管理、自动编译、内建的预览服务器,能快速创建骨架应用程序。Yeoman主要由三个工具组成:Yo、Grunt、Bower。 Yo:项目工程依赖目录和文件、...
  • 一款简单、好用、快速开发工具 GitHub:https://github.com/yaolingkun/springbootplus 功能: 多数据源 手工配置数据源 注意: MySQL: 的日期类型建议使用DataTime类型 Oracle: date精确到秒,timestamp精确...
  • 小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面。拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表...技术选型确定后需求后就要选择合适的技术框架和开发工具进行...
  • 前言 多页面应用于结构较于简单的页面,因为简答...MogoH5+ 是一个 vue 多页面 脚手架工具 ,结合 H5+可以快速开发安卓与苹果 APP. 即使不适用 Hbuilder 打包成 APP,本脚手架同样可以作为多页面网页生成的参考项目. 特性
  • 传统app开发面临成本高、周期长等问题,因此各类快速生成app的工具层出不穷。企业拥有了app才能实现互联网营销和互联网推广。 一、即速应用 即速应用是由咫尺网络开发的一款新产品,完全免费,上线之后短时间内...
  • 鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度H5工具。 鲁班H5特征: 1、编辑器 参考线 吸附线、组件对齐 拽改变组件形状 元素: 复制(画布) 元素: 删除(画布) 元素: 编辑...
  • 用 vue 写 h5 项目的基本结构与依赖整理,封装常用工具快速开发 h5 的脚手架。 GitHub:https://github.com/yujinpan/h5-vue 实例 - 无Router多页:https://yujinpan.top/h5-vue/example.html 实例 - 带Router...
  • 第1章 课程导学介绍课程整体的内容,技术点讲解,项目演示以及适用...第3章 网站项目前期准备本章将通过几个小节来展示在正式项目开发过程中前期需要做哪些工作,IDE,资源,接口,工具类。 第4章 导航菜单实现本章...
  • 关于H5开发移动端APP

    2020-04-25 23:02:20
    有不少的平台和开发工具可供选择,集代码编辑、调试、打包几乎一条龙服务 , 基于H5+的环境与原生底层交互越来越多,很多功能界面在效果上几乎和原生的没啥区别。 不足: H5开发APP的不足在与原生的相比,有些场景...
  • 使用H5开发移动端app

    2020-04-25 23:26:27
    有不少的平台和开发工具可供选择,集代码编辑、调试、打包几乎一条龙服务 , 基于H5+的环境与原生底层交互越来越多,很多功能界面在效果上几乎和原生的没啥区别。 不足: H5开发APP的不足在与原生的相比,有些场景...
  • h5前端开发前必知的三大流行趋势 随着互联网时代的飞速发展,各种互联网的Web应用程序层出不穷,很多人...1.更多使用快速原型开发工具我们在 2016 年开始尝试使用快速原型开发工具,而2017年将是这种技术真正爆发...
  • ​ 前几天,不少读者私信咨询前文中项目案例的种种实现细节,本文先揭晓使用的开发工具。 ​ 特别说明:系列文章定位是帮助初学者从入门到实战,适合零基础或基础较差uni-apper。为了节约时间,高手勿进,可关注后续...
  • 4、开发工具类 maven导包 com.tencentcloudapi tencentcloud-sdk-java 3.0.112 常量管理 /** * 人脸核身相关参数 */ public static final String FACEKERNEL_SECRETID = "标识身份的 SecretId |"; public static ...
  • 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 ...让不会写代码的人也能轻松快速上手制作H5页面。 H5DS 官方 Git (https://github.com/h5ds/h5ds) ,简体中文 UTF8 版本,其他版本请自行转码 h5ds 官...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 225
精华内容 90
关键字:

h5快速开发工具