Android原生集成MUI框架进行混合开发

article/2025/9/24 2:22:01

开发APP中我们经常进行原生结合H5进行混合开发，下面将进行详细讲解Android原生集成MUI框架进行混合开发（项目Demo如下，有需要的可以下载查看），下一篇讲述，Android原生和MUI（也适合H5与原生交互）交互的实现。

1：mui官方框架介绍及开发要点：（https://dev.dcloud.net.cn/mui/）如下为官方页面：

    

今天我们就要把这个号称最接近原生开发的框架集成到我们Android原生本地中。

2：首先作为例子我们下载下来mui的官方框架Hellomui,以hellomui这个框架集成到我们的Android原生本地中去。

下载完成后使用H5开发工具HBuild X打开hellomui项目如下（正常在手机上运行）：

3：在该项目中有个manifest.json的文件，打开该文件其中有个基础配置打开配置应用标识（AppID）点击从云端获取后生成如下（真正的项目中配置各种你开发项目中需要的配置信息，如权限，启动页，SDK配置，源码视图等配置）：

这个AppID是集成打原生中需要配置的。然后点击运行—>原生App-本地打包—>生成本地App资源如下图，等待一会打包成功后底部会有生成本地资源包的路径至此H5端准备完毕：

4：在AndroidStudio中新建一个项目这里我新建一个项目叫AndroidMUI项目，一直点击下一步完成项目的构建（就是一个简单的HelloWorld的界面显示），然后下载Android集成需要的SDK（https://ask.dcloud.net.cn/article/103）找到最新的下载就可以了，下载后目录如下（这里有集成所需的全部配置和文件信息）：

5：在AndroidStudio中打开AndroidMUI项目切换到project视图—>app下的libs中添加如下文件（这里只是简单的选取几个，文件是上图中SDK目录下的文件，这些文件很多可以适配所有开发者需要的类似于aar的SDK工具包，我们直接复制我们开发需要的并粘贴到app下的libs包中即可）如下所示：

6：在app—>src—>main文件夹下新建assets文件夹—>在改文件夹下新建两个文件夹apps和data文件夹，然后把我们HBuildX中打包的文件复制到apps文件夹下，在data中复制对应的文件（上述第四步中下载的目录中有个UniPlugin-Hello_AS文件夹，找到后打开是一个AndroidDemo项目，找到app—>src—>main文件夹下assets文件夹中的data文件夹下复制过来）配置后如下：

7：大开app下的build.gradle文件配置如下：

apply plugin: 'com.android.application'android {compileSdkVersion 26defaultConfig {applicationId "com.example.andyyuan.androidmui"minSdkVersion 19targetSdkVersion 26versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'}}aaptOptions {additionalParameters '--auto-add-overlay'//noCompress 'foo', 'bar'ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"}
}
repositories {flatDir {dirs 'libs'}
}dependencies {implementation fileTree(dir: 'libs', include: ['*.jar'])implementation fileTree(include: ['*.aar'], dir: 'libs')implementation 'com.android.support:appcompat-v7:26.1.0'implementation 'com.android.support.constraint:constraint-layout:1.1.3'testImplementation 'junit:junit:4.12'androidTestImplementation 'com.android.support.test:runner:1.0.2'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

8：在AndroidManifest.xml文件中添加如下权限配置：

<!--hellomui中需要的权限-->
<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>
<uses-permission android:name="android.permission.GET_ACCOUNTS"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.READ_LOGS"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.READ_SMS"/>
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.SEND_SMS"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS"/>
<uses-permission android:name="android.permission.WRITE_SMS"/>
<uses-permission android:name="RECEIVE_USER_PRESENT"/>

在application节点下配置如下：

<applicationandroid:name=".MyApplication"android:allowClearUserData="true"android:hardwareAccelerated="false"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:largeHeap="true"android:persistent="true"tools:replace="android:name"><activityandroid:name="io.dcloud.PandoraEntry"android:configChanges="orientation|keyboardHidden|keyboard|navigation"android:hardwareAccelerated="true"android:label="@string/app_name"android:launchMode="singleTask"android:screenOrientation="portrait"android:theme="@style/TranslucentTheme"android:windowSoftInputMode="adjustResize"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name=".MainActivity"><!--<intent-filter>--><!--<action android:name="android.intent.action.MAIN" />--><!--<category android:name="android.intent.category.LAUNCHER" />--><!--</intent-filter>--></activity>
</application>

9：在assets下的data中dcloud_properties.xml文件中添加如下插件配置：

<feature name="PGPlugintest" value="com.example.andyyuan.androidmui.PGPlugintest"/>

10：新增PGPlugintest.java文件如下：

/*** 5+ SDK 扩展插件示例* 5+ 扩扎插件在使用时需要以下两个地方进行配置* 1  WebApp的mainfest.json文件的permissions节点下添加JS标识* 2  assets/data/properties.xml文件添加JS标识和原生类的对应关系* 本插件对应的JS文件在 assets/apps/H5Plugin/js/test.js* 本插件对应的使用的HTML assest/apps/H5plugin/index.html* <p>* 更详细说明请参考文档http://ask.dcloud.net.cn/article/66**/
public class PGPlugintest extends StandardFeature {public void onStart(Context pContext, Bundle pSavedInstanceState, String[] pRuntimeArgs) {/*** 如果需要在应用启动时进行初始化，可以继承这个方法，并在properties.xml文件的service节点添加扩展插件的注册即可触发onStart方法* */}//
//    public void onStart(Context pContext, Bundle pSavedInstanceState, String[] pRuntimeArgs) {
//
//    /**
//     * 如果需要在应用启动时进行初始化，可以继承这个方法，并在properties.xml文件的service节点添加扩展插件的注册即可触发onStart方法
//     * */
//    }
//public void PluginTestFunction(IWebview pWebview, JSONArray array){Log.e(TAG, String.format("webview = %s, jsonArray = %s", pWebview, array));// Toast.makeText(mApplicationContext, array.toString(), Toast.LENGTH_SHORT).show();// 原生代码中获取JS层传递的参数，// 参数的获取顺序与JS层传递的顺序一致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));// 调用方法将原生代码的执行结果返回给js层并触发相应的JS层回调函数JSUtil.execCallback(pWebview, CallBackID, newArray, 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;// 只能返回String类型到JS层。return JSUtil.wrapJsVar(ReturnValue, true);}}

OK，点击编译，运行成功！


http://chatgpt.dhexx.cn/article/O4B79rYA.shtml

相关文章

MUI 前端框架体验

MUI 前端框架体验

前端框架有很多&#xff0c;在做混合开发APP 时&#xff0c;MUI 的UI 看起来更像原生APP&#xff0c;所以就选择MUI 来体验一下。 1 首先下载 安装 HBuilder X 2 创建并选择5app 项目 3.比较关键的index页面 Markup <!DOCTYPE html> <html> <head><me…
阅读更多...
Android引入QMUI框架

Android引入QMUI框架

前言 作为一个JAVA后端开发&#xff0c;学习Android开发&#xff0c;Android原生UI控件样式单一&#xff0c;简单&#xff0c;下面考虑引入UI框架QMUI。具体步骤如下&#xff1a; 一、创建一个Empty项目 二、打开QMUI官网查看相关步骤(对新手很不友好) https://qmuiteam.com…
阅读更多...
vue框架和uniapp框架区别,前端vue和uniapp哪个好用

vue框架和uniapp框架区别,前端vue和uniapp哪个好用

uniapp和vue有什么区别&#xff1f; vue和uni-app的区别如下&#xff1a;1、uni-app可以通过打包实现一套代码多端运行&#xff0c;而vue不行。2、uni-app有自动的框架预载&#xff0c;加载页面的速度更快&#xff0c;vue没有。 3、uniapp使用小程序的标签&#xff0c;vue使用…
阅读更多...
vue介绍及vue与其它框架的优缺点

vue介绍及vue与其它框架的优缺点

一.vue介绍 1.什么是vue.js Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有…
阅读更多...
MUI框架-05-用MUI做简单App界面

MUI框架-05-用MUI做简单App界面

MUI框架-05-用MUI做一个简单App MUI 是一个前端框架&#xff0c;前端框架就像 Bootstrap&#xff0c;EasyUI&#xff0c;Vue ,为了做 app 呢&#xff0c;就有了更加高效的 MUI&#xff0c;我觉得前端框架有很多&#xff0c;也没有必要都取掌握&#xff0c;找一个比较出名的&am…
阅读更多...
MUI--高性能前端框架

MUI--高性能前端框架

MUI是什么&#xff1f; 最接近原生APP体验的高性能前端框架。 相比同类框架的优势&#xff1f; 性能和体验的差距&#xff0c;一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题…
阅读更多...
移动端开发框架mui介绍

移动端开发框架mui介绍

MUI 官网&#xff1a;https://www.dcloud.io/mui.html MUI 文档&#xff1a;https://dev.dcloud.net.cn/mui/ui/ 演示地址&#xff1a;https://dcloud.io/hellomui/ &#xff08;支持手机和电脑浏览器&#xff09; 开发工具&#xff1a;https://www.dcloud.io/hbuilderx.htm…
阅读更多...
MUI（最接近原生APP体验的高性能前端框架）

MUI（最接近原生APP体验的高性能前端框架）

MUI-最接近原生APP体验的高性能前端框架MUI: 最接近原生APP体验的高性能前端框架https://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架&#xff0c;追求性能体验&#xff0c;是我们开始启动MUI项目的首要目标&#xff0c;轻量必然是重要特征。 MUI不依赖任何第…
阅读更多...
关于MUI一个很实用的前端框架

关于MUI一个很实用的前端框架

今天也是我接触mui的第一天。首先先上MUI的官网上面瞧一瞧。http://dev.dcloud.net.cn/mui/window/#closewindow我这里上的不是官网&#xff0c; 我是先把他的基本能实现的功能先做了一个简单的了解。下面大家跟着我看&#xff1a; 一、Mui的组件 mui的组件都很原生比如拓展阅读…
阅读更多...
MUI框架快速开发

MUI框架快速开发

文章目录 创建项目快速编写标题页面主体底部选项卡常用关键词 字体图标事件处理常见手势事件 窗口对象底部选项卡-页面切换底部选项卡窗口对象设置点击事件处理 栅格系统页面传值通过openWindow通过自定义事件 常用关键词参考 创建项目 使用MUI框架搭建项目&#xff0c;首先我…
阅读更多...
MUI框架学习——了解MUI

MUI框架学习——了解MUI

MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架官方文档&#xff1a;http://dev.dcloud.net.cn/mui/ui/ &#xff08;1&#xff09;MUI 介绍 MUI 是什么&#xff0c;解决了什么问题&#xff1f;MUI 官方号称最接近原生APP体验的高性能前端框架简单的说就是webap…
阅读更多...
mui框架

mui框架

1 MUI介绍 1.1 MUI是什么&#xff0c;解决了什么问题。 &#xff08;1&#xff09;性能和体验的差距&#xff0c;一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题&#xff0c;这些都让HTML5…
阅读更多...
MUI框架初级教程

MUI框架初级教程

写在前面 本系列文章我们将利用mui基于网易云音乐API实现一个音乐播放器APP&#xff0c;同时基于环形或者融云实现聊天功能。作为本系列文章的第一篇&#xff0c;本文会详细讲解html5中管理应用窗口界面的Webview模块的用法&#xff0c;因为是初级教程篇不过多讲解原理部分&…
阅读更多...
MUI框架的基本使用

MUI框架的基本使用

要使用MUI框架&#xff0c;在Hbuilder中必须新建HTML5 APP&#xff0c;并且创建MUI项目&#xff0c;Hbuilder会自动生成代码 MUI页面的使用&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport&…
阅读更多...
MUI框架开发APP详解，一篇就够了

MUI框架开发APP详解，一篇就够了

MUI框架开发APP详解&#xff0c;一篇就够了 1.MUI简介2.下载安装hbuilderx3.新建一个5app项目4.制作首页首页头部首页主体 5.制作底部选项卡6.H5plus使用设置页面样式蜂鸣 7.app打包发布基础配置图标配置发行 1.MUI简介 最接近原生APP体验的高性能前端框架 追求性能体验&…
阅读更多...
Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire

Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire

一、MUI框架&#xff08;前端UI框架&#xff09; &#xff08;一&#xff09;MUI框架简介及优劣势分析&#xff1a; 1.MUI基本介绍及优劣势分析 MUI是一套前端框架&#xff0c;由DCLOUD公司研发而成&#xff0c;提供大量H5和js语言组成的组件&#xff0c;大大提高了开发效率&…
阅读更多...
Eclipse修改字体大小

Eclipse修改字体大小

字体调整大小1.打开eclipse&#xff0c;点击“window” 2.在下拉菜单中展开找到“preferences”&#xff0c;在左边菜单中点击“general”&#xff0c;找到后展开“appearance”。 3.选择“colors and fonts”。 4.找到basic&#xff0c;点击Text Font&#xff0c;双击鼠标右…
阅读更多...
eclipse字体大小设置

eclipse字体大小设置

eclipse字体大小设置 ①点击菜单上的Window窗口 ②点击Preferences选项 ③General→Appearance→Colors and Fonts ④选中Text Font ⑤点击Edit ⑥更改字体大小
阅读更多...
修改Eclipse字体以及背景颜色

修改Eclipse字体以及背景颜色

操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说&#xff0c;白色很刺激我们的眼睛&#xff0c;所以我经常会改变workspace的背景色&#xff0c;使眼睛舒服一些。设置方法如下&#xff1a; 1、打开window->Preference,弹出Preference面板 2、展开General标签&a…
阅读更多...
eclipse 快捷调整字体_eclipse字体大小设置快捷键

eclipse 快捷调整字体_eclipse字体大小设置快捷键

原标题："win10系统如何更改Eclipse字体大小"关于电脑问题教程分享。 - 来源:191路由网 - 编辑:小元。 因为编辑需要，不少朋友都会在windows10系统电脑中安装Eclipse英文版软件，用户对于代码的应用应该是没有问题的，可在英文版Eclipse设置字体小大却是两眼一抹黑，…
阅读更多...
推荐文章

Copyright @ 2022~2023