Hbuilder和Vue入门

2019-06-18  本文已影响0人  D_I_

常用的几种APP开发模式

APP开发模式

Hybrid App

Hybrid App按网页语言与程序语言的混合，通常分为三种类型：多View混合型，单View混合型，Web主体型。

国内主流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的设计）

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项目

注意

打包

APP demo的下载

APP的下载使用以及说明

由于之前公司的项目只能跑内网，然后为了更好的体验Hbuilder+vue的功能，所以自己花了点时间写了个demo.

APP下载（使用浏览器下载）

APP说明

上一篇 下一篇

猜你喜欢

热点阅读