5+app开发概念理解，快速入门实战创建应用启动
发表时间：2023-09-06 18:01:04
文章来源：炫佑科技
浏览次数：253
菏泽炫佑科技
5+app开发概念理解，快速入门实战创建应用启动
HTML5+应用开发和学习快速入门
5+ 与理解相关的应用程序开发概念
请参阅博客文章：学习跨平台移动应用程序开发必须了解的一些概念
开发环境及支持
开发环境
，内置HTML5+APP开发环境，提供整套移动应用开发解决方案，具有以下特点：
内置HTML5+ API语法提示，提高开发效率； 集成真机运行环境，方便开发后立即查看真机上的运行效果； 集成应用云打包系统，无需部署xcode
sdk可以打包应用程序。 开发者只需利用HTML5、CSS等技术即可快速开发出跨平台的移动应用。
下载链接：
平台支持
iOS 8.0及以上版本
4.4及以上
快速入门练习
创建应用程序
启动
选择菜单栏中的“文件”->“新建”->“项目”，打开“新建项目”对话框，选择“5+ App”，项目名称中输入“”，勾选“默认模板”模板选择“
注意：新建5+ App项目需要连接互联网才能分配appid。 真机联调和打包分发时都需要这个ID，所以如果没有联网的话，将无法获取appid。
创建完成后，新创建的“”项目将显示在项目管理器中。
配置链接
双击项目管理器中的“.json”文件，打开应用程序配置页面：
对于要打包的原生应用，各种配置都在这里。 具体配置教程请参见：.json文件配置，或者点击配置页面的“配置指南”链接。
调用HTML5+ API
双击项目管理器中的“index.html”文件。 对于HTML5+应用页面来说，有一个非常重要的“”事件。 该事件会在页面加载后自动触发，表示所有HTML5+ API都可以使用。 在该事件触发之前，无法使用。 调用HTML5+ API，因此页面初始化需要调用的HTML5+ API应该在这个事件回调函数中调用，而不应该在or事件中调用：
<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。 向页面添加一个按钮。 点击后会打开一个新页面加载“”。 为了实现这个功能，我们需要定义一个方法，调用5+ API中的plus..()方法创建一个窗口，并调用该窗口对象的show方法进行显示：
// 打开新Webview窗口
function openNewWebview(){
var wv = plus.webview.create('http://www.dcloud.io/');
wv.show();
}
完整代码截图：
编辑完成后，保存。
真机操作
代码写好后，可以在真机上运行看看效果，也可以在模拟器上运行一下。 在真机上运行有以下三个特点：
现实：虽然PC右侧的内置浏览器也可以查看大概的页面，但手机上的真实布局效果和特殊能力调用还是必须在真机上进行测试。 边修改边查看：更改页面并保存后，您可以立即在真实设备上看到保存的显示效果。 比开发原生应用更方便。 检查错误和日志：如果手机运行HTML等文件出现错误和打印.log，真机运行时可以从手机反馈到控制台，可以直接在控制台查看。
注意：只有移动App项目（uni-app、5+App）才可以进行真机联调。
启动真机
将iOS或设备连接到电脑，然后会自动检测连接到电脑的设备，通过菜单栏的“运行”->“运行到手机或模拟器”，选择要运行的设备即可启动真机运行：
也可以通过工具栏启动：
启动真机运行后，底部控制台显示如下信息：
如果启动后弹出提示框，请选择“确定”，显示如下页面：
单击“打开新页面”按钮加载并显示“”页面：
真机运行底座APP会自动安装到设备上并开始运行。 对于iOS设备，开发者需要手动点击手机桌面上的App图标。
如果真机出现故障，请注意控制台的提示，或者点击菜单-运行故障排除指南。
注：真机调试App时，提供测试环境、名称、图标、启动封面图、是否可以旋转。 这些只能通过打包才能改变的属性不会因为开发者修改文件而改变。 。 以上四项设置需要修改并点击菜单-后才能更改。
运行后修改页面代码，保存后会自动同步到手机。 如果手机当前正在显示修改后的页面，则会刷新页面。 之后尝试在js中写.log，或者重写错误的js，直接在控制台就可以看到结果。 如果您在真机运行时遇到各种故障，可以点击运行菜单中的真机操作常见故障处理指南进行故障排除。
启动模拟器并运行
启动模拟器并运行，如下图：
点击打开新页面，进入网页：
可以看到，模拟器的运行和调试兼容性不是很好，需要配置更多的内容才能使*终的模拟运行达到真机的效果，但真机的运行和调试更方便并且有效。
调试调试
除了在真机上运行外，您还可以使用 和 开发者控制台来调试 5+ 个应用程序。 您可以使用真实设备插入数据线app开发，也可以使用iOS官方模拟器。 所有的API，包括plus的各种API，甚至plus.ios和plus.的原生对象，都可以调试。
在菜单运行中选择打开调试模式，如果手机正常连接，5+App启动，IDE上可以看到可调试的页面。 点击debug后，打开控制台，和普通浏览器调试一样。
配送包装
完成应用页面的编辑后，需要正式打包成原生apk或ipa安装包。 首先，我们要明确一点。 有人说用HTML5制作的应用程序无法通过苹果的审核。 这是一个错误的说法。 苹果只是拒绝开发者直接打包网站而不优化任何体验。 它认为这是一个制造垃圾的应用程序。 如果是一款原生体验的App，即使使用了HTML5技术，苹果也不会拒绝上架。
提供两种打包方式：云打包和本地打包。 提供的云打包对普通开发者是免费的。 但过度浪费服务器资源会产生额外费用。 使用本地包装没有任何限制。 云打包的特点是原生打包环境已经正式配置好，可以将HTML等文件编译成原生安装包。
对于不熟悉原生开发的前端工程师来说，云打包大大降低了他们的使用门槛。 对于没有Mac电脑的开发者来说，也可以通过云打包直接创建iOS ipa包。
无论云打包还是本地打包，“发布”菜单中都有一个链接。
对于本地打包，还可以参考原生开发者支持网站的App离线打包页面。 下面仅说明云打包。
通过菜单栏“发布”->“原生App-云打包”，打开“App云打包”对话框提交。
注意：只能打包App项目
iOS平台封装
对于iOS平台，您可以选择越狱包或证书包（私有或企业证书）。 前者只能安装在越狱设备上，后者可以通过iDP证书打包提交发布，或者通过iEP证书打包在企业内部发布。
越狱包
ID（AppID）：iOS应用程序标识。 建议使用反向域名样式字符串，例如“com..”。
IDP/IEP 证书包
ID（AppID）：iOS应用程序标识。 建议使用反向域名样式字符串，例如“com..”，该字符串必须与文件绑定的App ID匹配。
证书文件：iOS文件（.），必须与Apple App ID和私钥证书匹配。
证书私钥密码：导入私钥证书的密码。
私钥证书：iOS 文件 (.p12)。
请参考私钥证书和文件生成
平台包装
对于平台，您可以选择使用生成的公共证书或自行生成的证书。 两者不会影响安装包的发布。 唯一的区别是证书中的开发商和企业信息不同。
应用程序可以在开发和测试阶段与公共测试证书一起打包。 发布时请使用自己的证书进行打包。 更多信息请参考平台云打包证书使用说明。
使用您自己的证书
以自有证书打包为例，使用公共测试证书时无需配置证书相关信息。 其他配置相同：
包名：应用程序包名，使用反向域名样式字符串5+app开发概念理解，快速入门实战创建应用启动，如“com..”。
证书别名：生成证书时使用-alias参数设置的证书别名；
私钥密码：生成证书时使用的密码；
证书文件：使用生成证书时--参数设置的证书保存路径；
检查包装状态
通过菜单栏的“发布”->“原生App-查看打包状态”，可以在控制台查看当前打包状态：
如果打包成功，控制台会显示下载地址，您可以点击链接下载安装包。 包装失败时，常见原因有：
如果您使用自己的证书，很可能是证书配置不正确。 如果使用证书时仍然出现错误，则图像可能有误。 所有图片格式必须为标准png并严格满足分辨率要求。 使用其他图片格式并重命名为png会导致打包失败！其他错误请参考：云打包常见错误排查指南
用户界面框架
UI框架没有限制，开发者可以使用任何UI框架。 市场上有很多移动前端框架：
它是一套基于开发的UI库。
MUI是*接近原生APP体验的高性能前端框架
weUI 微信原生框架
Vue官网合作UI，有赞团队开发
UI由腾讯团队开发，适用于采用手Q规范设计的网页。
Mand是一个专为金融场景设计的移动组件库。
Muse UI 是一个风格化的开源组件库，旨在快速构建页面。
滴滴开源UI框架
一个基于 vue.js 和 ionic 风格的 UI 框架，用于快速构建移动单页应用程序。
vux vux 基于WeUI和Vue(2.x)开发的移动UI组件库
Mint UI由饿了么前端团队推出，是一个基于Vue.js的移动组件库。
其中，开发的mui框架性能更高，风格更接近原生app，并且mui调用HTML5+扩展能力实现更好的体验。 建议开发移动应用的开发者使用mui框架。 详细内容请参考文档中心的mui章节。 然而，mui只封装了部分API。 学习mui框架并不意味着不需要学习规范。 Mui只是通过封装在非常有限的程度上简化了通用的开发流程。
开发资源
API手册：HTML5+规范
+ 示例应用程序，该应用程序包含几乎所有 plus API 的示例：
获取Hello H5+源码，新建一个移动应用，选择Hello H5+即可查看所有plus api调用示例代码。
