-
混编app_demo
2016-08-29 07:53:37app,混编代码 -
androidTV 混编app 按键监听
2020-03-03 14:19:49WebViewClient中,重写 public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) { return super.shouldOverrideKeyEvent(view, event); } } 重写此方法才能够处理在浏览器中的按键事件 ...WebViewClient中,重写
@Override public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) { if (event.getAction() == KeyEvent.ACTION_DOWN) { LogUtils.d("shouldOverrideKeyEvent()"); if (event.getKeyCode() == KeyEvent.KEYCODE_0) { view.loadUrl("javascript:onkeydown("+KEY_ZERO+")"); }else if (event.getKeyCode() == KeyEvent.KEYCODE_1) { view.loadUrl("javascript:onkeydown("+KEY_ONE+")"); } } return super.shouldOverrideKeyEvent(view, event); }
重写此方法才能够处理在浏览器中的按键事件
-
android 架构之集成react native框架js混编APP
2018-11-01 13:39:26本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。 什么是 js 混编? js混编简单说就是使用JavaScript开发APP程序。 android应用使用的是java,Kotlin 、c/c++ 为主的语言开发,ios使用的object-...本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。
什么是 js 混编?
js混编简单说就是使用JavaScript开发APP程序。
android应用使用的是java,Kotlin 、c/c++ 为主的语言开发,ios使用的object-c 、 swift、c/c++ 为主语言开发,由于市场是基本都是android和ios手机,所以一般公司开发什么项目android和ios的APP都必须开发。android和ios都提供一个库webkit浏览器引擎的支持,android提供了一个组件webView用于显示网页,相当于一个内置浏览器,ios也有类似一个组件UIWebView;webView和UIWebView也都支持js bridge的模式,就是js与java或者object-c进行交互,那么就产生一种开发模式就是hybrid APP开发模式。
hybrid 应用
hybrid APP开发模式由于可以使用HTML5 、css、js进行大量UI开发得到了飞速的发展,到后面这类开发也出现很多优秀的框架例如:cordova(phoneGap) ionic 等,他们基本架构都是使用浏览器组件(webView,UIWebView)渲染UI,使用js调用原生代码执行手机功能。那么随后发展中hybrid应用也暴露很多问题。
hybrid 应用缺点
- UI渲染性能差,例如加载白屏,渲染卡顿
- 内存消耗高,主要是没有优秀的回收复用机制,例如原生recyclerView
- 用户交互差,用户触摸反应迟钝等
- UI渲染失真
那么为了解决hybrid APP中的鸡肋痛点,那么也产生除了很多记得新js 混编开发框架,例如react native(facebook 公司出品), Xamarin(微软公司出品,c#阵营,干的也是跨平台这档子事);这种框架已经不再是hybrid模式,应该叫做js native APP 开发模式。
js native 应用(react native ,Xamarin )
js native 应用克服了很hybrid的缺点,他是通过js开发使用自定义封装UI控件进行开发,最终打包成原生应用。
1、优点
- 原生级别的UI渲染
- 没有通过webView来进行桥接,减少内存消耗
- 用户体验迅速,触摸流畅
- 提供原生方法调用自定义接口,和自定义UI组件的封装使用,可以无缝对接你现在应用
- android和ios端高度UI一致性
其实缺点也是比较明显,例如:
1、缺点
- 一定的学习成本,相当于学习新的开发技术
- 项目避免不了封装自定义方法和UI控件,桥接代码多
- 项目维护成变高了
常用混编框架对比表
项目 cordova(phoneGap) react native Xamarin ionic 是否使用webView交互 是 否 否 是 是否具备自有UI组件 否 是 是 是 开源 是 是 是 是 是否打包成原生 否 是 是 否 具备定制IDE工具 否 是 是 否 开发语言 js js c# js 推荐理由 前身phoneGap,历史悠久 facebook大厂背景,使用react js开发,提供了良好的调用原生api和UI组件机制 强烈推荐,超级大厂微软支持,mono是后台,导出平台不止是android 、iOS, 还有windows桌面程序 具备独立js UI,建立在cordova之上 总体而言优点还是跨平台,如果选择js混编框架还是推荐使用react native。
react native整合进入android应用 ,加入js开发模式
操作步骤:
配置好React Native依赖和项目结构。
创建js文件,编写React Native组件的js代码。
在应用中添加一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的容器。
启动React Native的Packager服务,运行应用。
验证这部分组件是否正常工作。开始前我们必须使用react native脚手架搭建出一个可以运行的hello world 项目,本文介绍主要是集成react native框架进入现有应用重点不是环境搭建,所以你可以自行百度react native官网的初始化项目文章。
假设你现在已经有了环境了和一个可以运行hello world 项目了 那么我们可以开始接入现有应用了。
hello world 项目项目目录如图:
复制node_modules目录和package.json进入你android项目跟目录如图:
创建index.android.js 文件放入android根目录,写入代码:
'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, NativeModules, ToastAndroid, requireNativeComponent, DeviceEventEmitte, Alert } from 'react-native'; class HelloWorld extends React.Component { constructor(props) { super(props); } componentWillMount() { } render() { return ( <View style={styles.container}> <Text style={{alignItems:'flex-start', backgroundColor:'red', height:49, textAlign:'right'}}> 作者jason 李 </Text> </View> ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', flexDirection: 'column', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);
接下是android部分了:
在入口gradle文件加入代码:
allprojects { repositories { google() jcenter() maven { url "$rootDir/node_modules/react-native/android" //加入这句 } } }
在项目gradle文件中加入依赖:
compile "com.facebook.react:react-native:0.55.3"
创建Application程序:
public class MyApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } }
创建react activity:
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); // 注意这里的MyReactNativeApp必须对应“index.js”中的 // “AppRegistry.registerComponent()”的第一个参数 mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorlds", null); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } }
加入权限:
<uses-permission android:name="android.permission.INTERNET" />
至此所有的配置结束!!!
运行测试
在目录打开cmd:输入
yarn start
然后用Android studio运行你的项目!!
-
技术选型——混编APP应用概述
2016-03-23 08:57:58本文主要是针对**APP进行开发之前的技术选型准备文档,现在share出来,希望在做同类开发的您留下宝贵意见。=============================分割线=====================================一, 主要应用技术 Node.Js ...本文主要是针对**APP进行开发之前的技术选型准备文档,现在share出来,希望在做同类开发的您留下宝贵意见。
=============================分割线=====================================
一, 主要应用技术
Node.Js
Node.js 是一个基于ChromeV8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
Cordova
Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台 应用程序,其原名称之为PhoneGap,Adobe收购Nitobi公司后,PhoneGap商标保留,代码贡献给了Apache基金会,而 Apache将其命名为ApacheCallback,其后发布新版本时,定名为ApacheCordova。
Cordova是一个行动设 备的API接口集,利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架, 如jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码。
注意到因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。
Ionic
Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目。它还提供了更加复杂的可 视化布局示例,例如在下面显示内容的滑出式菜单。
Ionic宣称他们极度强调性能,并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。
PS:Ionic的npm安装需要Python环境的支持,建议使用2.7的版本。
Angular.Js
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。[1]框架 采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操 作不再重要并提升了可测试性。
设计目标:
- 将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
- 将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。
- 将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进,并且让双方的复用成为可能。
- 指导开发者完成构建应用程序的整个历程:从用户界面的设计,到编写业务逻辑,再到测试。
Angular 遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合。通过依赖注入(dependencyinjection),Angular为客户 端的Web应用带来了传统服务端的服务,例如独立于视图的控制。因此,后端减少了许多负担,产生了更轻的Web应用。
二, 开发概述
混编APP主要是在Cordova的基础上,加入移动端组件Ionic,因为Ionic是基于Angular.Js编写的,所以,要求页面前端使用Angular.JS取代Jquery。
三,前期Demo&概述
1,NodeJs
http://blog.csdn.net/lhc1105/article/details/50614046
http://blog.csdn.net/lhc1105/article/details/50644830
2,Cordova
http://blog.csdn.net/lhc1105/article/details/50614604
http://blog.csdn.net/lhc1105/article/details/50614452
3,AngularJs
http://blog.csdn.net/lhc1105/article/details/50662088
4,Ionic官网
http://www.ionic.wang/js_doc-index.html
-
【链环科技】企业应该如何选择原生APP或混编APP,两者有何区别?
2020-06-17 17:33:47许多客户在选择开发APP时,都会被开发者问到一个,你是选择原生开发,还是混编开发。对于外行客户而言,不是很能理解原生和混编的区别。下面简单介绍一下两者的区别,企业在开发的时候能够根据自身情况从多重角度...许多客户在选择开发APP时,都会被开发者问到一个,你是选择原生开发,还是混编开发。对于外行客户而言,不是很能理解原生和混编的区别。下面简单介绍一下两者的区别,企业在开发的时候能够根据自身情况从多重角度考虑选择哪种开发模式。
介绍
原生APP即Native App开发,是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App软件开发。比如Android一般是利用Java、Eclipse、Android studio等开发语言;IOS是利用Objective-C 和Xcode进行开发。
混编APP即Hybrid App开发,结合原生和HTML5开发的技术,取长补短的一种开发模式,原生代码部分利用WebView插件或者其它的框架为HTML5提供了一个容器,程序主要的业务实现、界面展示是利用H5相关的Web技术进行实现的
开发区别
原生APP开发是采用完全的安卓或IOS系统开发语言进行编写,所需开发周期和开发成本相较于混编app比较高。但是原生开发的用户体验感,运行速度,页面交互功能都比较强大。
但是原生app的可移植性较差,且每次更新都需要重新进行编译上传,用户更新app时也需要重新下载进行安装,
混编APP的开发则具备轻量化,运行速度和用户体验也差不了太多。更新应用时,用户仅仅需要进行轻量化更新即可,无需重新下载这个安装包。但混编APP往往依赖于网络传输,各自的优缺点比较明显。如何选择
企业想要开发APP,可以根据自己的功能需求、预算和开发周期决定。如果预算成本较低,且产品功能体系比较单一可以选择开发混编APP。混编APP的存在即有理,优劣并存,许多混编APP发展好了转原生的也是可以的。
但是如果功能需求体量级比较大,本身又有比较明确的规划愿景。建议开发原生APP,毕竟它的交互功能,用户操作体验都比混编APP优秀。无论是原生开发,还是混编开发,都可以咨询链环科技,免费提供功能建议和流程梳理。具体请咨询链环科技(http://www.txxweb.com)
-
mui开发混编app--01--底部选项卡制作教程
2018-08-04 18:43:381.创建app项目 打开hb–文件–新建–移动app–输入项目名字–勾选mui项目–点击完成即可 2.修改manifest.json文件 找到项目—选择manifest.json文件–按住ctrl+f检索plus–添加如下代码 "launchwebview... -
springboot vue 前后端分离 混编APP个人项目
2018-01-05 23:37:53扫码APP下载: m端: http://m.himygirl.cn 源码地址: https://gitee.com/venfu/modules https://gitee.com/venfu/mygirl-c-web https://gitee.com/venfu/mygirl-b-web ... -
混编,web APP
2017-02-28 17:15:00使用框架Cordova,H5+JS语言,可以尝试下混编web APP 是怎样做到, Cordova 转载于:https://www.cnblogs.com/mojiewei/p/6479789.html -
reactnative混编构建的app
2019-08-10 06:05:53通过js编写RN界面,使用前端的nodejs的npm工具打包RN开发出来的模块,生成bundle文件,预先存放到原生指定的目录,原生层面在RN引擎初始化时载入并读取bundle并进行渲染 -
MUI 仿豆瓣电影 APP跨平台混编框架
2018-12-27 22:35:13MUI 仿豆瓣电影 APP跨平台混编框架 链接:https://pan.baidu.com/s/1H70lkGndQLz04wBygZSLew 提取码:更多教程加Q:1642261812 V信:SH66668888QH 获取 -
iOS混编提交苹果Appstore流程详解
2012-07-07 17:01:2599美元开发帐号,生成IPA到上架的教程!图文并茂! -
iOS-Swift与OC混编ipa包增大,APP如何瘦身?
2017-07-15 11:18:28OC与Swift混编后,感觉吊吊地,但某一天要发布应用时,心情就纠结了。本地AD hoc打包30.4M,发布应用到商店并且成功上线,发现APP体积为48.8M,心情非常惊讶。同事产品需求要把APP体积降到10M,一阵....。那么,APP... -
Hybrid APP --- OC,JS 混编
2016-01-15 15:37:13基于原生app的更新复杂的弊端,现在很多app使用Hybrid方式,来实现更快的更新速度以及更好的灵活性。 那么native与JS的相互调用需要解决。 方式: 1.原生调用JS 使用webView的原生方法: [webView ... -
百度App Objective-C/Swift 组件化混编之路(一)
2021-01-12 10:24:00Python实战社群Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲作者丨郭金、陈佳来源丨百度App技术一. 背景1.1... -
百度App Objective-C/Swift 组件化混编之路(二)- 工程化
2021-01-13 10:24:00Python实战社群Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲扫码关注添加客服进Java社群▲作者丨张渝、郭金来源丨百度App技术前文《百度App... -
Flutter混编:在Android原生中混编Flutter
2019-06-02 11:14:11目前《闲鱼》客户端已经在商品详情页使用纯Flutter编写了,单页面纯Flutter写是没有问题的,在这里... 切回APP 以《闲鱼》商品列表页和商品详情页为例: 商品列表页和商品详情页 接下来我们打开布局边界显示,可...
-
Deskreen 将 Web 浏览器变为第二屏幕
-
NGUI Next-Gen UI v2018.3.0.rar
-
ndk开发环境!移动开发者升职加薪的8项技能,2年以上经验必看
-
粉红美容美体机构网页模板
-
V5_DVB_BGA552_DDR3_16X2_V1_0-0825-V163.zip
-
【数据分析-随到随学】数据可视化
-
使用Python如何快速打开一个百万行级别的超大Excel文件?
-
FFmpeg4.3黄金系列课程:c++版
-
一周内日期连续显示
-
第1章 Java入门基础及环境搭建【java编程进阶】
-
三大条件致病菌|大肠埃希氏菌、血链球菌、李斯特菌
-
彩虹儿童智力乐园网页模板
-
时尚美容空间网页模板
-
libevent-2.0.13-stable.tar.gz
-
NuxtJS中使用axios,Nuxt封装axios请求
-
软件项目报价单.xlsx
-
山东济南ISO9001认证|ISO14001认证|ISO45001认证|ISO三体系认证的流程
-
绘客708S-P驱动.rar
-
Mybatis基础(二)
-
IP判断-Java