【交流分享】Android独立应用方式集成HTML5+SDK,Widget方式离线打包,空项目讲解

最近忙着微信和m站,还有流应用开发,好久没有写文章了.
公司打算把原生app全部改写成html5,方便升级版本,毕竟IOS更新审核太久,耽误运营推广;
我的项目百度地图,友盟推送,反馈,统计,千牛商家聊天都是得用原生的,所以以后用MUI写好html后,得集成到原生项目中去.

首先吐槽下官方的集成方式所提到的概念:
Widget方式: 按照字面的意思就是,html相当于小部件一样和原生代码放一块,在需要的时候调用;
独立应用方式: 这个就是Widget方式,概念真多
Webview方式: 只能打开一个界面,不能打开新界面,这个没搞懂使用场景~~~~(>_<)~~~~我暂且把这个概念忘了,别搞混

当你打开官方http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/38 又多了个概念: 离线打包
当你运行官方集成案例的时候,又多了个Runtime集成方式; 小白迟早会疯掉的

总之,按照我的理解:
1.如果你的项目原生代码和html混合着用,那么选择Widget方式集成,也就是独立应用方式;
2.如果你的项目是HBuilder写的纯html,没有原生代码,那么用Runtime集成方式,比较简单;

离线打包的概念是相对于HBuilder在线云打包而言的; 我们选上面各种集成方式用eclipse,Android Studio 或者XCode把html编译成安装包就属于离线打包了;这样避免云打包排队或者服务器挂掉的时候,自己还能编译安装包,照常发布更新版本;

ok,理清了官方的概念,你也基本懂了我写的标题:
Android独立应用方式集成HTML5 SDK,Widget方式离线打包,空项目讲解

一.准备
1.打开HBuilder,新建-->移动APP-->勾选"Hello mui",项目名叫"HelloMui";(我以官方mui项目来举例了,到时自行改为自己的项目);
2.打开eclipse,打开你的Android项目;(我这里是新建了一个Android项目,名字叫Widget; 如果你还没配置Android开发环境,则点这里http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html );
3. 去官方下载最新的sdk: http://ask.dcloud.net.cn/article/103 解压,里面有个名字叫'SDK'的文件夹

二.拷贝
1.把下载的官方SDK文件夹里的res文件夹拷贝到Android项目的res,合并;注意不要替换你项目的资源,不然你配的图标和写的strings.xml就没了

说明: res里面有NativeUI用到的图片资源: 进度条,对话框,动画样式,照片选择,底部弹出框,logo,启动页等等;http://www.html5plus.org/doc/zh_cn/nativeui.html

2.把SDK\assets中的data文件夹到eclipse项目中的assets

3.在eclipse的assets目录中创建apps; 在apps中创建一个文件夹,名字和你HBuilder的项目名相同;我这里就叫HelloMui; 在HelloMui中创建www文件夹; 把HBuilder项目拷贝到www文件夹下;


注意: apps和www文件夹名字是固定的,结构也是固定的,不然读取不到html

4.修改manifest.json和control.xml中的id为你的项目名;我这里是HelloMui

5.拷贝SDK\libs里面的jar包到eclipse项目下的libs;如图:


说明:
pdr.jar, ui.jar, nineoldandroids-2.4.0.jar是Webview基础包,必须导入
因为HelloMui项目中获取设备信息网络状态,需引入device.jar;
设置了浏览器运行环境,需引入navigatorui.jar(设置了状态栏,创建快捷方式,log输出,设置cookie都需引入此包)
使用了plus.storage,需引入nopermission.jar

其实在具体的项目中,这些包远远不够的:
比如ajax联网,需引入xhr.jar
全量更新和差量更新,需引入downloader.jar,invocation.jar
原生对话框和底部弹出或者toast,需引入nativeui.jar
设置用户头像,用到拍照,打开相册,需引入camera.jar,gallery.jar
具体请参照: http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/216

6.打开eclipse项目的AndroidManifest.xml,配置权限,具体请参照官方SDK里的Feature-Android.xls文件

<!-- 联网 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 使用存储卡 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
\n

7.把HBuilder-Integrate\src下的io文件夹,拷贝到eclipse项目的src

8.把Android-SDK\HBuilder-Integrate\src\com\HBuilder\integrate\SDK_WebApp.java 拷贝到eclipse项目的src包名下,并修改122行的appBasePath, 为assets的app路径

9.SDK_WebApp.java里面的FrameLayout是用来承载html的,可以放到任何你想放到的位置,比如点击一个按钮,弹窗或者打开新Activity展示; 我这里的话,直接用activity展示,并在AndroidManifest.xml设置启动就打开本界面


10.ok 完了 ,运行吧. 附上eclipse项目源码


28 分享
蔡繁荣 小闹 bzliukai ffffffffff LFZ levi 小木狼 seniafamily returN 卡卡啦 adas xcc2533918@163.com 宋欣 PP1988 969122797@qq.com lhyh yaoshuxiang89@163.com 木头很努力 DCloud_客服_Trust 996714047@qq.com DCloud_heavensoft 1877682825@qq.com Android_XR Junly 462097637@qq.com 程小猿 EvilBandit 624693615@qq.com
ppbear_ly@163.com

ppbear_ly@163.com

每个jar包对应哪个权限可不可以说清楚一点,直说需要添加权限,没有导入jar包照样不行啊。
0 赞 2017-04-13 11:10
tragfarmer@163.com

tragfarmer@163.com 回复 wenju

按流程走完,运行空白
0 赞 2017-04-05 14:17
A_H

A_H

你好,我集成后发现定位功能没有使用,其他的功能正常使用。具体表现为手机屏幕上方的状态栏没有定位模块正在使用的一个小图标。有什么解决办法吗?
0 赞 2017-03-03 14:38
kistliu@126.com

kistliu@126.com

大神,按照这个来了后调用plus的重启方法就会变成白页怎么回事啊
0 赞 2017-03-01 13:39
A_H

A_H 回复 wenju

OK,谢谢
0 赞 2017-02-21 13:19
wenju

wenju 回复 A_H

AS的可以看看这个哦 http://ask.dcloud.net.cn/article/508
0 赞 2017-02-21 11:52
A_H

A_H

你好,我按照你这种方式集成到Android studio工具下后,运行测试手机上生成了两个图标。这是什么问题?
0 赞 2017-02-21 10:04
小小码农11

小小码农11

按照大神的步骤下来怎么显示页面是空白?请问hbuild创建项目以后还需要启动什么的吗?
0 赞 2017-01-11 18:17
老向

老向

HTML页面监听了plusready,plusready()也调用了,可是plus.webview系列的没反应。
怎回事?
0 赞 2016-12-03 18:15
老向

老向

碰到一个问题,可以正常启动!可是HTML里的JS好象没执行一样!点击也不打开新页面,AjAX也没更新数据,是什么问题?如果把首页指向一个网站,浏览好象是正常的!在线打包是正常的!用Runtime方式集成也没问题。
0 赞 2016-12-03 17:09
老向

老向

碰到一个问题,运行起不了!可是HTML里的JS好象没执行一样!点击也不打开新页面,AjAX也没更新数据。是什么问题,如果把首页指向一个网站,浏览好象是正常的!线打包是正常的!用Runtime方式集成也没问题。
0 赞 2016-12-03 16:48
慵懒的猫

慵懒的猫

楼主,我集成了HBuilder-Integrate项目,但是那个SDK_WebApp 里 我如何能够在原生界面获取地址 跳转到H5页面 我这里的H5页面 不只是存放在本地的,还有网络的H5页面
0 赞 2016-11-28 17:40
慵懒的猫

慵懒的猫 回复 wenju

已经参考了N多文档,我只是做了最基本的集成,运行不报错,就是显示不了要加载的页面
0 赞 2016-11-25 14:30
wenju

wenju 回复 慵懒的猫

可以参考 这个 http://ask.dcloud.net.cn/article/508
0 赞 2016-11-25 14:23
慵懒的猫

慵懒的猫

楼主 你的这篇文档 在AS中可以适用么?
0 赞 2016-11-25 13:08
3277076046@qq.com

3277076046@qq.com

请教各位,我按步骤来的,打包成功了,但是运行后没有内容是怎么回事呀?
0 赞 2016-10-29 11:08
3277076046@qq.com

3277076046@qq.com 回复 wenju

好的,谢谢
0 赞 2016-10-24 16:33
wenju

wenju

官方最新文档可以先参考一下:
1.http://ask.dcloud.net.cn/article/924
2.http://ask.dcloud.net.cn/article/508
3.http://ask.dcloud.net.cn/article/81
0 赞 2016-10-24 10:20
wenju

wenju 回复 3277076046@qq.com

亲们 我这个是按照1月份的官方文档集成的 导入的也是那个时候的jar包 我们那个时候项目也是这么做的 如果现在报错 则需参考一下官方案例哦 流程是对的...
0 赞 2016-10-24 10:15
3277076046@qq.com

3277076046@qq.com

大神。我按教程操作的,步骤走完后再虚拟机上运行白屏,然后提示已停止运行,求解。。。
0 赞 2016-10-23 23:33
wenju

wenju 回复 996714047@qq.com

是要安装安卓环境的
0 赞 2016-09-25 10:05
996714047@qq.com

996714047@qq.com

大神我第一次搞这个 我想问问是不是我新建文件夹 然后写代码 就可以打包,打包的时候必须安装安卓的环境吗
0 赞 2016-09-24 17:06
wenju

wenju

亲们 我这个是按照1月份的官方文档集成的 导入的也是那个时候的jar包 我们那个时候项目也是这么做的 如果现在报错 则需参考一下官方案例哦 流程是对的...
1 赞 2016-09-19 09:03
cyq7on

cyq7on 回复 仗剑江湖

哥们儿你解决了吗
0 赞 2016-09-18 17:24
cyq7on

cyq7on

点个赞!
0 赞 2016-09-18 17:22
wenju

wenju 回复 448993299

那有可能是官方更新了jar包 毕竟我这个项目是1月份写的 官方有更新jar包很正常
0 赞 2016-09-18 12:29
448993299

448993299

莫名其妙楼主的项目可以了。比对了一下代码。有个关键的地方丢了:楼主在SDK_WebApp.java里写了一个类WebappMode,而官方的没有这个类,是用WebappModeListener这个类的
0 赞 2016-09-14 17:05
448993299

448993299

目前为止,离线打包,只有官方的hello_world项目导入后可以正常运行,其他的都不行。
0 赞 2016-09-14 14:03
448993299

448993299

把楼主的项目导入eclipse,也是启动动画后,一片空白页面,不动了。楼主你确定已调通了?
0 赞 2016-09-14 13:58
448993299

448993299

使用runtime模式,运行时提示 .SDK_WebApp} does not exist., 但我已经引入了
0 赞 2016-09-14 13:45
448993299

448993299

.SDK_WebApp} does not exist. 。但我已经引入了。
0 赞 2016-09-14 13:44
448993299

448993299 回复 448993299

.SDK_WebApp} does not exist.
0 赞 2016-09-14 13:44
448993299

448993299

集成好了,真机和模拟器一直显示空白页不动,没有反应了,请问可能是什么原因?
0 赞 2016-09-14 13:11
shimeifang

shimeifang 回复 昵称都被用了

你集成好了吗,我继承后也一直出现白屏不知道怎么解决啊,请问你是怎么解决的,我下载上面的demo里面的内容全是空白,麻烦给予思路啊
0 赞 2016-08-25 14:56
shimeifang

shimeifang 回复 昵称都被用了

你集成好了吗,我继承后也一直出现白屏不知道怎么解决啊,请问你是怎么解决的,我下载上面的demo里面的内容全是空白,麻烦给予思路啊
0 赞 2016-08-25 14:56
仗剑江湖

仗剑江湖

manifest.json 里面有添加
"NativeUI":{
"description": "原生UI控件"
},

还是提示:"打包时未添加ui模块",不知道什么原因
0 赞 2016-08-09 09:56
丁丁尼

丁丁尼

mark
0 赞 2016-08-02 16:37
wenju

wenju 回复 蔡邵鑫

也是一样的 都是这么做..
0 赞 2016-07-23 10:53
蔡邵鑫

蔡邵鑫

楼主,我一开始就要开始使用html,只是点击某一个页面要使用原生代码加上html混合使用,这个需要怎么做?
0 赞 2016-07-22 13:12
wenju

wenju 回复 tomatozq@163.com

名字可以随意,只是要统一
0 赞 2016-07-17 11:56
木头很努力

木头很努力

学习了,谢谢。
0 赞 2016-07-17 11:12
tomatozq@163.com

tomatozq@163.com

为啥appid改为非要改成HelloMUI,原先manifest.json本身已经生成了一个appid为啥不用?难道跟apps下的文件名有关?
0 赞 2016-07-13 14:15
木头很努力

木头很努力

支持
0 赞 2016-07-08 14:20
昵称都被用了

昵称都被用了

原生+h5 混编 集成webview没问题 但是没有动画效果(也没直接跳转),改成集成webapp方式,画面就出现白屏。什么原因。
0 赞 2016-06-23 16:09
614976970@qq.com

614976970@qq.com

findViewById怎么弄呢,不是都没有设置View么
0 赞 2016-06-22 10:36
shenzhouxing12345@126.com

shenzhouxing12345@126.com

好叼,万分感谢
0 赞 2016-06-08 18:28
小飞龙

小飞龙

这个是Android调用一次的时候这么写,调用多次的时候呢,我试了不行,改怎么做呢
0 赞 2016-06-08 11:13
1525426075@qq.com

1525426075@qq.com

RInformation报错 怎么回事儿啊?求解
0 赞 2016-05-28 14:42
huimou1990@163.com

huimou1990@163.com 回复 wenju

好的,怎么我下载下来的源码解压报错~~
0 赞 2016-05-19 10:45
wenju

wenju 回复 huimou1990@163.com

请认真看第9条....SDK_WebApp.java里面的FrameLayout是用来承载html的,可以放到任何你想放到的位置,可以是new FrameLayout 也可以是findViewById
0 赞 2016-05-19 10:39
wenju

wenju 回复 huimou1990@163.com

请认真看第9条....
0 赞 2016-05-19 10:38
huimou1990@163.com

huimou1990@163.com

你好,我想请教下,在同一个activity中,一部分用源生代码呈现;另一部分使用集成好的html。应该怎么做,抱拳!
0 赞 2016-05-19 09:36
wenju

wenju 回复 卡卡啦

独立应用方式=Widget方式,和原生代码放一块,用到的时候调用;
Runtime集成方式=一开始就直接调用html页面,无原生代码;
0 赞 2016-04-21 21:22
卡卡啦

卡卡啦

可不可以这样理解,独立应用方式就是一开始就直接调用html页面,而Widget方式是在需要的时候才去调用
0 赞 2016-04-21 18:13
卡卡啦

卡卡啦

就是说独立应用方式和Widget方式没区别咯?都是把html当成小部件去调用?
0 赞 2016-04-21 18:11
小苏

小苏 回复 wenju

还有个问题 console.log 在 android Studio 上 打印不出来 是SDK 旧的?
0 赞 2016-04-16 19:01
小苏

小苏 回复 wenju

修改了 还是不行。 可以加下QQ:123464947 我给你发下图片
0 赞 2016-04-16 15:07
wenju

wenju 回复 小苏

manifest.json---启动图片配置---不勾选启动界面显示等待雪花
0 赞 2016-04-16 09:11
小苏

小苏

@wenju 启动界面有个 加载中的... 界面先启动, 虽然不到1秒就加载完了,但是还是不爽啊
0 赞 2016-04-16 01:01
hzx7787

hzx7787 回复 wenju

好 谢谢
0 赞 2016-04-14 00:03
zjjhccq@qq.com

zjjhccq@qq.com

可以打包,但是闪退什么原因?
0 赞 2016-04-13 10:40
wenju

wenju 回复 hzx7787

不好意思哦 IOS没多大研究哈 这个暂时无法帮到你 可以问问官方技术~
0 赞 2016-04-12 16:56
hzx7787

hzx7787

楼主 请问你知道ios 5+sdk的 camera怎么配置吗?我引入了camera.a的文件项目就报错了 知道的话麻烦指点一下 谢谢!
0 赞 2016-04-12 11:41
wenju

wenju 回复 可爱泥

亲 不是所有功能HBuilder都能集成的 比如公司说html的地图体验太差,要你地图必须用原生的,聊天要加入阿里旺旺,加入友盟反馈友盟消息推送,,,就得用到集成了
0 赞 2016-03-31 12:45
可爱泥

可爱泥

好麻烦,打包功能直接集成到HBuilder里面不就完事了
0 赞 2016-03-20 21:51
wenju

wenju 回复 xiamo152

mui提供了全量更新和差量更新 在html里面写上几句js就可以实现更新html了http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/182
0 赞 2016-02-17 14:09
xiamo152

xiamo152

楼主我有些不明,使用html5+SDK 开发的app不是将 html与native分开才对嘛?但是看你的讲解是将html部分也放在了native的assets里面一起打包,如果后期html有更改岂不是依然需要修改app重新打包发布,和传统的native应用更新没什么区别呐。我理解的Hybrid APP 可以将 html部分部署在服务端,不是同app一起打包,这样就可以达到不修改apk情况下更新html了,还望讲解。
0 赞 2016-02-16 18:01
wenju

wenju 回复 thirteenth

http://ask.dcloud.net.cn/article/531 有人分享了哦
0 赞 2016-01-27 09:34
蔡繁荣

蔡繁荣 回复 wenju

哈哈,受宠若惊!想不到你会关注,16年公司会有点小忙。不过分享是不会停的,过段时间有新东西了更新^_^
0 赞 2016-01-26 15:26
thirteenth

thirteenth

求一个 Adnroid Studio的
0 赞 2016-01-26 11:18
wenju

wenju

补上 Android的Runtime集成方式: http://ask.dcloud.net.cn/question/15183
0 赞 2016-01-25 17:47
wenju

wenju 回复 蔡繁荣

大神 我还是经常来你那看看你写的大作呢
0 赞 2016-01-25 14:59
wenju

wenju 回复 东哥的苹果

你下载我的那个项目运行报错吗? 应该不会的哦; 我这边是能正常运行的 ; 签名的话eclipse自带debug签名的,,该不会你的eclipse自带的签名都没了吧 你最好新建一个项目 试试能不能运行哦
0 赞 2016-01-25 14:58
东哥的苹果

东哥的苹果

签名错误,难道你没有这个错吗?
0 赞 2016-01-25 14:30
东哥的苹果

东哥的苹果

Installation error: INSTALL_PARSE_FAILED_NO_CERTIFICATES
Please check logcat output for more details.
Launch canceled!

eclipse真机运行报错
0 赞 2016-01-25 14:30
wenju

wenju

好了 源码和图片都已经附上O(∩_∩)O~
0 赞 2016-01-25 09:42
蔡繁荣

蔡繁荣

支持下,好叼!
1 赞 2016-01-22 20:53
wenju

wenju

过几天,再写个Runtime集成方式的,比较简单,下班吃饭吃饭哇~~~~(>_<)~~~~
1 赞 2016-01-22 20:44
wenju

wenju

写这个好费时间~希望帮到大家吧~ 不过以后有好东西,有空我还是坚持会分享,,,不介意就持续关注吧~
4 赞 2016-01-22 20:44

要回复文章请先登录注册