Weex开发之WEEX-EROS开发踩坑(小结)


Posted in Javascript onOctober 16, 2019

随着Weex跨平台技术的持续火热,一时间涌现出了一大批基于Weex的开源解决方案,Weex Eros就是这么一个面向前端Vue的开源APP解决方案。 目前,如果直接使用Weex框架开发应用会存在很多痛点,诸如初始化启动的环境问题、项目工程化问题、版本升级与版本兼容问题和不支持增量更新等,而Weex Eros等开源解决方案能对上述问题进行有效的解决。 Weex Eros的定位不是组件库,而是基于Weex封装的面向前端Vue的一整套APP开源解决方案,它关心的是整个APP项目。在Weex的强大支持下,用一份Vue代码即可编译出iOS、Android两端原生的app,并且通过Weex Eros内置的热更新逻辑和开源的服务器逻辑,开发的APP还具有热更新能力。

weex-eros是weex的一套解决方法,使用vue语法糖,对于前端开发者来说可以轻松上手,文档如下:
weex:https://weex.apache.org/zh/
weex-eros:https://bmfe.github.io/eros-docs/#/
分享一篇入门文章:https://zhuanlan.zhihu.com/p/51302413

由于weex-eros安卓端久久不更新,导致开发过程中安卓端总会有那么些问题,需要大家动动手改改SDK源码,可能需要对原生知识进行补充或者定制开发。

本文针对EROS 2018.10.11 更新的版本进行的介绍,原文链接:WEEX-EROS开发小笔记

1,屏幕旋转问题

在android/WeexFrameworkWrapper/app/src/main/AndroidManifest.xml这个文件中,
控制屏幕旋转,需要添加:

android:screenOrientation="user"
android:configChanges="orientation|keyboardHidden|screenSize"
  • screenOrientation表示用户当前首选方向,如果值是'sensor',关闭屏幕旋转也是会旋转,会根据重力传感器切换。
  • configChanges用于配置横竖片切换,配置configChanges为以上配置时,切屏不会重新调用各个生命周期,只会执行onConfigurationChanged方法,Activity中的数据不会被销毁。

2,键盘挡住输入框问题

防止键盘挡住输入框,自动将页面上顶,需要添加如下配置:

android:windowSoftInputMode="adjustPan"

具体可以参考下图:

Weex开发之WEEX-EROS开发踩坑(小结)

3,点击对话框背景或按返回按钮对话框消失

使用Android studio打开WEEX-EROS的Android源码,然后再源码中查找ModalManager.java这个SDK源码文件,将下图圈起来的位置设置为false即可,对应的是setCancelabel(calcel)这个属性。

Weex开发之WEEX-EROS开发踩坑(小结)

WEEX的Picker模块如果选项多的话会出现默认选项有多个的情况,需要将Picker模块的SDK源码替换成官方github上的最新源码,官方github源码地址。

4,iOS屏幕旋转

EROS本身是不支持横屏开发的,如果要进行横屏开发,可以勾选Landscape Left和Landscape Right两个选项,如下图。

Weex开发之WEEX-EROS开发踩坑(小结)

5, 修改包名修改原生Android工程包名

原生Android工程在打包的时候需要修改Android原生工程的包名,对于WEEX-EROS项目来说,只需要修改Android的gradle.properties的APPLICATION_ID即可。

Weex开发之WEEX-EROS开发踩坑(小结)

修改原生iOS工程包名

iOS原生的包名比较好修改,如下图:

Weex开发之WEEX-EROS开发踩坑(小结)

另外,Android修改完SDK源码后需要对文件夹做修改才可以提交到git上,不然修改完没提交到git,下次拉下来,重新安装Android依赖就白改了,打开文件夹下的.gitignore文件,删除wxframework和sdk,然后添加如下配置:

# eros 
platforms/android/WeexFrameworkWrapper/app/src/main/assets/bundle.zip 
platforms/android/WeexFrameworkWrapper/app/src/main/assets/bundle.config
platforms/ios/WeexEros/WeexEros/bundle.zip 
platforms/ios/WeexEros/WeexEros/bundle.config
!.gitkeep
ip.txt

然后分别进入platforms/WeexFrameworkWrapper/nexus、platforms/WeexFrameworkWrapper/wxframework文件夹下执行rm -rf .git清除原本的git信息,之后就可以将Android的源码提交到git仓库里了,之后拉下来不用再安装Android依赖了。

6, CocoaPods多个版本切换问题

EROS推荐1.4.0,因为当前使用的WXDevtool插件(1.5.3)基于1.4.0,个人仅发现此插件有问题,可以使用如下的版本来查看本地的CocoaPods版本。

gem list --local | grep cocoapods

Weex开发之WEEX-EROS开发踩坑(小结)

然后,可以使用下面的命令来查看当前系统默认使用CocoaPods版本。

pod --version

如果涉及多个CocoaPods版本,那么怎么管理CocoaPods呢?此时,我们需要安装一个Bundler管理工具。

gem install bundler

使用方法

1.到Podfile文件所在目录输入以下命令,创建Bundler的配置文件Gemfile。

bundle init

2.将Gemfile文件修改成以下内容,版本号可根据自己的需求修改。

Weex开发之WEEX-EROS开发踩坑(小结)

3.最终,如果要使用指定的CocoaPods去安装插件只需要在pod命令上加上bundle exec前缀。

bundle exec pod update

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
Date对象格式化函数代码
Jul 17 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 #Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 #Javascript
关于JS模块化的知识点分享
Oct 16 #Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 #Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 #Javascript
微信小程序如何实现在线客服功能
Oct 16 #Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 #Javascript
You might like
浅析PHP水印技术
2007/02/14 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
详解node.js 事件循环
2020/07/22 Javascript
python读取注册表中值的方法
2013/04/08 Python
python实现ip查询示例
2014/03/26 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
七年级地理教学反思
2014/01/26 职场文书
保护环境建议书
2014/03/12 职场文书
计划生育标语
2014/06/23 职场文书
基层党员对照检查材料
2014/09/24 职场文书
委托书格式要求
2015/01/28 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python