整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何一次开发生成android,ios(可无开发者账号),Html5 web app

在是移动开发的高潮时代,相信很多程序员都花时间去学习android,ios的开发,或者利用其他原生开发框架,今天小编要给大家推荐一个国产的超级神器 Hbuilder,相信这个神 器应该有不少人知道,不知道的也没有关系,今天知道也不晚。使用Hbuilder 可以一次编码直接发布为 android,ios,Html5 web 的app,大家也都知道发到苹果的APP商店中,是需要申请开发者账号,而且每年要交美金。然而通过Hbuilder我们可以发布为流应用(类似于小程序,其他腾讯的小程序晚于Dcloud的流用),IOS用户只需要下载一个叫”流应用“的App,即可运行我们自己生成的流应用程序 。流应用是一个内核,一个运行环境引擎。

现在让我们揭开他的芦山真面目。

什么是HBuilder?

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。


如何安装 HBuilder?

HBuilder下载地址:在HBuilder官网http://www.dcloud.io/点击免费下载,下载最新版的HBuilder。

HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。


使用HBuilder新建项目

依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))

如上图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)


使用HBuilder创建HTML页面

在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件)),并选择空白文件模板,如下图


使用HBuilder边改边看试试查看编程效果

win系统按下Ctrl+P(MacOS为Command+P)进入边改边看模式,在此模式下,如果当前打开的是HTML文件,每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件,如与当前浏览器视图打开的页面有引用关系,也会刷新)


HBuilder代码块大量减少重复代码工作量

在打开的getstart.html中输入H,如下图

然后按下8,自动生成HTML的基本代码如下图

什么是代码块?

代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id)。

查看、编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑。也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看。

  • 代码块激活字符原则1:连续单词的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

  • 代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车、st回车,即可完成script、style标签的输入。

  • 代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。比如meta输出但metau则输出,metag同理。

  • 代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。

  • 代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。


灵活的快捷键使得编程过程手不离键盘

效果如下图

  • 新建html基本模板后,当前光标处于title标签内,此时我们给HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行

  • 我们在此处使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图

  • 使用funn代码块编写一个JS方法helloworld(输入funn,回车)如下图

  • 此时生成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可,如下图

  • 上图中的绿色竖线,是代码块中指定的下一个编辑位置,敲击回车光标会直接跳转至竖线位置

  • 此时按向下、向下,Ctrl+回车,输入style回车,生成css代码区域

  • 定义一个Css类classA:输入. c l a s s A { 回车,f o n t 回车 回车 回车

  • 然后按alt+下,alt+下跳转至下一个编辑区域

  • 依次输入< d i v 也可输入<dv回车、<iv回车,语法助手可以通过模糊匹配获知想要生成的标签)如下图

  • 如上图所示,代码助手左侧包含数字,可以使用这些数字选择对应的条目,右侧包含浏览器兼容性数据及示例

  • 输入i 回车 d 1,右箭头,空格,c 回车 回车

  • 鼠标在div标签的class属性classA上悬浮,按下Alt和左键,点击后可跳转至classA定义处

  • Ctrl+回车

  • div也可以通过代码块生成如输入divc回车回车回车,输入helloworld如下图

  • 向下,回车


使用CSS选择器语法来快速开发HTML和CSS(支持Emmet)

输入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代码如下图

HBuilder集成了Emmet功能,可以通过CSS选择器语法来快速开发HTML和CSS,如想深入了解Emmet请移步http://www.emmet.io/


强大的JS解析引擎大大加快JS开发的速度

JS中提示HTML、CSS

JS提示html的ID

JS提示html的tagname

JS提示css类名

JS通过ID、tagname、css类名不但可以获取HTML元素,还可以精确分析出其元素类型,准确提示其属性,如上图可以提示出list[0].type

JS中提示JSON

JS提示自定义系统方法

JS提示对象引用及其属性、方法

JS提示闭包对象


跳转到class、id、js方法定义处

按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以哦

跳转到JS方法定义处 如下图

跳转到CSS类定义处 如下图

跳转到ID定义处 如下图

跳转到文件 如下图


更多挖宝

  • 跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。

  • HTML5+支持、手机真机连调、云编译,方便开发跨手机平台的APP。

  • 更多精彩功能:重构 | 大纲 | 任务 | 版本历史 | 内置webserver | 实时升级 | 安全工程管理 | 包围 | 掩码转换 | 智能纠错 | 折叠代码 | 转到定义 | 格式化代码 | URL编解码 | 进制转换 | 自动闭合。

  • 还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。

HBuilder

入门

  • 设计理念及常用功能

  • Hello HBuilder

进阶

  • Emmet语法支持

  • less、sass的支持和预编译器

  • HTML模板组使用指南

  • 自定义语法提示&代码块

  • JSDoc+规范

  • 中文输入法免干扰

  • 分窗体、并列编辑器

  • 真机运行常见问题

  • 外部工具使用指南

  • SVN、GIT等绑定操作快捷键

  • 插件安装

5+ APP

入门

  • 5+ App概述

  • 创建HelloWorld

  • 调试打包

  • mui开发注意事项

进阶

  • 窗口管理

  • 下拉刷新

  • 上拉加载

  • 列表到详情最佳实践

  • 应用升级

  • 推送服务

  • 地图定位

  • 登录授权(微信、微博)

  • 快捷支付(微信、支付宝)

  • 社交分享

  • App优化技巧

  • 沉浸式状态栏

  • 代码混淆加密

  • 5+SDK 集成

  • 5+SDK 插件开发

  • Native.js调用原生API

  • 苹果打包证书申请指南

  • 通过UrlSchemes与第三方应用相互调用

  • 培训资源视频教程汇总

wap2app

入门

  • wap2app概述

  • sitemap.json概述

  • matchUrls配置

  • webviewParameter配置

  • webviewParameter之titleNView配置

  • easyConfig配置

  • M站改造-去除元素

  • app.js

进阶

  • NView模板概述

  • NView模板-布局

  • NView模板-标签

  • NView模板-样式

  • NView模板-事件

  • NView模板-数据绑定

  • M站改造-原生定位

  • M站改造-原生分享

  • 选项卡切换优化

流应用

入门

  • 流应用介绍

  • 视频体验及入口说明

  • 流应用开发指南

  • 微信小程序转流应用指南

进阶

  • 流应用更新方式说明

  • 制作快码

  • H5游戏改造流应用指南

  • 如何在应用A中给流应用B导流

  • 流应用SDK集成

  • gostream.js,wap站流量转为app流量

感兴趣的程序员可以到该网站具体看下:dcloud.io

面我推荐几款工具

HTML App Build

HTML App Build 工具是一款可以将 HTML 网页转换为 EXE 可执行文件的软件。它可以让您使用 HTML、JavaScript 和 CSS 等网页技术开发跨平台的移动应用

使用 HTML App Build 工具的步骤如下:

1. 在您的电脑上安装 HTML App Build 工具

2. 打开 HTML App Build 工具,选择“文件”-> “新建”->“项目”,输入项目名称和保存路径,选择“5+ App”模板。

3. 编写您的 HTML、JavaScript 和 CSS 代码,或者使用 HBuilderX 内置的 HTML5+ API 和 MUI 框架来快速开发移动应用。

4. 在 HTML App Build 工具中选择“运行”-> “运行到手机或模拟器”,查看您的应用在真机或模拟器上的效果。

5. 在 HTML App Build 工具中选择“云打包”-> “打包设置”,设置应用的图标、名称、版本号等信息,然后选择“开始云打包”。

6. 等待云打包完成后,下载应用的 EXE 文件,或者扫描二维码在手机上安装应用。

HEX

HEX 工具是一款可以将 HTML 网页转换为 EXE 或 APP 的软件。它可以让您使用 HTML等网页技术开发桌面或移动应用。


使用 HEX 工具将 HTML 变为 EXE 或 APP 的步骤如下:

1. 在您的电脑上安装 HEX 工具。

2.打开HEX 工具,选择“新建项目”,输入项目名称和保存路径,选择“HTML”模式。

3.编写您的 HTML ,JavaScript 和 CSS 代码,或者使用现有的 HTML 网页文件。

4.在HEX 工具中选择“发布项目”,设置您的应用的图标、名称、版本号等信息,然后选择“生成 EXE”或“生成 APP”。

5.等待生成完成后,您就可以得到您的应用的 EXE 或 APP 文件,可以在电脑或手机上运行。

这是详细的使用过程:HTML杞� EXE锛寃eb椤圭洰鎵撳寘 exe鐨勮В鍐虫柟妗堬紙1锛夛細HEX - 鐭ヤ箮

HTML Compiler

HTML Compiler是一款可以将HTML文件转换为可执行文件的工具。您可以使用它来制作独立的网页应用程序或演示文稿。要使用HTML Compiler工具,您需要按照以下步骤操作:

1. 下载并安装HTML Compiler2021直装版,或者从官网下载最新版本。

2. 打开HTML Compiler,选择“新建项目”或“打开项目”,并选择您要编译的HTML文件或文件夹。

3. 在项目设置中,您可以修改应用程序的名称、图标、版本、版权等信息,以及选择编译选项和输出路径。

4. 点击“编译”按钮,等待编译完成,您就可以在输出路径中找到生成的可执行文件了。

这是关于html compiler直装版的详细教程HTML Compiler2021直装版 附安装教程及特点 - 哔哩哔哩

如果您只是想编辑和运行HTML文件,而不需要编译成可执行文件,您可以使用其他的HTML编辑器,例如VS Code、HBuilderX、Online HTML Editor等。这些编辑器都提供了语法高亮、代码提示、实时预览等功能,可以帮助您快速编写和测试HTML代码。

从移动平台崛起以来,HTML5移动应用开发迅速变成了热门话题,开发者们被各种开发HTML5移动应用的方法搞得晕头转向,今天请到了金山云基础架构部研发负责人柴春燕给大家分享如何避免HTML5移动应用最容易踩的那些坑。

柴春燕--

微软社区精英计划博客组负责人,HTML5研究小组成员,擅长HTML5及移动应用开发;

具有多年Web开发经验,曾参与开发微软Visual Studio 2010中文学习平台,基于SaaS模式的E-Learning系统;

曾负责当当网Web前端开发及移动应用开发,担任百度音乐高级研发工程师;

目前就职于金山云,初期负责金山云前端架构,现任基础架构部研发经理。

01/移动应用中HTML5的新特性

工欲善其事,必先利其器。我比较推崇的学习技术的方式,是先整体了解,然后结合实际需求,再做针对性的学习。整体了解的方式,比较建议是直接看官网的API文档,这里可以推荐几个网站: http://www.w3school.com.cn/html5/index.asp, https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5, http://www.html5rocks.com, http://caniuse.com/

其中,特别说明下http://caniuse.com/,通过这个网站,我们可以非常快速的查询到你所想使用的html5的特性在各个浏览器,包括不同终端的浏览器的兼容性情况。

HTML5 在移动应用开发上面能够利用的特性主要有:

1. form input type

表单是我们在开发中经常会遇到的,如果按照传统的方式,要介入jquery validate或者自己写正则进行判断,但是其实html5的form表单新增的input type属性,能够快速帮我们实现所需要的功能。

2. video & audio

移动浏览器是不支持flash的,在一些微信专题活动中,经常会看到嵌入音频,那么audio标签就是比较适合的应用场景,html5中audio提供的api attr还是比较全面的。

视频格式一般有mp4和webm两种格式,在使用的时候,一般建议同时生成两种,根据浏览器兼容性,进行相应的选择。音频audio,一般会同时制作mp3 ogg格式。

3. storage

关于web storage,大家可以参考我之前分享的一篇内容:

http://www.chaichunyan.com/topics/html5-training/5.html5_storage/#/

重点是localstorage,尤其是我们在做移动应用的性能优化时,localstorage能够发挥很大的作用。

学习的时候,建议大家带着问题去学习,比方说“localstorage最大的存储容量是多少?”“有没有有效期?”“cookie是有域的概念的,那么localstorage呢?”

4. css3

html5其实更多的是一个web标准,这个标准里边,包含了html、JavaScript api、css。css3是我们在移动应用中要重点学习和掌握的。

1.选择器

2.自定义字体

3.多栏布局

4.文字,容器阴影

5.圆角

6.渐变效果

7.动画 ...

大家可以通过下面一个例子有一个直观的印象:

http://www.chaichunyan.com/topics/html5-training/7.css3_summary/demos/index.html

之前很多我们需要通过js或者切图实现的效果,在移动端,就可以直接通过css3实现。

这里特别强调下关于布局,css3弹性布局,希望大家能够仔细去了解,我在面试时候,必问的一道题,当然,面试只是手段,更重要的是希望能够学以致用,真正在实际工作中发挥作用。

flexbox布局的兼容性,弹性盒模型实现的原理,这些我们在做移动终端调试时候,如果只是靠反复试错,那么效率是非常低的。

了解了html5的特性,开发者就会在移动应用上一展身手了。

02/HTML5移动应用中踩过的那些坑

1.布局

移动浏览器访问的web站点,后面称为mobile webapp哈(泛指移动终端浏览器访问的web站点),能不能使用传统的流式布局?答案是可以,但是要慎用。

mobile webapp对css3的弹性布局支持还是比较给力的,iOS Safari还好,但是Android的碎片化非常严重,尤其是Android上面各种第三方浏览器会做各种各样的定制化,使用flexbox比float能够减少你在布局调试上的时间,而且兼容性有保证。

2.图片适配

这里边要提供一个概念,是屏幕分辨率和物理分辨率,为什么我们使用ios看到的图片清晰度那么高,原因是普通的手机屏幕,一点显示一个像素,但是iphone4s 以后是一个点四个像素。

那按照320的设计稿切出来的图片,在iphone上面显示肯定是有锯齿的。

处理方法可以参见我之前分享的一篇文章:图片的适配与清晰度

http://blog.csdn.net/spring21st/article/details/7513906

3.字体

我把字体的处理分为两类,一种是艺术字体、icon,另一种是我们在页面中的字体。

移动终端对网络的要求是比较高的,我们要尽可能减少网络请求,图片是非常大的网络开销,当然,我们可以用合并图片的方式减少请求数,但是请求量变大了。

css3支持web fonts,所以,我们可以引入字体文件,而不是所有的字体都是通过切图的方式来实现。对于icon,一种方式是base64处理,但是现在更常见的做法,是转换成矢量字体。

这里推荐一个网站:font awesome http://fortawesome.github.io/Font-Awesome/icon/css3/

这里边涵盖了大部分我们会用到的图标,当然,公司有精力和人力的情况下,建议可以维护自己的矢量字体库。

4.横竖屏

我们可以通过css 的media query 判断横竖屏。

但是这种只能控制样式展现,当我们需要监听横竖屏变化的时候,就只能通过js监听window.onorientationchange事件的方式实现。

但是,下面这种情况会让你很无语:

那我们推荐下面这种实现方案:

相比较pc web,mobile webapp的调试更复杂,而且未知的问题更多,遇到问题,我们要有耐心去跟踪定位,就像之前我们遇到iscroll性能问题、fast-click穿透的问题,都是一点一点排查处理的。

03/混合应用(Hybrid)的注意事项

现在“快速迭代,敏捷开发,低成本上线“基本上是每家公司都追求的目标,混合应用就是在这种场景下应运而生。

Hybrid App优点众多,Web前端工程师0成本介入,不依赖版本的实时更新,快速实现跨平台需求,等等。但是,我对混合的看法是,根据实际情况合理使用,因地制宜。

那么什么样的场景适合混合应用开发?

1. 快速原型,验证产品功能。我们之前开发过一个app,Android和iOS提供宿主环境,webview展现内容都是通过html5实现的,半个月就开发上线了,较之传统应用开发人员成本和时间成本都缩短很多。

2. 内容类的应用,比如csdn的app,就是采用hbuilder混合方案实现的,对性能要求没有那么高。

在考虑hybird的时候,要避免以下几个误区:

(1)为了HTML 5而Hybrid App

html5只是技术实现手段而已,要根据公司的实际业务场景,以及人员配比,综合考虑,不能因为react native比较火,就必须要在公司推行这种实现方案,我觉得为技术而技术是不可取的。

(2)忽略移动应用中的关键因素

mobile webapp本质上还是基于PC的一种开发模式,开发者使用PC浏览器模拟App中的webview进行调试。PC浏览器与手机webview的区别是巨大的,包括能支配的CPU资源,最大占有的内存,运行的网络环境,click和touch事件的区别,浏览器对CSS/JS的解析和对事件处理等等。

app工程师考虑比较多的内存的问题,这些在web开发时候是很少考虑的。另外,就是网络环境方面,虽然现在3g、4g覆盖率越来越高,但是移动终端的访问和pc还是有很大差距,wifi和蜂窝网络的切换,基站变化等诸多因素都会导致网络间歇性断开,web开发对于这种不稳定网络环境问题的处理上都有所欠缺。

(3)交互体验一致性

ios和Android的交互设计是两套规范,虽然有相似的地方,但是从操作习惯上,就已经决定了,我们想用一套交互设计,适配两个平台是很难的,包括包括视觉风格,界面切换,操作习惯等。

Hybrid App方案是一把双刃剑,一方面它平衡了Native App和Web页面的优缺点,一定程度上解决了Native App开发过程中迭代慢,版本依赖,Native开发资源不足的问题,但另一个方面过度依赖Hybrid方案会造成Web前端开发成本快速上升,甚至造成App整体体验下降,甚至造成功能缺失。

回到最开始那句话”不要为了Hybrid而Hybrid“,根据实际场景,控制好方案中native和web的边界。

04/Q&A

Q1:关于响应式开发中对于手机屏幕高度的解决有没有什么好的解决方案?

响应式开发本质上是移动设计优先的一种开发方式,我没太明白对于手机屏幕高度的解决,具体的问题是什么样的,原则上高度是不需要做处理的,除非是你对首屏有要求。关于响应式开发,可以看看我这篇文章http://www.chaichunyan.com/index.php/2016/03/03/html5-wrd/

Q2:对首屏有要求的情况, 除了判断高度还有没有其他好的解决方案?如果是flex布局可以解决这个问题吗?

问题的根本是获取首屏的高度,(1)如果你是后端渲染的话,可以获取机型和浏览器版本,拿到屏幕分辨率做适配 (2)根据屏幕宽度做适配,但是做不到完全绝对的首屏自适应,如果有更好的方案,我再跟大家分享。

Q3:hybrid开发中,h5页面太多的话,会不会影响ios发布?

之前有ios对phonegap这种跨平台的应用审核是不通过,不过现在放开这个限制了。h5页面过多,会影响应用的性能和体验,建议可以把h5打包放到ipk里边,但是要做好静态资源的版本管理。

Q4:css3 弹性布局中, 由于android碎片化严重的问题, 能不能有好的案例指导? 我们要求支持到android4以上版本。

真的要善用文档和工具, http://caniuse.com/#search=flex, 我分享时候提到的这个网站,明确说明了flex兼容性。

如果是Android4.4以上机型,基本上可以放心使用,注意的地方有两个:1. 要记得写各个浏览器的css前缀 2. flex里边可以嵌套flex.

Q5:hybird开发过程中, 原生代码登录权限问题,h5部分的页面,如何共享登录相关信息?

这要看你实现的方案,(1)嵌套静态的h5页面,那么需要native打开webview的时候,使用js briage调用页面js的方法,写入用户信息,实现登录共享 (2)如果打开的是动态渲染的页面(如php输出的页面),那么可以在请求的url中携带用户token,php通过query string判断验证,这个是native和webview数据交互的问题。

Q6:h5动画在部分安卓webview中有时候会出现卡顿,这种情况改怎么优化呢?

1. 可以做简单的测试,看看浏览器支持的情况,如果浏览器支持不够好,那么可能要做降级处理。

2. 减少动画效果,因为动画是要使用gpu渲染的,原生app能够流畅,很大程度上是直接调用硬件处理的。

优化的方案我这边基本上是降级处理,Android低版本不支持的话,就使用基本动画,比方不会使用3D翻转。因为h5毕竟受限于webview环境,像jquery 和 zepto都提供对机型和浏览器的判断。

Q7:在移动端浏览器上能支持h5离线存储的性能吗?

No problem.我们在实际项目中,优化前端性能,曾经用localstorage做静态资源的版本管理和存储。

更多技术干货关注公众号“极牛”。