MUI+H5plus+HBuilder开发app(android,ios)介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rth362147773/article/details/77124691

前言

现在介绍一款只需要懂html+css+js就能开发app的框架,不需要懂原生语言,完全只需要前端web工程师就能独立开发出android和ios的应用,且一套代码搞定,效率很高。(其实更省事可以wap,android和ios一套带走,一下R闪秒3个平台,没毛病)


框架介绍

这套框架源于DCloud社区,DCloud的社区工程师们通过对h5的扩张,通过运用js在webview调用原生接口,最后通过DCloud的打包做成和h5+的产品,生成一个app。以app分类来定是Hybrid App。这套框架具备开发工具、调试、打包、ui库和工具库,是一套完整地解决开发app框架,且功能和性能效果接近原生。包括二维码、语言输入、支付、推送、陀螺仪等各种手机设备能力,均可通过JS简单调用。方便懒人们,不用学新语言看看API写app就可以了。

技术架构

HTML5+ 基座扩展采用三层结构,JS层、PluginBridge层和Native层。 三层功能分别是:
JS层: 在Webview页面调用,触发Native层代码,获取执行结果。
PluginBridge层: 将JS层请求进行处理,触发Native层扩展插件代码。
Native层: 插件扩展的平台原生代码,负责执行业务逻辑并执行结果返回到请求页面。如果需要写原生功能,就需要用到Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。

这里写图片描述


开始

1.下载工具

万事皆为工具起,必先利其器。下载hbuilder和H5+sdk,mui。
http://www.dcloud.io/runtime.html

2.helloword

1.新建
开始第一个app吧

2.新建项目
建项目的时候可以选择是否引用mui库,还可以选择编译的js语言版本ES5/ES6。下面还有教程和案例的连接给你看,不懂直接点。再不懂来@我吧。哈哈

3.文件夹介绍
css,fonts和js文件夹就是方mui库的。大家应该都清楚,而我只需要介绍manifest.json。unpakckage就是方编译后文件,这个不用管的。

*什么是manifest.json?

就是要打包的原生应用,其各种配置均在此处,一个配置文件。学过android和ios的朋友们应该不陌生吧。

appid是DCloud给的来用来调试开发用的。如果是需要打包,请填上自己appid。

资源都是经过压缩的,学web开发的朋友们,不用想着自动化什么的?
可以像idea那样直接边敲代码边编译,就编译和构造都交给编辑器吧。可视化编辑工具更加友好。

开发过android和ios的朋友们,都为图标的多个尺寸头疼吧。尤其同事开发2个平台的。直接上传一张256*256尺寸的图片,自动转成19个尺寸,且路径都已经写到配置文件上。继续懒着开发吧。

模块权限配置:打开一个app的时候需要一堆授权。在这里点击你app需要授权的功能。

4.运行app
编写index.html页面。
index.html内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <div>HelloWorld</div>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body>

</body>
</html>

写好页面,点击运行->手机运行->找到你刚刚连接的手机,在设备上运行。

5.打包
(1).点击发行->发行为原生安装包。


(2).填入自己的证书,证书如果没有可以使用DCloud公用证书的。


(3).上传到DCloud进行打包。


(4).打包成功!

总结

经过我使用且多次重构后,觉得MUI+H5plus+HBuilder使用起来不太难。遇到问题现百度,不google(国内大神开发的,哈哈),加qq多来聊,通常遇到的都是小问题,基本上文档上都有写清楚的。而开发出来的app动画修改流畅,打包后的文件也很满意(打包前的资源40m打包后20m还减肥不少啊)。也一点都看不出web那种闪啊闪啊,等啊又等的感觉。
最后一点提醒web开发工程师,在开发app的时候,要把思维转换一下。你开发的是一个app必须有app的交互。还有使用的组建,能用原生就尽量调用原生的,别在webview里面用html写个title栏。或者直接写一个webview里面打开一个web做成一个app。这种的app体验性很差,太依赖于网络根本,设计app尽量使用l/s方式。

ps

1.react native对比有什么区别?

react native只使用js,而Mui这套使用的是html+css+js。两者区别最大是no HTML5 和 h5+。这点对于渲染方式要及其大的区别。react native也就是使用js语言编程,但不使用浏览器引擎渲染,而是用独立v8引擎解析指定的js语法,然后由js操作绘制界面。而h5+主要就是靠webview来渲染html界面的。这个渲染方面的区别,还有就是react native是学一套做一套模式,这点就是学ios写ios app,学andriod写android app。这点和Mui app一套双平台,有所区别。


2.phoneGap、cordova对比有什么区别?

phonegap出来的很早,phonegap支持平台很多,能支持windows phone、blackberry,Mui做不了这么多平台支持,起码是现在。而两者的渲染方式很接近。但phonegap学习门槛还是Mui这个高,起码需要懂原生这一点就有所难度。不适合web工程师入门学习。


3.superwebview对比有什么区别?

之前看到我国开发的另一款 Hybrid App 框架,api不够Mui的多,社区活跃度差点。但我有空也会用它来重构一下,支持一下我国开发项目。


4.native app对比有什么区别?
我觉的native app的开发成本比较高,需要同时使用2种语言。而Mui app这点比起来绝对是低廉。而但性能上绝对native app占优。还有其实现在native app和hybrid app都是共同在app占有半边江山。而开发出是native app还是hybrid App更多应该在需求和产品设计来定。多少的成本,多少的资源,app的存活时间等等,都在考虑之内。而我个人虽然懂的开发hybrid App,但我还是会去学习java和Objective-C的。不应该满足能实现一个app而止,还需要多了解原生的东西。

猜你喜欢

转载自blog.csdn.net/rth362147773/article/details/77124691
今日推荐