`
zhy20045923
  • 浏览: 155808 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Android本地APP集成Mui框架

阅读更多
2.如何在安卓原生APP中使用MUI框架
2.1资源准备
1.需要去首先从官网http://www.dcloud.io/ 下载HBuilder及其他的开发工具(eclipse或者Android studio)
2.到http://ask.dcloud.net.cn/article/103 下载HBuilder离线打包Android版SDK
2.2项目集成
1. 用Android Studio创建一个新项目,如MyFirstMUI
2. 导入jar包,可从HBuilder-Integrate工程的libs中选择,具体要导入哪些jar包可从SDK中的Feature-Android.xls中查看。
3.加入app资源
①在工程目录下的创建assets文件夹,并在assets目录下添加apps目录
②在apps目录下创建应用ID同名目录
③在应用ID同名目录下创建www目录
④将应用资源和应用配置文件(manifest.json)拷贝到www目录下
其中“H5B1EA68D”目录名称为应用manifest.json中的id名称,务必一致。
如下图:

4.添加配置文件
添加control.xml文件和properties.xml文件到assets->data目录下,其中control.xml文件的appid值为HBuilder应用的appid,必须与应用manifest.json中的id值完全一致;appver为应用的版本号,用于应用资源的升级,必须保持与manifest.json中的version -> name值完全一致;version值为应用基座版本号(plus.runtime.innerVersion返回的值),不要随意修改。
Properites文件用于对应JS类名和Android包名的对应关系,用户可以根据开发项目使用到的插件对文件进行添加或删改。
这两个文件都可从HBuilder-Integrate工程中拷贝过来进行修改。如下图:

5.复制所需的资源文件到drawable和layout文件夹中
如下图:


6、修改AndroidManifest.xml文件
文件中的versionCode与manifest.json中version -> code值一致;versionName与manifest.json中version -> name值一致。根据HBuilder-Integrate工程中的AndroidManifest.xml文件添加所的功能权限。
7. 添加代码编译测试
如下图:

注意RInfomation要连同其目录一起复制进项目中。
2.3参考资料
http://www.mamicode.com/info-detail-1149716.html
http://ask.dcloud.net.cn/docs/
3.本地app如何与H5+交互
1.JS扩展方法的实现
document.addEventListener("plusready", function() {
var _BARCODE = 'plugintest', B = window.plus.bridge;
var plugintest = {
PluginTestFunction : function(Argus1, Argus2, Argus3, Argus4,
successCallback, errorCallback) {
var success = typeof successCallback !== 'function' ? null
: function(args) {
successCallback(args);
}, fail = typeof errorCallback !== 'function' ? null
: function(code) {
errorCallback(code);
};
callbackID = B.callbackId(success, fail);

return B.exec(_BARCODE, "PluginTestFunction", [ callbackID, Argus1,
Argus2, Argus3, Argus4 ]);
},
PluginTestFunctionArrayArgu : function(Argus, successCallback,
errorCallback) {
var success = typeof successCallback !== 'function' ? null
: function(args) {
successCallback(args);
}, fail = typeof errorCallback !== 'function' ? null
: function(code) {
errorCallback(code);
};
callbackID = B.callbackId(success, fail);
return B.exec(_BARCODE, "PluginTestFunctionArrayArgu", [
callbackID, Argus ]);
},
PluginTestFunctionSync : function(Argus1, Argus2, Argus3, Argus4) {
return B.execSync(_BARCODE, "PluginTestFunctionSync", [ Argus1,
Argus2, Argus3, Argus4 ]);
},
PluginTestFunctionSyncArrayArgu : function(Argus) {
return B.execSync(_BARCODE, "PluginTestFunctionSyncArrayArgu",
[ Argus ]);
}
};
window.plus.plugintest = plugintest;
}, true);
2.Html使用示例 plus.plugintest.PluginTestFunctionArrayArgu(["Html5","Plus","AsyncFunction","ArrayArgument!"], function(result) {alert( result );},function(result){alert(result)});
plus.plugintest.PluginTestFunction("Html5","Plus","AsyncFunction","MultiArgument!", function( result ) {alert( result[0]  + "_" + result[1]  + "_" + result[2]  + "_" + result[3] );},function(result){alert(result)});
var Argus = plus.plugintest.PluginTestFunctionSyncArrayArgu(["Html5","Plus","SyncFunction","ArrayArgument!"]);
var resulrt = plus.plugintest.PluginTestFunctionSync("Html5","Plus","SyncFunction","MultiArgument!");
3. Android第三方插件开发
创建插件类
创建一个继承自StandardFeature的类,实现第三方插件扩展。
创建插件类需要引入的包
import io.dcloud.DHInterface.IWebview;
import io.dcloud.DHInterface.StandardFeature;
import io.dcloud.util.JSUtil;
实现扩展方法
package com.example.test;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import io.dcloud.common.DHInterface.IWebview;
import io.dcloud.common.DHInterface.StandardFeature;
import io.dcloud.common.util.JSUtil;

public class TestUtil extends StandardFeature {

public void PluginTestFunction(IWebview pWebview, JSONArray array) {
String CallBackID = array.optString(0);
JSONArray newArray = new JSONArray();
newArray.put(array.optString(1));
newArray.put(array.optString(2));
newArray.put(array.optString(3));
newArray.put(array.optString(4));
JSUtil.execCallback(pWebview, CallBackID, newArray, JSUtil.OK, false);
}

public void PluginTestFunctionArrayArgu(IWebview pWebview, JSONArray array) {
String ReturnString = null;
String CallBackID = array.optString(0);
JSONArray newArray = null;
try {
newArray = new JSONArray(array.optString(1));
String inValue1 = newArray.getString(0);
String inValue2 = newArray.getString(1);
String inValue3 = newArray.getString(2);
String inValue4 = newArray.getString(3);
ReturnString = inValue1 + "-" + inValue2 + "-" + inValue3 + "-" + inValue4;
} catch (JSONException e) {
e.printStackTrace();
}

JSUtil.execCallback(pWebview, CallBackID, ReturnString, JSUtil.OK, false);
}

public String PluginTestFunctionSyncArrayArgu(IWebview pWebview, JSONArray array) {
JSONArray newArray = null;
JSONObject retJSONObj = null;
try {
newArray = array.optJSONArray(0);
String inValue1 = newArray.getString(0);
String inValue2 = newArray.getString(1);
String inValue3 = newArray.getString(2);
String inValue4 = newArray.getString(3);

retJSONObj = new JSONObject();
retJSONObj.putOpt("RetArgu1", inValue1);
retJSONObj.putOpt("RetArgu2", inValue2);
retJSONObj.putOpt("RetArgu3", inValue3);
retJSONObj.putOpt("RetArgu4", inValue4);

} catch (JSONException e1) {
e1.printStackTrace();
}

return JSUtil.wrapJsVar(retJSONObj);
}

public String PluginTestFunctionSync(IWebview pWebview, JSONArray array) {
String inValue1 = array.optString(0);
String inValue2 = array.optString(1);
String inValue3 = array.optString(2);
String inValue4 = array.optString(3);

String ReturnValue = inValue1 + "-" + inValue2 + "-" + inValue3 + "-" + inValue4;
return JSUtil.wrapJsVar(ReturnValue, true);
}
}
4.关联JS插件名和原生类
在编写扩展插件时需要修改“/assets/data”中properties.xml文件,在其中添加JS对象名称和Android包的类名对应关系,SDK会根据对应的类名查找并生成相应的对象并执行对应的逻辑。
<feature
name="plugintest" value="com.example.test.TestUtil">
</feature>
在应用的manifest.json文件中还需要添加扩展插件的应用使用权限
"plugintest": {
"description": "访问本地SDK"
},
5.参考资料
http://ask.dcloud.net.cn/article/66
分享到:
评论
2 楼 dawei1980 2018-08-08  
请问,解压密码是多少?
1 楼 牧羊之人 2017-07-20  
   

相关推荐

    影视APP源码+mui框架的.zip

    《影视APP源码结合mui框架解析》 在当今数字化时代,移动应用已经成为人们日常生活中不可或缺的一部分,特别是对于娱乐领域,影视APP更是占据了重要的位置。本篇文章将深入探讨一个基于HTML5技术并使用mui框架开发...

    HTML5开发APP-框架MUI(仿支付宝案例)

    MUI框架,全称为Mobile UI,是基于HTML5、CSS3和JavaScript的轻量级开源框架,设计初衷是为了帮助开发者快速构建具有原生App体验的移动Web应用。本案例将深入探讨如何使用MUI框架来开发一个类似支付宝的移动应用。 ...

    利用mui框架和pdf.js插件实现pdf文件解析与查看

    "利用mui框架和pdf.js插件实现pdf文件解析与查看"的主题旨在介绍如何在混合应用程序中集成这两个工具,以提供流畅的PDF阅读体验。 首先,我们需要了解**mui框架**。Mui是一个轻量级的前端框架,专为移动端H5页面...

    MUI框架 最接近原生开发的H5框架实例

    下面将详细介绍MUI框架的关键知识点以及如何使用它来开发高效的应用。 1. **MUI框架结构**:MUI的核心组件包括UI库、事件处理、动画效果和工具集等,这些都封装在易于使用的API中。开发者可以通过这些组件快速构建...

    移动框架MUI,推荐一下

    5. **与HBuild配合**:HBuild是一款强大的APP快速成型工具,它可以与MUI无缝集成,提供可视化编辑界面,让开发者无需编写复杂的代码就能实现应用的快速构建。通过HBuilder,开发者可以方便地拖拽组件,实现界面布局...

    MUI实现微信App开发.rar

    首先,MUI框架的设计理念是“一套代码,多端运行”,这意味着开发者只需要编写一次代码,就可以实现iOS、Android、浏览器、百度直达号以及流应用等多平台的覆盖,极大地提高了开发效率和代码的复用性。这得益于MUI对...

    MUI最接近原生APP体验的高性能框架

    MUI框架,作为一款备受推崇的移动端组件库,以其接近原生APP的体验和高性能特性,成为了JavaScript开发者的首选之一。本文将深入探讨MUI的设计理念、主要功能以及如何利用它来构建高效、流畅的移动应用。 MUI框架的...

    mui.rar_MUI app 模板_mui_mui 模板_mui模板_panr2q

    6. 性能优化:MUI框架注重性能优化,例如使用懒加载技术减少首屏加载时间,以及对CSS和JavaScript进行压缩,减小文件大小。同时,MUI还支持Web Worker,可以在后台线程处理耗时任务,避免阻塞主线程,提升应用的响应...

    MUI 仿豆瓣电影 APP跨平台混编框架

    本项目则是基于MUI框架,仿照豆瓣电影的界面和功能进行开发,旨在提供一个跨平台的混合应用解决方案,使得开发者无需深入学习原生Android或iOS开发,就能快速构建功能丰富的移动应用。 **一、HBuilder与MUI的关系**...

    mui-3.7.1.rar含有html5调用摄像头扫二维码mui.min.css和mui.min.js

    JSQR是一个轻量级的纯JavaScript二维码解码库,可以很好地与MUI框架集成。在获取到摄像头的实时预览图像后,我们可以截取一帧图片,传递给JSQR进行解码,获取二维码数据。 ```javascript function captureAndDecode...

    mui 案例 社交APP

    在移动应用开发领域,mui框架因其轻量级、高效和易用性,成为了许多开发者的选择。本篇将详细探讨如何利用mui框架构建一个功能丰富的社交应用程序,以“约妹子”为例,揭示其中的关键技术和实现思路。 一、mui框架...

    MUI项目实战源码

    本项目是一个跨平台的应用程序,它利用了MUI框架和Vue.js前端框架,结合豆瓣网的开放API,实现了展示热门电影和按条件搜索电影的功能。下面将对这个项目的核心技术和实现细节进行深入探讨。 **一、MUI框架** MUI是...

    h5app:基于5 + App,mui和HBuilder的h5应用

    【标题】"基于5+ App,Mui和HBuilder的H5应用"揭示了这个项目是关于构建移动Web应用的,利用了HTML5技术,并且依托于5+ App平台,同时结合了Mui框架和HBuilder开发工具。这个组合使得开发者能够快速、高效地创建功能...

    mui+vue结合开发的商城APP实例

    1. **环境配置**:安装Vue CLI,创建Vue项目,并引入MUI框架,设置CSS前缀以避免样式冲突。 2. **页面结构设计**:根据商城APP的需求,设计各个页面如首页、商品列表、商品详情、购物车、订单等,利用Vue组件化进行...

    基于MUI写的APP前端源码基础页面齐全

    “基于MUI写的APP前端源码基础页面齐全”表明这是一个使用MUI框架构建的移动应用前端源代码库,包含了多种基础页面,适用于开发者进行混合移动应用的开发工作。 **描述分析:** 描述简单明了,强调了源码的特性,即...

    mui漂亮的手机商城源码,手机商城网站源码,HTML

    本篇文章将深入探讨一款基于MUI框架的手机商城源码,它能在Android和iOS平台上流畅运行,为用户提供美观且功能丰富的购物体验。 MUI,全称Mobile UI,是DCloud(即海豚浏览器团队)推出的一款轻量级的前端开发框架...

    MUI手机购物网站HTML源码

    首先,我们来详细了解一下MUI框架的核心特点: 1. **组件丰富**:MUI提供了丰富的UI组件,如导航栏、轮播图、列表、按钮、表单等,这些组件设计符合移动设备的交互习惯,且样式统一,能够帮助开发者快速构建出美观...

    mui_hbuilder_springboot.app.rar

    在实际开发中,开发者需要具备HTML、CSS、JavaScript等前端基础知识,了解MUI框架的使用方法,掌握HBuilder的工具操作,同时对Java编程和Spring Boot框架有深入理解。对于数据库部分,开发者应熟悉SQL语句和关系型...

Global site tag (gtag.js) - Google Analytics