html5开发app学习(6个开发app的步骤)


HTML5+app开发学习之快速入门篇

5+app开发概念理解相关

见博文:学习跨平台移动应用开发必须理解的一些概念

开发环境与支持

开发环境

HBuilderX,HBuilderX内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案,具有如下特点:

内置HTML5+ API语法提示,提高开发效率;集成真机运行环境,方便开发后即时在真机上查看运行效果;集成应用云端打包系统,不用部署xcode和Android

sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。

下载地址:

平台支持

iOS 8.0及以上

Android 4.4及以上

快速入门实战

创建HelloWorld应用

启动HBuilderX

在菜单栏中选择“文件”-> “新建”->“项目”,打开“新建项目”对话框,选择“5+ App”,在项目名称中输入“HelloWorld”,选择模板中勾选“默认模板”

新建项目

注意: 新建5+ App项目需要联网分配一个appid,在真机联调、打包发行时都需要这个ID,所以不联网将无法获取appid。

创建完成后,会在项目管理器中显示新建的“HelloWorld”项目。

项目

配置环节

在项目管理器中双击“manifest.json”文件,打开应用配置页面:

应用配置页面

对于要打包的原生应用而言,其各种配置均在此处。具体配置教程见:Manifest.json文件配置,或者点击配置页面上的“配置指南”链接。

调用HTML5+ API

在项目管理器中双击“index.html”文件,对于HTML5+应用的页面有一个很重要的“plusready”事件,此事件会在页面加载后自动触发,表示所有HTML5+ API可以使用,在此事件触发之前不能调用HTML5+ API,所以应该在此事件回调函数中调用页面初始化需要调用的HTML5+ API,而不应该在onload或DOMContentLoaded事件中调用:

  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
    <title>Hello worldtitle>  
    <script type="text/javascript">   
// 扩展API是否准备好,如果没有则监听“plusready"事件  
if(window.plus){  
    plusReady();  
}else{   
    document.addEventListener("plusready", plusReady, false);  
}  
// 扩展API准备完成后要执行的操作  
function plusReady(){  
    var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview  
    // ... code  
}  
    script>  
head>   
<body>  
  Hello World<br/>  
body>  
html>

编辑程序启动后默认显示的页面index.html,在页面中添加一个按钮,点击后将打开新页面加载“”,为了实现此功能,我们需要定义openNewWebview方法,调用5+ API中plus.webview.createWebview()方法创建窗口,调用窗口对象的show方法显示:

// 打开新Webview窗口  
function openNewWebview(){  
  var wv = plus.webview.create('http://www.dcloud.io/');  
  wv.show();  
}

完整代码截图:

完整代码

编辑完成后,保存。

真机运行

写完代码后,可以通过真机运行来查看效果,也可以通过模拟器运行来查看效果,其中真机运行有3个特点:

真实:虽然PC端HBuilderX右侧的内置浏览器也可以看大致的页面,但真实的布局效果以及手机上的特殊能力调用,还是必须在真机测试。边改边看:在HBuilderX更改页面并保存后,可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。检查错误和log:手机运行HTML等文件时如果发生错误以及打印的console.log,都可以在真机运行时从手机端反馈回到HBuilderX的控制台,在控制台直接查看。

注意:只有移动App项目(uni-app、Wap2App、5+ App)才可以真机联调。

启动真机运行

将iOS或Android设备连接到电脑,这时HBuilderX会自动检测连接到电脑上的设备,通过菜单栏中的“运行” -> “运行到手机或模拟器”,选择要运行的设备启动真机运行:

真机运行

也可通过工具栏启动:

启动

启动真机运行后,在底部控制台显示以下信息:

控制台信息

启动后如果弹出提示框,请选择“确定”,显示以下页面:

最终页面显示效果

点击“打开新页面”按钮,加载显示“”网页:

网页信息

在Android设备会自动安装真机运行基座HBuilder APP,并启动运行,iOS设备需要开发者手动点击手机桌面的HBuilder App图标。

软件图标

如果真机失败,注意看控制台的提示,或点HBuilder菜单-运行里的故障排查指南。

注意:真机联调App时,提供的是一个测试环境,打包html5开发app学习,调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后,上述4个设置才能更改。

运行后,HBuilder中修改页面代码,保存后会自动同步到手机中,如果手机当前展示着被修改的页面,则会刷新页面。尝试在js中在plusready之后编写console.log,或者改写错误的js,可以直接在HBuilder的控制台看到结果。如果真机运行遇到各种故障,点击运行菜单里的真机运行常见故障指南进行排查。

启动模拟器运行

启动模拟器运行,显示如下:

模拟器运行界面

点击打开新页面,进入网页:

模拟进入网页界面

可以看到模拟器运行调试不是很兼容,需要配置更多的内容让最终的模拟运行达到真机的效果,但是真机运行调试就比较方便有效。

debug调试

除了真机运行,还可以利用chrome和safari的开发者控制台来调试5+App。可以使用真机插上数据线,也可以使用Android或iOS的官方模拟器。所有Api包括plus的各种api,甚至包括plus.ios和plus.android的原生对象,都可以调试。

html5开发app教程_html5 app 开发教程_html5开发app学习

在HBuilder的菜单运行里选择打开Webview调试模式,如果手机连接正常,5+App启动,在ide上可看到可调试的页面,点击调试后,打开控制台,和普通的浏览器调试是一样的。

调试界面

发行打包

完成应用页面的编辑后,需要正式打包为原生的apk或ipa安装包。首先明确一下,有人说HTML5做的应用无法通过苹果Appstore审核,这是错误的说法。苹果只是拒绝开发者把web站点直接打包上Appstore,不优化任何体验,它认为这是给Appstore制造垃圾应用,如果是原生体验的App,虽然使用HTML5技术,苹果也不会拒绝上架。

HBuilderX提供的打包有云打包和本地打包两种。HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。

对于不熟悉原生开发的前端工程师,云打包大幅降低了他们的使用门槛。对于没有mac电脑的开发者,他们也可以通过云打包直接打出iOS的ipa包。

无论云打包还是本地打包,在HBuilderX的菜单“发行”菜单中有链接。

本地打包还可参考原生开发者支持网站的App离线打包页面,下面仅对云打包进行说明。

通过菜单栏中的“发行”->“原生App-云打包”,打开“App云端打包”对话框提交。

注意:只有App项目才可以打包

iOS平台打包

对于iOS平台,可以选择越狱包或证书包(Appstore专用或企业证书),前者只能安装在已越狱的设备上,后者则可通过iDP证书打包提交到Appstore发布、或通过iEP证书打包在企业内部发布。

越狱包

云端打包

Bundle ID(AppID):iOS应用标识,推荐使用反向域名风格的字符串,如“com.domainname.appname”。

IDP/IEP证书包

IDP证书包

Bundle ID(AppID):iOS应用标识,推荐使用反向域名风格的字符串,如“com.domainname.appname”,必须与profile文件绑定的App ID匹配。

证书profile文件:iOS Provisioning Profile文件(.mobileprovision),必须与苹果App ID和私钥证书区配。

证书私钥密码:导入私钥证书的密码。

私钥证书:iOS Certificates文件(.p12)。

私钥证书及profile文件生成请参考

Android平台打包

对于Android平台,可以选择使用DCloud生成的公用证书或自己生成的证书,两者不影响安装包的发布,唯一的差别就是证书中开发者和企业信息不同。

应用在开发测试阶段可以使用公共测试证书打包体验,发布时请使用自有证书打包,更多信息参考Android平台云端打包证书使用说明

使用自有证书

以自有证书打包为例,使用公共测试证书时不用配置证书相关信息,其它配置一致:

使用自有证书打包

Android包名:Android应用包名,使用反向域名风格的字符串,如“com.domainname.appname”。

证书别名:生成证书时使用-alias参数设置的证书别名;

私钥密码:生成证书时使用的keystore密码;

证书文件:生成证书时使用-keystore参数设置的证书保存路径;

查看打包状态

通过菜单栏中的“发行”->“原生App-查看打包状态”,可在控制台查看当前打包状态:

打包状态

如果打包成功,则会在控制台显示下载地址,可点击链接下载安装包。遇到打包失败,常见原因是:

如果使用自用证书,很可能是证书配置错误。如果使用DCloud证书仍然出错,很可能是图片错误。所有图片格式必须是标准png,且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败!其他错误请参考: 云打包常见错误排查指南

UI框架

HBuilder并不限制UI框架,开发者使用任何UI框架均可以。市面上移动前端框架也不少:

是一套基于 Framework7 开发的UI库。

MUI 最接近原生APP体验的高性能前端框架

weUI 微信原生框架

Vue官网合作UI,有赞团队开发

Frozen UI 由腾讯团队开发,适用于使用手Q规范设计的Web页面

Mand Mobile是面向金融场景设计的移动端组件库

Muse UI 是一套 Material Design 风格开源组件库,旨在快速搭建页面。

滴滴开源的UI框架

一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

vux vux 基于WeUI和Vue(2.x)开发的移动端UI组件库

Mint UI 由饿了么前端团队推出的 ,是一个基于 Vue.js 的移动端组件库。

其中DCloud开发的mui框架,它的性能更高,样式也更接近原生App,并且mui调用了HTML5+扩展能力,可以实现更好的体验。推荐开发移动App的开发者使用mui框架html5开发app学习,详情请参考文档中心mui章节。不过mui只封装了部分HTML5Plus Apihtml5开发app学习(
平台支持iOS8.0及以上Android4.4及快速入门实战创建HelloWorld应用启动
),学会mui框架不代表可以不学习HTML5Plus规范。mui只是很有限的通过封装简化了常见开发过程。

开发资源

API手册:HTML5+规范

HelloH5+示例应用,应用中包括几乎所有plus API的示例:

获取Hello H5+的源代码,在HBuilder中新建移动App,选Hello H5+,可以查看所有plus api的调用样例代码。

新建H5+项目

项目结构


免费领取: 只要加微信,回复“入门视频”,即刻获取 全网最系统,最容易入门的的Web前端入门全套视频,C语言入门全套入门视频,大数据全套入门视频,PhP全套入门视频,Pathon全套入门视频,Java全套入门视频!!!微信号:18370228235 ,立即领取!
版权申明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站不拥有所有权,不承担相关法律责任。如发现有侵权/违规的内容, 联系QQ892482387,本站将立刻清除。

分享到