-
2022-04-15 14:37:57
将Flutter集成到现有的Android/ios应用中有如下几个步骤
1.首先创建Flutter module
2.为已存在的Android、ios应用添加Flutter module依赖
3.在java、Oc中调用Flutter module
4.编写Dart代码
5.运行项目;
6.热重启、重新弄加载
7.调试Dart代码
8.发布应用
9.升职加薪,赢取白富美,走向人生巅峰
1.创建Flutter module
flutter create -t module flutter_module
2.创建Android项目 ,放到Flutter module 同级目录下
3.在Android项目中 打开 settings.gradle
setBinding(new Binding([gradle: this])) // new evaluate(new File( // new settingsDir.parentFile, // new 'flutter_module/.android/include_flutter.groovy'// new )) // new include ':flutter_module' project(':flutter_module').projectDir = new File('../flutter_module')
4.设置app下的 build.gradle
compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 }
5.添加Flutter依赖
implementation project(':flutter')
一会再补充 要下班了
更多相关内容 -
混合移动APP跨平台混合开发综述.pdf
2021-08-26 20:34:53混合移动APP跨平台混合开发综述.pdf -
uniapp中前端如何和原生混合开发开发app
2021-01-20 08:40:36需要与原生进行混合开发的时候,前端应该怎么做? 1.先引入js unfile.js 下载unifile.js的链接 2.调用方法,在要使用原生技术的页面进行引入 import bridge from '../../common/unfile.js' 3.就可以使用了 //调用... -
快速搞定移动端混合开发基础
2021-01-03 17:24:08一、混合开发介绍 1.1、什么是混合开发? 1.2、混合开发优缺点 1.3、混合开发应用场景 1.4、了解混合开发的意义 二、混合开发的核心技术 2.1、混合开发核心技术——JSBridge 2.2、混合开发主流技术框架 2.3、... -
Android开发方式之Java+html+javascript混合开发
2020-10-22 04:24:50主要为大家详细介绍了Android开发方式的其中一种Java+html+javascript混合开发,感兴趣的小伙伴们可以参考一下 -
HybridAPP混合开发的一些经验和总结
2021-02-24 06:46:56移动应用开发的方式,目前主要有三种:NativeApp:本地应用程序(原生App)WebApp:网页应用程序(移动web)HybridApp:混合应用程序(混合App)图1:三种移动应用开发方式如图1所示,三种移动应用开发方式具体 -
Android+Html5混合开发仿微信朋友圈
2021-01-21 19:50:58不过丑话说在前头, 咱们的仿朋友圈可是”低仿”, 只是把混合开发的大致流程说说, 界面可能不堪入目…见谅.. 开发环境 Android Studio 2.2.2 JDK1.7 API 24 Gradle 2.2.2 jQuery v3.1.1 相关知识点 webView的使用 ... -
《微信公众平台网页开发实战HTML5+JSDK混合开发解密》试读
2017-06-15 15:47:21微信已经全面支持公众平台内的网页开发,并且提供了网页开发样式库、JSSDK库和网页内支付...《微信公众平台网页开发实战――HTML5+JSSDK混合开发解密》一书立志于帮助微信开发者更好地学习微信中的网页开发和JSSDK库。 -
hybrid混合开发
2017-11-28 19:42:32什么是混合开发,混合开发中weex,react native ,ionic 的个性 -
基于Ionic的App跨平台混合开发技术的研究.pdf
2021-08-26 21:21:03基于Ionic的App跨平台混合开发技术的研究.pdf -
TCGXH 008-2021 村级工业园升级改造模式 国有集体混合开发
2022-02-15 10:37:14TCGXH 008-2021 村级工业园升级改造模式 国有集体混合开发 -
Flutter 混合开发
2021-11-18 09:41:22Flutter 混合开发在Flutter 开发中混合的形式主要有两种
- 作为独立的页面 进行维护
- 可以相互嵌套
原生集成 Flutte 混合开发的步骤:
- 创建 Flutter module
- 添加 Flutter module 依赖(为原生项目添加 Flutter 依赖)
- 在 Java/Object-c 中调用 Flutter module
- 编写 Dart 代码
➠ 运行项目
➠ 热重启 / 热加载
➠ 调试代码
➠ 发布应用
Android:
1. 创建 Flutter module
首先你得有 原生 android 工程; 路径如下:D:\MineGit\flutter_trip\native_peoject
首先切换到 原生工程的上一级目录;并且 创建一个flutter模块
C:\Users\user>D: C:\Users\user>cd D:\MineGit\flutter_trip\native_peoject D:\MineGit\flutter_trip\native_peoject>cd.. D:\MineGit\flutter_trip>flutter create -t module flutter_module_john
像这样 flutter 模块就建好了:
文件结构如下:
上面就是 flutter_module_john 模块中的文件结构; 你会发现它里面包含 .android 与 .ios,这两个文件夹是 隐藏文件夹(mac 中你必须打开隐藏开关 才能看到文件夹),也是 flutter_module_john 宿主工程:
- .android -> flutter_module_john模块 的Android 宿主工程
- .ios -> flutter_module_john模块 的 IOS 宿主工程
- lib -> flutter_module_john模块 的 Dart 部分的代码
- pubspec.yaml -> flutter_module_john模块 项目依赖配置文件
因为宿主工程的存在, 我们这个 flutter_module 在补额外配置的情况下是 可以独立运行 的, 通过安装了 Flutter 与 Dart 插件的 AndroidStudio 打开这个 Flutter_module 项目,通过运行按钮就能直接运行它
能顺利运行到手机上面 就说明这个模块 创建的没问题
2. 添加 Flutter module 依赖
这里我们将 刚刚创建的 Flutter_module 加入到 Android 原生工程中:
1. settings.gradle 首先我们修改项目
setBinding(new Binding([gradle:this])) evaluate(new File( settingsDir.parentFile, 'flutter_module_john/.android/include_flutter.groovy' ))
就是把 flutter_module 模块添加到 项目中;注意项目路径的写法;得写成你自己的路径;
下面截图中的两行 是编辑器自己给我添加的 可以移除
检查下 minSdkVersion 版本最低 16(flutter 支持的最低版本)
2. build.gradle (app)
添加工程依赖
3. 在 Java 中调用 Flutter module
在 Java 中调用 Flutter 模块的两种方式:
- 使用 Flutter.createView API 方式创建 (作为页面的一部分)
Flutter.createView() 已经被官方弃用 Flutter 1.12版本废弃了io.flutter.facade包导致的;这里使用 FlutterFragment 来创建 FlutterFragment.createDefault();
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.test).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //没有指定路由 传值;只能调到 默认路由(开始界面) // FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); // fragmentTransaction.add(R.id.someContainer, FlutterFragment.createDefault()); // //fragmentTransaction.replace(R.id.someContainer, FlutterFragment.createDefault()); // fragmentTransaction.commit(); //指定路由并且传值 FlutterFragment flutterFragment = FlutterFragment.withNewEngine() .initialRoute("{name:'devio',dataList:['aa','bb','bb']}") .build(); getSupportFragmentManager() .beginTransaction() .replace(R.id.someContainer, flutterFragment) .commit(); } }); } }
原生传值可以直接 接收到参数:
import 'dart:ui' as ui;
final String initParams = ui.window.defaultRouteName;
编辑的时候:编辑原生原生代码只能修改原生的代码;编辑dart 代码; Flutter_module lib 文件夹里面的代码;直接运行 Flutter_module;只能运行 Flutter_module里面的工程;
4. 热重启 /重启加载
大家知道我们在做 Flutter 开发的时候,它自带热 重启/重新加载的功能, 但是你可以能会发现;在混合开发中 Android 项目集成 Flutter 项目的时候 重启/重新加载不起作用了;那在混合开发中怎么启用 重启/重新加载:
- 手机连接我们的 电脑
- 关闭我们的应用;然后 运行 flutter attach;(在对应的 flutter_module 项目根路径)
- 当出现 “Waiting for a connection from Flutter on PACM00... 的时候打开我们原生App;并且进入我们的 Flutter 界面
然后会提示同步信息和 命令信息 (因为我有两个手机连接电脑;这里会有一个选择手机的步骤)
D:\MineGit\flutter_trip\flutter_module_john>flutter attach Multiple devices found: SM G9650 (mobile) • 21a9f15c1d037ece • android-arm64 • Android 10 (API 29) PACM00 (mobile) • JZU8PB9DQOG68D6D • android-arm64 • Android 10 (API 29) [1]: SM G9650 (21a9f15c1d037ece) [2]: PACM00 (JZU8PB9DQOG68D6D) Please choose one (To quit, press "q/Q"): 2 Waiting for a connection from Flutter on PACM00... Syncing files to device PACM00... 7.4s Flutter run key commands. r Hot reload. R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). Running with sound null safety
现在你只要 修改完毕 dart 代码保存;然后在 按 r 键就能立马看到效果了
5. 调试 dart 代码
在混合开发模式下, 如何更好的调试我们的代码:
- 关闭App(这一步很关键)
- 点击 AndroidStudio 的 Flutter Attch 按钮(前提是 安装过flutter 与 dart 插件)
- 启动App
打上断点 就能进入 对应的断点 了
6. 发布应用 配置好证书
signingConfigs {//添加 release { storeFile file(MYAPP_RELEASE_KEY_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' signingConfig signingConfigs.release//添加 } }
直接运行命令:
>gradlew assembleRelease
或者:
打出来的APK 有:
在这里可以设置:armeabi-v7a
指定 APK 只支持32位 类型 减小包体
plugins { id 'com.android.application' } android { compileSdkVersion 30 buildToolsVersion "30.0.3" defaultConfig { applicationId "com.john.nativetoflutter" minSdkVersion 16 targetSdkVersion 30 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" ndk { abiFilters 'armeabi-v7a' // abiFilters "armeabi", "armeabi-v7a", "x86_64", "x86" } } signingConfigs {//添加 release { storeFile file(MYAPP_RELEASE_KEY_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' signingConfig signingConfigs.release//添加 } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'com.google.android.material:material:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' testImplementation 'junit:junit:4.+' androidTestImplementation 'androidx.test.ext:junit:1.1.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' implementation project(':flutter') }
IOS: 原生嵌入 Flutter
- 首先你得有原生工程
- 你的 Mac 正确配置 Flutter 所需要的环境tt
- 你得有 Flutter_Module 工程;我是直接使用上面 android 功能已经创建好的;
- 因为 Flutter 有依赖 pod 管理插件;
Pod: Podfile
# Uncomment the next line to define a global platform for your project platform :ios, '9.0' flutter_application_path = '../flutter_module_john' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') target 'native_project_ios' do # Comment the next line if you don't want to use dynamic frameworks install_all_flutter_pods(flutter_application_path) # Pods for native_project_ios target 'native_project_iosTests' do inherit! :search_paths # Pods for testingå end target 'native_project_iosUITests' do # Pods for testing end end
Flutter Module 里面的 .ios 和 .android 是一个隐藏文件夹; mac 上面想要看见隐藏文件夹;shift + commond+ .
这里自己 根据自己的目录进行配置就可以了;然后写一个按钮 实现跳转 传值:
#import <Flutter/Flutter.h> /// - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIButton *button =[UIButton buttonWithType:UIButtonTypeCustom]; [button addTarget:self action:@selector(handleButtonAction) forControlEvents:UIControlEventTouchUpInside]; [button setTitle:@"Flutter " forState:UIControlStateNormal]; [button setBackgroundColor:[UIColor redColor]]; button.frame = CGRectMake(80, 210, 160, 40); [self.view addSubview:button]; } - (void)handleButtonAction{ FlutterViewController *flutterviewController =[FlutterViewController new]; [flutterviewController setInitialRoute:@"{name:'devio',dataList:['aa','bb','bb']}"]; [self presentViewController:flutterviewController animated:true completion:nil]; }
-
Flutter与原生混合开发
2022-02-04 16:18:10在说flutter与原生的混合开发之前,先和初学flutter的小伙伴提个建议,建议大家刚开始的时候先在纯flutter的项目上练习flutter的相关技术,等练习的差不多了, 再练习flutter与原生的交互。主要原因是:与原生...在说flutter与原生的混合开发之前,先和初学flutter的小伙伴提个建议,建议大家刚开始的时候先在纯flutter的项目上练习flutter的相关技术,等练习的差不多了, 再练习flutter与原生的交互。主要原因是:与原生交互的时候会有很多环境的问题,比较折磨人。容易让人产生畏难情绪。
由于国内flutter做的比较多的一般是原生做安卓的小伙伴,而且市面上的书籍作者也是做安卓出身,书中的demo也是安卓的例子,安卓这一块我就不再多说了,重点说说flutter与iOS进行交互。集成到项目
将flutter项目集成到原生项目中,我这边参考的是官方的推荐方式
Flutter module
具体步骤如下:cd some/path/ flutter create --template module my_flutter
在 my_flutter 模块,目录结构和普通 Flutter 应用类似:
my_flutter/ ├── .ios/ │ ├── Runner.xcworkspace │ └── Flutter/podhelper.rb ├── lib/ │ └── main.dart ├── test/ └── pubspec.yaml
参考网址:https://flutter.cn/docs/development/add-to-app/ios/project-setup
podfile的配置
1,在 Podfile 中添加下面代码:
flutter_application_path = '../my_flutter' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
2,每个需要集成 Flutter 的 Podfile target,执行 install_all_flutter_pods(flutter_application_path):
target 'MyApp' do install_all_flutter_pods(flutter_application_path) end
3,执行
pod install
执行完这些以后,你已经将flutter项目集成到的原生的工程里面了。
备注:my_flutter这个名字大家根据自己的需求改,另外podfile下的路径记得不要弄错了。Xcode相关的配置
1,环境变量
打开my_flutter路径下的.iOS文件夹,然后打开runner.xcworkspace,在buildsetting里面可以看到如下设置。
User-Defined这些配置里FLUTTER_ROOT特别重要,你需要在你的原生项目中把这个根据你自己的fluttersdk路径进行配置。不然的话,联调会有问题,flutter attach不成功
2,运行脚本配置
在Xcode的runScript中还需要配置一些脚本,具体如下:
具体脚本如下:# Type a script or drag a script file from your workspace to insert its path. /bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed /bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" thin
3,真机编译bitCode问题
直接操作如下:
配置完这些,后续运行,调试项目基本不会有太大的问题了。交互的形式
flutter与原生进行交互主要有如下几种方式:
FlutterMethodChannel
调用方法(method invocation)一次通讯
FlutterBasicMessageChannel
传递字符串&半结构化的信息。备注:持续通讯
FlutterEventChannel
用于数据流(stream)的通讯。备注:持续通讯
由于FlutterMethodChannel在项目中使用较为频繁,我下面重点说下FlutterMethodChannel,其他两个大家感兴趣的话,搜下即可,比较简单。
1,AppDelegate准备
需要配置引擎,同时是让flutter和原生app的生命周期建立绑定关系
通过AppDelegate通过集成FlutterAppDelegate来讲原生app的生命周期和flutter模块建立了绑定关系,flutterEngine需要初始化一下,同时需要将插件注册到引擎里。2,原生调用flutter方法
原生调用flutter方法之前需要先创建一个flutterVC,具体如下:
红框下面的代码是处理flutter调用原生方法对应的处理代码。
调用flutter方法代码如下:/// 选择画笔颜色 func selectPencilColor() -> () { selectColorType = 1 let cssString = self.pencilBrush.style.lineColor.cssString() methodChannel!.invokeMethod("currentColor", arguments:cssString) present(flutterVC!, animated: true, completion: nil) }
Flutter端接收到原生的消息该如何处理呢。
3,flutter调用原生方法
flutter调用原生方法比较简单,具体如下:methodChannel.invokeListMethod("pickColor",currentColor);
通过上面的步骤我们基本完成了原生向flutter,flutter向原生的通信。感兴趣的小伙伴也可以对这个通信进一步的封装,阿里也封装了相关的框架,FlutterBoost感兴趣的小伙伴可以看下。
参考博客:https://www.freesion.com/article/7932966090/
混合开发的一些建议
尽可能以模块的形式进行交互,页面级,view级的交互,根据团队的规模,以及人力情况酌情考虑。还有就是flutterVC,以及flutter引擎,如果没有必要,尽量避免反复创建,影响性能。当然了如果flutter模块使用频次较低,并且重要程度没那么高,也可以用的时候再去创建。
我这边创建了一个QQ交流群,欢迎有志于进行flutter学习的小伙伴进群交流学习。
-
小米的混合开发框架实战.pdf
2019-08-28 22:10:38小米董红光在GMTC2017全球移动技术大会上做了主题为《小米的混合开发框架实战》的分享,就MIUI直达服务平台介绍,技术选型,应用框架架构介绍进行了深入的分享。 -
混合开发搭建教程
2018-02-24 09:13:54cordova,混合开发,IOS 和Android 开发的混合,主要包括Cordova的搭建和第一个demo案例很实在的项目 -
混合开发几种IDE的技术介绍
2017-05-16 19:49:10混合开发几种IDE的技术介绍 -
基于iOS系统的混合开发模式移动车险App.pdf
2019-06-26 12:04:44基于iOS系统的混合开发模式移动车险App.pdf -
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生(安卓)交互、webpack打包优化...
2021-07-13 09:02:40H5混合开发 混合开发、原生开发、H5开发的区别: 简述:主流APP:原生APP、H5(webapp)、混合APP,相对应的定制研发即原生开发、H5开发、混合开发 原生APP开发优缺点: 可以访问手机的所有功能,可实现功能最...H5混合开发
混合开发、原生开发、H5开发的区别:
简述:主流APP:原生APP、H5(webapp)、混合APP,相对应的定制研发即原生开发、H5开发、混合开发
原生APP开发优缺点:
- 可以访问手机的所有功能,可实现功能最齐全
- 运行速度快、性能高、用户体验较好
- 兼容性高
- 比较快速的使用设备端提供的接口,处理速度上有优势
- 开发周期长、成本较高,可移植性较差
- 内容有限制
- 获得新版本必须要用户重新手动下载更新
WEB APP开发:
简述:HTML5开发,利用WEB技术进行的APP开发。可以在手机浏览器上打开的网站
优缺点:
- 支持的设备范围广,一套代码可以同时在安卓、IOS、Windows上运行
- 开发成本低
- 无内容限制
- 适合展示大量的文字信息,且样式比较丰富的页面
- 用户可以直接使用最新版本(自动更新),而无需手动下载更新
- 不能直接访问手机硬件和连线缓存
- 对连网要求较高,离线不能做任何操作
- 功能有限
混合开发(原生+H5):
简述:将原生的代码利用WebView插件或者其他框架为H5提供容器,程序主要的业务实现、界面展示都是由H5完成
优缺点:
- 开发效率高、统一套代码安卓、IOS基本上都可以使用
- 更新和部署都比较方便,每次升级版本只需在服务器端升级即可,不需上传到APP Store进行审核
- 代码维护方便,版本更新快
- 比Web版实现的功能多
- 可以离线缓存
- 加载缓慢,网络要求高:混合APP数据需要全部从后台服务器获取,每个页面都需要重新加载,因此打开速度慢,用户体验不是很好
- 既懂原生又懂H5开发的工程师较少
目前或者开发的两种模式:
1、原生主导开发模式:需要安卓和IOS开发人员,整个APP既有原生开发又有H5开发,在需要H5页面时由原生开发人员实现内联
2、H5主导的开发:只需H5开发工程师,借助一些封装好的工具实现应用的打包和调用原生设备的功能,比如Builder的云端打包功能
如何区分H5开发和原生开发:
页面下拉刷新时,如果没有明显的刷新现象,则是原生开发;H5会闪一下屏
下拉页面的时候显示网址就是H5开发
H5页面的开发布局
必不可少的meta
`<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">`
flex布局(推荐)
语法:
-
伸缩容器 display:flex
-
伸缩流方向 flex-direction : row | row-reverse | column | column-reverse解释:reverse反向
-
伸缩换行flex-wrap:适用于伸缩容器,也就是伸缩项目的父元素,主要用来定义伸缩容器里是单行还是多行显示。语法:flex-wrap:nowrap | wrap | wrap-reverse
-
主轴对齐justify-content:flex-start | flex-end | center | space-between | space-around解释:主轴对齐适用于伸缩容器,主要用来定义伸缩项目沿着主轴线的对齐方式。其中:flex-start:伸缩项目向一行的起始位置靠齐
space-between:伸缩项目会平均分布在行里。第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行中的终点位置。 space-around:伸缩项目会平均分布在行里,两端保留一半的空间。
-
侧轴对齐align-items和align-self
-
伸缩项目在侧轴的对齐方式,主要由属性align-items控制
-
语法:align-items:flex-start | flex-end | center | baseline | stretch解释:baseline:根据伸缩项目的基线对齐,基线根据伸缩项目的内容计算得到。stretch:默认值,伸缩项目拉伸填充整个伸缩容器
-
伸缩项目自身在侧轴的对齐方式,主要由属性align-self控制属性值同align-items,实际上相当于特殊给自己定义对齐方式
-
-
堆栈伸缩行align-content
-
语法:align-content : flex-start | flex-end | center | space-between | space-around | stetch解释:stetch:默认值,各行将会伸展以占用额外的空间这个属性只有伸缩项目有多行时才生效,这种情况只有flex-wrap为wrap时,并且没有足够的空间把伸缩项目行放在同一行中。也就是这个属性将对每一行起作用而不是每个伸缩项目。
-
-
伸缩性flex
-
语法:flex : none | flex-grow
-
-
显示顺序order
-
语法:order : number
-
解释:改变伸缩项目出现在源文档的次序。eg:order:1 ; order : 2伸缩容器会以序号最小的组开始布局,在同一个组里的伸缩项目依据源文档里的次序布局
-
百分比布局
rem布局(px转rem插件)
px2rem 结合lib-flexible 1、安装: npm i lib-flexible --save npm i px2rem-loader --save-dev 2、引入 在main.js中引入 import 'lib-flexible' 3、配置 vue.config.js中 // css: module.exports = { chainWebpack: config => { config.module .rule('css') .test(/\.css$/) .oneOf('vue') .resourceQuery(/\?vue/) .use('px2rem') .loader('px2rem-loader') .options({ remUnit: 75 }) } // less: .rule('less') .test(/\.less$/) .oneOf('vue') .resourceQuery(/\?vue/) .use('px2rem') .loader('px2rem-loader') .before('postcss-loader') .options({ remUnit: 75 }) .end() 4、使用:750px的设计图量多少px就直接写多少px即可 5、补充: (1)按照px来编写都会转化成rem的形式,但是有些地方我们不想转换,可以用下面两种方法。 a.在px后面添加/*no*/或者单位写成大写的PX,不会转化px,会原样输出。 — 一般border需用这个 b.在px后面添加/*px*/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个 * postcss-pxtorem 结合lib-flexible(推荐) 1、安装:npm install postcss-pxtorem -D 2、vue.config.js中配置
css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue : 75, // 换算的基数 selectorBlackList : ['weui','mu'], // 忽略转换正则匹配项 propList : ['*'], }), ] } } }
3、rem函数:结合lib-flexible(推荐)
// 设置 rem 函数 function setRem () { // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //得到html的Dom元素 let htmlDom = document.getElementsByTagName('html')[0]; //设置根元素字体大小 htmlDom.style.fontSize= htmlWidth/10 + 'px'; } // 初始化 setRem(); // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }
px布局
只要结合百分比布局和弹性盒布局使用。手机端视觉体验上差别不大,根据项目具体情况选择技术方案,一般border边框和字体大小可以使用px
开发注意事项、H5与原生(安卓)交互
开发注意事项
1、H5开发兼容性
-
transition 谨慎使用
-
一定要遵守url传参规范url标准形式:特殊字符:,"" {} {name:xxx} ## 空格 等等问题:IOS有可能h会出现白屏
2、与原生App"互斥"的功能
-
下拉刷新(推荐由H5的开发工程师实现)
-
overflow-y
H5与原生(安卓)交互:
-
android和h5交互
window.control.callHandler("事件名","参数")
1.打开带小程序标题新页面
事件名js_wx 参数是JSON.stringify({"url": path})
例子:打开百度网址的新页面window.control.callHandler("js_wx", JSON.stringify({
"url": "https://www.baidu.com/" }))
2.打开本地h5页面(主要针对需要打开word\pdf文件)
事件名js_native 参数是JSON.stringify({"name": name})例子:打开日报window.control.callHandler("js_native", JSON.stringify({
"name": "dailyReport" }))
3.token失效退出登录事件名token_invalid 参数是""window.control.callHandler("token_invalid","")
4.控制首页隐藏、显示底部栏window.control.callHandler("bottom_title","show") 显示window.control.callHandler("bottom_title","invisible") 隐藏
5.h5透明标题 结合1方法url参数带transparentTitle=1
-
IOS与H5交互window.webkit.messageHandlers.js_wx.postMessage(JSON.stringify({
'url': url
}))
webpack打包优化解决方案
1、根据插件查看包的大小和体检,进行针对性分析--方式一
安装:npm install webpack-bundle-analyzer --save-dev
配置:
vue.config.js
module.exports = { chainWebpack: config => { if (process.env.use_analyzer) { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) } } }
package.json
{ "scripts”: { ... "analyzer": "use_analyzer=true npm run serve” }
2、CDN引入--方式二
-
index.html cdn引入
vue.config.js
configureWebpack: config => { // devtool: 'source-map' // 优化,采用外部CDN config.externals = { 'vue':'Vue', 'element-ui':'ELEMENT', 'echarts':'echarts' } },
3、Gzip压缩--方式三
1、安装依赖:npm install --save-dev compression-webpack-plugin
2、vue.config.js进行配置
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css'] configureWebpack: config => { // devtool: 'source-map' if (isProduction) { config.plugins.push(new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }) ) } }
H5调试工具、webview
H5调试工具:
- vConsole安装:npm install vconsole
在mian.js文件里引入: import Vconsole from 'vconsole'
const vconsole = new Vconsole Vue.use(vconsole)
- eruda
参考网址:GitHub - liriliri/eruda: Console for mobile browsers
npm install eruda
在 main.js里引入:
- import erdua from 'eruda'
- import erudaDom from 'eruda-dom'
erdua.init()
Vue.prototype.$echarts = echarts
webview:
-
概念:其实webview就是用来展示的view组件,他是使用webkit引擎来进行展示,它具有前进后退放大缩小等功能,简单来说,webview就相当于在你的手机中安装一个高性能的webkit浏览器。
-
webview的初始化浏览器:网络请求耗时->服务端处理->渲染耗时->完成webview:webview初始化->网络请求耗时->服务端处理->渲染耗时->完成
-
H5与原生体验的融合-蘑菇街混合开发平台的优化实践-王兴楠
2016-08-23 14:47:08H5与原生体验的融合-蘑菇街混合开发平台的优化实践-王兴楠 混合开发平台介绍(Hybrid Development Platform) • HDP的优化实践: • 基于独立内核的体验优化,秒杀WebView • 动态跨平台框架的研发与应用,让H5的体验... -
flutter混合开发怎么调试
2022-03-01 16:48:07大家在写纯Flutter应用的时候,知道是有热重启/重新加载功能的,但是在做混合开发的过程中,你会发现热重启/重新加载功能失效了。那么如何在混合开发中开启热重启/重新加载功能呢? 首先接入我们的设备或者模拟器 ... -
关于混合开发
2020-10-08 14:02:19app原生开发与app混合开发有什么区别? 一、app原生开发 原生开发(Native App开发),在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发,比如Android是利用Java、Eclipse、... -
Android Hybrid混合开发
2020-10-26 11:43:22关于混合开发常问道的问题: Android如何嵌套h5页面? h5一般调用哪些Android哪些接口功能? Android如何调用网页(js)功能? 问题1.ndroid如何嵌套h5页面答案: 当我们用vue开发完项目,执行nmp run build打包... -
Android与Flutter混合开发
2021-06-05 15:15:44最近项目中需要在Android原生的应用中添加一些功能,时间紧,任务重,考虑再三,Android与Flutter混合至少能节省30%的开发时间,别无他选。大致跳转如上图所示,在Android页面中有些按钮需要在Android中跳转,而一些... -
RN与android混合开发及RN调用原生方法
2017-04-06 10:56:19RN与android混合开发及RN调用原生方法 -
Flutter混合开发实践
2022-01-07 18:46:18需要具有一定的Dart语言基础本课程的学习方式建议为集中一天,边看视频边写代码本课程支持实时在线答疑与项目开发指导本课程内容包含1、Flutter的环境配置2、Flutter项目的入门3、Flutter与原生项目的混合配置4、... -
安卓app开发之在WebView中通过...这是hybrid app混合开发的核心技术所在----js和nat_安卓禁止浏览器调用app
2021-01-11 22:23:56安卓app开发之在WebView中通过javascript调用android中的java代码.这是hybrid app混合开发的核心技术所在----js和native代码互相调用 -
H5混合开发与MUI框架教学视频
2020-12-14 21:52:44H5混合开发与MUI框架教学视频,高清录制,H5混合开发与MUI框架教学视频,高清录制。H5混合开发与MUI框架教学视频 -
原生开发、H5开发与混合开发的区别
2019-12-04 16:01:59目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧... -
浅谈App Hybrid混合开发的五种方案
2022-02-04 19:44:46在移动互联网时代来临之后,以微信、淘宝为代表的app迅速占据了我们的手机,诺基亚的迅速灭亡,苹果手机异军突起,以iOS、安卓的客户端开发需求迅速增大,导致iOS、安卓的工程师们成了香饽饽,工资高,工作好找。...