Hbuilder和Vue入门

常用的几种APP开发模式

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工具平台

phonegap(cordova)
wex5
apicloud
appcan
dcloud(hbuilder)
...

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的信息




    
    
    Hello world

获取摄像机




    
    
    Camera Example

更多的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发布。如果是使用自己的证书，就可以在选择发布平台发布。我选择的是蒲公英。
离线打包
- Android离线打包->教程
- ios离线打包->教程

APP demo的下载

APP的下载使用以及说明

由于之前公司的项目只能跑内网，然后为了更好的体验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的主要功能
- 照相
- 通讯
- 热更新