借助HBuilder快速开发APP入门

最新推荐文章于 2024-06-14 10:01:58 发布

皮禾火

最新推荐文章于 2024-06-14 10:01:58 发布

阅读量1.1w

点赞数 2

分类专栏： hbuilder 文章标签： hbuilder

本文链接：https://blog.csdn.net/StevenTQP/article/details/51582154

版权

本文介绍如何使用HBuilder进行APP开发，强调其高效编码、实时预览等功能。通过HTML5plus、Native.js和MUI框架，实现接近原生应用的体验。提供多个学习资源，包括秘密聊天室的开发过程，演示了结合Wilddog云服务实现在线多人聊天。

摘要由CSDN通过智能技术生成

首先这次博客是真正的入门

大部分都主要是概念讲解，后面可能会有一些自己的代码练习。

然而为什么要用HBuilder来开发呢，这是首先要说明下的。

编码比其他工具快5倍够不够？对极客而言，追求快，没有止境！
代码输入法：按下数字快速选择候选项
可编程代码块：一个代码块，少敲50个按键
内置emmet：tab一下生成一串代码
无死角提示：除了语法，还能提示ID、Class、图片、链接、字体…
跳转助手、选择助手，不用鼠标，手不离键盘
多种语言支持：php、jsp、ruby、python、nodejs等web语言，less、coffee等编译型语言均支持
边改边看：一边写代码，一边看效果
强悍的转到定义和一键搜索
这里还有最全的语法库、最全的语法浏览器兼容库

同类的还有WebX5，但是这一款相对而言更易于开发，因为大部分都是拖拉式界面，用起来感觉就像是Dreamweaver，而且用来更爽，但是对于初学者不建议用，一开始学还是多写代码比较好的。

对于HBuilder
http://www.dcloud.io/这个网站中包含了大部分的文档，学习这个的时候最烦恼的可能就是可以寻求帮助的地方不多，所以要多看看官方的文档。同时有兴趣的可以去看看这个网站
http://edu.yuantuan.com/classroom/5/courses他的视频资源，每一个都不长，但是拿来建立最初的概念还是没问题的。

这里推荐几篇比较好的论坛文章：

HBuilder入门-设计理念及常用功能：http://ask.dcloud.net.cn/article/95

5+ App开发入门指南：http://ask.dcloud.net.cn/article/89

5+ App开发Native.js入门指南：http://ask.dcloud.net.cn/article/88

Native.js示例汇总：http://ask.dcloud.net.cn/article/114

未完待续。

承接上文

讲了这么多，那么网页到底能不能拿来做APP呢？
可以的，但是在以前，网页做得APP有严重的网页风格，同时在低端Android手机上，过去的HTML5无法商用，切页白屏、转场卡顿、下拉刷新不流畅、侧滑菜单不流畅。。。众多问题，导致HTML5制作APP非常不被看好，但是近几年，出了个HTML5plus Runtime，其中HTML5plus和Native.js都很强大，Dcloud又出了个MUI框架。他们彻底把火烧到了APP端。

常用的API – HTML5plus

封装成跨平台的HTML5plus规范，并将规范公开于www.HTML5plus.org，不做厂商私有API。
包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。

其他原生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想引入到5+ Runtime，比如身份证扫描SDK，可以通过5+ Runtime的插件机制进行扩展。或者5+ Runtime预置的地图是百度地图，开发者想换成高德地图，也是类似的做法。
以及我们也支持5+ SDK，把5+ runtime作为一个SDK放入到其他原生App中，用5+ SDK替代webview可以得到更强大的功能和性能。
iOS插件开发教程详见：http://ask.dcloud.net.cn/article/67
Android插件开发教程详见：http://ask.dcloud.net.cn/article/66
通过HTML5plus规范、Native.js技术以及原生插件，这3种机制使得5+ Runtime拥有完全不输于原生App的能力。

MUI：最接近原生体验的移动App的UI框架

由于HTML5的默认控件无法直视，我们只能用css把按钮、输入框修饰成原生样式，以及HTML5的控件比原生控件少很多，比如list、tab、menu、waiting等常见控件，以往都要写很多div和css拼装。这引发了一个前端框架存在的市场。但目前的前端框架性能都非常低，在低端手机上很难达到商用要求，更不用提pk原生效果。
Jquery mobile比较知名，但有3个硬伤：1. 体积高达500k；2. data-的写法虽然写起来简单，但在运行时需要js去解析HTML5标签并替换为新的dom结构，这是非常消耗手机资源和影响加载速度的；3. 样式风格自成一派，不是用户所熟悉的原生样式。
基于这种情况，DCloud推出了开源的mui框架（http://dcloudio.github.io/mui/），它是目前最高性能和最接近原生体验的手机端框架。它的3个特点与Jquery mobile正好对应：
1. 体积小，不到100k；
2. 直接使用class编写，性能远高于data-方式，又通过代码块的编写方式降低了开发者编码的复杂度，在HBuilder里敲m，会拉出一排控件mList、mButton等，选一个回车，就会自动产生div和class；
3. mui的风格样式是最接近原生样式的

大家也发现这里几乎没有图片，我一开始就说了这是一篇很入门的介绍，几乎都是概念介绍，如果要说HBuilder的安装与使用。。。。这应该是没必要的，毕竟也是很容易上手的东西。不过HBuilder真的是一个用起来非常爽的编辑器，大家可以多用用。

既然如此，那就发一个简单的多人聊天的软件的编写过程吧，我也是看视频做的，想看原版的可以去这里http://edu.yuantuan.com/classroom/5/courses

秘密聊天室（只实现了功能）

这是一个结合Wilddog和HTML5的小APP，结合wilddog的Bass云服务实现可以在线多人聊天。

首先搭建出一个进入界面和聊天窗口界面。
先创建出一个APP项目：
这里写图片描述

这里写图片描述
为了可以实时看到效果，所以调成边改边看模式

之后搭建好一个进入房间的首页，这其中用了挺多mui的样式，所以希望大家可以去多看看。
这里写图片描述

代码就是这样的写的。

<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">秘密聊天室</h1>
</header>
    <div class="mui-content">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>昵称</label>
                <input type="text" class="mui-input-clear" placeholder="请输入昵称" id="nickname">
            </div>
            <div class="mui-input-row">
                <label>房间号</label>
                <input type="text" class="mui-input-clear" placeholder="请输入房间号" id="roomid">
            </div>
        </form>
        <div class="mui-content-padded" align="right">
            <button type="button" class="mui-btn mui-btn-blue" id="enter">进入房间</button>
        </div>

    </div>

在之后对这些操作用js来控制：

        mui.plusReady(function(){
            var nickname = document.getElementById("nickname");
            var roomid = document.getElementById("roomid");
            var enter = document.getElementById("enter");
            if(nickname.value.length==0){
                puls.nativeUI.toast("您的昵称不能为空");
                return;
            }
            if

最低0.47元/天解锁文章

皮禾火

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
借助HBuilder快速开发APP入门

首先这次博客是真正的入门大部分都主要是概念讲解，后面可能会有一些自己的代码练习。然而为什么要用HBuilder来开发呢，这是首先要说明下的。编码比其他工具快5倍够不够？对极客而言，追求快，没有止境！代码输入法：按下数字快速选择候选项可编程代码块：一个代码块，少敲50个按键内置emmet：tab一下生成一串代码无死角提示：除了语法，还能提示ID、Class、图片、链接、字体…跳转助手、选择
复制链接

扫一扫

专栏目录