常用的几种APP开发模式
Hybrid App
Hybrid App按网页语言与程序语言的混合，通常分为三种类型：多View混合型，单View混合型，Web主体型。
-
多View混合型
即Native View和Web View独立展示，交替出现。2012年常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候，将WebView当成一个独立的View（Activity）运行起来，在WebView内完成相关的展示操作。这种移动应用主体通常是Native App，Web技术只是起到补充作用。开发难度和Native App基本相当。
-
单View混合型
即在同一个View内，同时包括Native View和Web View。互相之间是覆盖（层叠）的关系。这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。如百度搜索为代表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。
-
Web主体型
即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。国外的appMobi、PhoneGap和国内的WeX5、AppCan和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发。appMobi和PhoneGap除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid。AppCan除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题，接近Native App的体验。而WeX5则在揉合PhoneGap和Bootstrap等主流技术的基础上，对性能进一步做了深度优化，不但完全具备Native App对本地资源的调用能力，性能体验也不输原生；WeX5所开发出来的app具备完全的跨端运行能力，可以无需任何修改直接运行在各种前端环境上。
国内主流Hybrid app工具平台
Hbuilder H5+
HBuilder入门-设计理念及常用功能：这是官方给的关于hbuilder的过人之处。嗯，看下来好像就是个普通的开发工具。
能力 - HTML5plus Runtime
HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。
后来出现了react native方案，但他们自带的js api也一样少，扩展api也需要原生开发。
其实不管cordova还是react native，都是作为原生应用的一个sdk出现的。
另外react native虽然性能好于cordova，但react native抛弃了HTML5，这不是我们想要的，我们想改进HTML5而不是抛弃HTML5。
5+ Runtime分3个层次解决了HTML5与原生的能力差距。
常用的API – HTML5plus
包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，封装成跨平台的HTML5plus规范，并将规范公开于www.HTML5plus.org，不做厂商私有API。HTML5中国产业联盟目前已经成为工信部的下属单位，而HTML5Plus规范也已经成为行标，并进行了国标立项。
其他原生API – Native.js
原生API在iOS和Android上各自有40多万，有些API并不常用，而且不具有跨平台特性，比如ios的game center api。太多的API封装到HTML5plus里，会过多增加runtime的体积，但若有需求要使用这些api又很麻烦。
我们有一项突破性的技术来解决上述烦恼—Native.js，一种把40w原生API映射为JS API的技术。
如果说node.js把js的战火烧到了服务器端，那么Native.js把js战火烧到了原生应用战场。
我们可以使用js直接调原生API，语法是js语法，API命名是原生命名。
比如
var obj = plus.android.import( "android.os.Bundle" );
然后obj.xxx，这个xxx属性就完全是原生对象的属性命名。
对于JSer，他一下就有40w API可以用，瞬间感觉无所不能:)
Native.js的教程详见：http://ask.dcloud.net.cn/article/88
更多原生SDK引入 – 5+ Runtime SDK
假使有一些原生的三方SDK想引入到5+ Runtime，比如身份证扫描SDK，我们提供了5+ SDK方案，把5+ runtime作为一个SDK放入到其他原生App中，用5+ SDK替代webview，和原生层交互通信。（这块类似cordova的设计）
- iOS SDK开发教程详见：http://ask.dcloud.net.cn/article/67
- Android SDK开发教程详见：http://ask.dcloud.net.cn/article/66
5+ Runtime是运行于手机的强化web引擎，在运行和打包时自动挂载。通过HTML5plus规范、Native.js技术以及原生SDK，这3种机制使得5+ Runtime拥有完全不输于原生App的能力
Hbuilder、H5+的使用
hbuider提供的demo目录
也可以选择右边的创建Web项目或者移动APP
[图片上传失败...(image-1ea6d1-1560863135814)]
可以将web项目转为移动APP，所以就有了Hbuilder+vue这种想法。
[图片上传失败...(image-4de8bd-1560863135814)]
使用H5+获取当前webview的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Hello world</title>
<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>
</body>
</html>
获取摄像机
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Camera Example</title>
<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener( "plusready", onPlusReady, false );
var r = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
// 获取设备默认的摄像头对象
var cmr = plus.camera.getCamera();
// ......
}
</script>
</head>
<body>
</body>
</html>
更多的H5+API详情可查看->http://www.html5plus.org/doc/zh_cn/camera.html#
更多的hbuilder使用可以查看->5+ App开发入门指南
Hbuilder+Webpack+Vue
创建web项目
- webpack+vue-cli+axios+vux+vuex
- 这是我创建的项目github地址:https://github.com/gdpu-wxq/vueclidemo
- 可以下载我的Demo,先将依赖引进npm install (先确保环境ok),然后 npm run dev (跑浏览器)
- 然后打开hbuilder,将我们的web项目导入到hbuilder,(打开hbuilder->文件->导入->常规->现有的文件夹作为新项目。找到web项目build完的dist目录。给项目命名完，右键项目，将web项目转为移动APP项目，会出现一个manifest.json文件。)
- 可以用真机或者虚拟机跑APP了。
注意
- 怎么在Windows下使用iPhone调试？
- 1.首先电脑要装一个iTunes
- 2.确保手机已经连上了
- 3.在hbuilder的工具->插件安装->ios连接插件（有时下载不了，需要翻墙）
- 4.运行->真机运行->选择自己的手机可以跑起来了。
- 详情可以查看文章---真机运行、手机运行、真机联调常见问题
打包
-
在线打包
发行->云打包-打原生安装包，接下来就看自己有没有证书了，如果有证书就使用自己的证书打包，没有的话就选择使用dcloud公用证书或者iOS的越狱包。但是要注意的是ios选择越狱包的话，发布只能在APP-Store发布。如果是使用自己的证书，就可以在选择发布平台发布。我选择的是蒲公英。
-
离线打包
APP demo的下载
由于之前公司的项目只能跑内网，然后为了更好的体验Hbuilder+vue的功能，所以自己花了点时间写了个demo.
APP下载（使用浏览器下载）
-
iOS版本
[图片上传失败...(image-adaad6-1560863135814)]
-
android版本
image- iOS下载二维码GitHub: https://github.com/gdpu-wxq/pictures/blob/master/hbuilder%2Bvue/ios.png
- android下载二维码GitHub: https://github.com/gdpu-wxq/pictures/blob/master/hbuilder%2Bvue/android.png
APP说明
-
热更新
进入app之后，会有一个更新提示的弹窗弹出，目前APP的ios版本是可以进行热更新的，但是时间会久一点。Android版本会有一些报错，后续会看看什么问题。所以大家可以选择取消更新。
-
热更新机制
简单的热更新流程：
- hbuilder制作移动APP资源升级包
- 将制作完升级包放到可以下载的服务器（由于自己的服务器有点问题，所以为了方便，我把资源包上传到github：https://github.com/gdpu-wxq/Tools/blob/master/H56DE0ED8.wgt）
- 本地检测版本号，是否有最新版本。如果有那么就下载升级包，然后替换本地的资源包
这里有官方的关于热更新的文章，教你怎么导出热更新包，以及怎么在本地进行更新的详细代码。http://ask.dcloud.net.cn/article/182
-
APP的主要功能
- 照相
- 通讯
- 热更新
