HBuilder开发App教程01-推开前端开发App的大门

最新推荐文章于 2024-06-25 17:05:07 发布

uikoo9

最新推荐文章于 2024-06-25 17:05:07 发布

阅读量1.1w

点赞数 6

文章标签： HBuilder mui nativejs 开发app

本文链接：https://blog.csdn.net/uikoo9/article/details/46715569

版权

HBuilder开发APP教程专栏收录该内容

26 篇文章 15 订阅

订阅专栏

奇妙的前端，奇妙的js

众所周知，自从js有nodejs后，前端人员可以华丽的转身，去开发高并发非阻塞的服务端程序，

随着html5的出现，伴随一些amazing的特性，h5开发app的技术越发的成熟，

自从2008年国外推出phonegap后，前端人员又踏上开发app的路程，

今年来国内也对应推出了一些可以让前端人员开发app的ide，

不过大部分是收费的，强定制的，这里就不一一列举了。

这里推荐DCloud推出的HBuilder，一句话谁用谁知道。

一次开发两种app

通过HBuilder的云端打包技术（也可以放到本地），

你只需要写html+js+css即可开发出app，

并且是一次开发，即可生成android和ios两种对应app。

原理介绍-ui层

app中的ui对应html中的ui，你可以自行选择ui框架，

无论是bootstrap还是amazeui，还是jquery mobi（phonegap推荐ui），

还是HBuilder推荐的mui都可以，

这里建议使用HBuilder推荐的mui，

因为封装了一部分nativejs的东西，

而且HBuilder也封装了mui的快捷键，使用起来很方便。

总结一下，就是用html层次的ui框架来实现（模拟）app中的ui。

点这里下载官方mui-app：Hello MUI

原理介绍-nativejs

HBuilder开发app，不可避免的是调用android和ios中的原生方法，

大概原理如下：

qiao.ng.toast = function(msg){
    // for ios
    if(window.WebViewJavascriptBridge){
        WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);
    }else{
        document.addEventListener('WebViewJavascriptBridgeReady',function onBridgeReady(){
            WebViewJavascriptBridge.sendMessage('showSystemToast$' + msg);
        }, false);
    }

    // for android
    if(typeof android != 'undefined'){
        android.showSystemToast(msg);
    }
};

也就是封装了js调用android和ios的方法，

据HBuilder官网说法是封装了40w+的原生方法，

总结一下，就是js去调用android或iso中的原生方法。

点这里去下载官方nativejs-app：Hello HTML5+