使用Hbuilder开发混合App
App开发
APP开发
浏览：696 次
App是指在iOS和Android（主要是这两个平台）上运行的App。目前，App开发主要采取以下形式：
1.本机应用：本机应用。也就是说，使用App平台的开发语言开发的App，如Android系统的Java和iOS系统的object-c。
2.混合App：混合App开发，即使用原生和HTML5+JS相互调用，将HTML5页面放入原生容器，并通过JS API调用系统原生函数的开发模式。这种模式可以实现一次编写、多端运行的跨平台开发，大大降低了app的开发成本。
3.WebApp：它不是严格意义上的App。它完全使用HTML5+JS开发，并基于HTML5 API。
现在有许多混合App开发框架，使具备HTML5+JS知识的前端工程师能够通过简单的学习编写App。
本节主要介绍Hbuilder X的5+App框架。该框架是中国制造的。虽然有很多槽点，但对国内开发者来说还是很友好的。有相应的论坛和完全注释的演示。
App开发具有以下优势：
1.您可以随意使用系统的API来实现个性化需求，如推送、后台驻留服务等。
2.在不从网络加载所有资源的情况下提供更好的体验。您可以调用其他App为自己的服务提供更好的支持，如地图和支付。
3.避免被阻止连接到其他平台。
那么我们从哪里开始呢？
一个想做好工作的工人必须首先磨砺工具。首先，熟悉我们需要使用的工具。
5+App介绍：
Hbuilder：支持多种语言的IDE编辑器。它也是5+App开发中的一个主要工具。使用Hbuilder，您可以运行、调试和打包真实的机器。
5+APP api文档：
我们可以使用js调用HTML文件中的5+API接口来调用本地功能，例如播放音乐和振动。
论坛：
首先搜索问题
接下来，熟悉基本思想：
所谓的5+App就是将HTML页面放置在本地，而不必每次加载，从而提高体验。每个HTML页面都使用Web视图单独加载。（Webview可以理解为浏览器中的一个选项卡。在浏览器中，HTML5在同一个选项卡中运行。例如，如果您返回，上一页将被重新加载，从而造成卡顿延迟的感觉。如果每个页面单独出来，感觉会不同，并且会很流畅，不会重新加载。）
使用Hbuilder创建新项目并选择5+App
图像.png
然后将HTML文件放在项目文件夹中，您将开始5+App之旅。
要做的两件事：
1.所有位置href和跳转更改为加号。网络视图。打开（url）。通过这种方式，您可以使用webview打开页面并避免回装。
2.在需要刷新的地方添加下拉刷新控件。
有关其他优化，请参见以下内容：
常见问题：
这是我在学习5+App开发时遇到的问题。我相信新手也会遇到这种情况。我会把答案贴在这里供你参考。
1.5+个App可以进入应用商店吗？
专业测试可以。有关详细信息，请参阅Apple Audit Guide。如果被拒绝，苹果将指出违反了哪项规则，并给出建议。
2.使用官方的本地选项卡模板，在iOS上单击选项卡，什么都没有发生？
我搜索过这个问题，但没有答案。最后，他们自己解决了这个问题。对于官方模板，绘制选项卡的代码是用manifest.json编写的。无法在iOS中获取此本机控件导致的问题。解决方案是直接在index.html中绘制选项卡。
var nview=实用程序。drawNative（“塔巴尔”{
“底部”：“0px”，
“左”：“0”，
“高度”：“60px”，
“宽度”：“100%”，
“backgroundColor”：“#fff”
}, [{
“tag”：“font”，
“id”：“indexIcon”，
“text”：“\ue61f”，
“位置”：{
“顶部”：“10px”，
“左”：“0”，
“宽度”：“25%”，
“高度”：“24px”
},
“文本样式”：{
“fontSrc”：“_www/fonts/ic_tabbar.ttf”，
“align”：“center”，
“大小”：“24px”
}
},
{
“标签”：“字体”，
“id”：“indexText”，
“文本”：“主页”，
“位置”：{
“顶部”：“30px”，
“左”：“0”，
“宽度”：“25%”，
“高度”：“24px”
},
“文本样式”：{
“对齐”：“中心”，
“大小”：“10px”
}
},
{
“tag”：“font”，
“id”：“newsIcon”，
“text”：“\ue63b”，
“位置”：{
“顶部”：“10px”，
“左”：“25%”，
“宽度”：“25%”，
“高度”：“24px”
},
“文本样式”：{
“fontSrc”：“_www/fonts/ic_tabbar.ttf”，
“对齐”：“中心”，
“大小”：“24px”
}
},
{
“tag”：“font”，
“id”：“newsText”，
“文本”：“近”，
“位置”：{
“顶部”：“30px”，
“左”
