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代码
Dec 26 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 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实现ping
2006/10/09 PHP
PHP学习之整理字符串
2011/04/17 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
PyQt5实现简单的计算器
2020/05/30 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
材料工程专业毕业生求职信
2014/03/04 职场文书
初中班主任评语大全
2014/04/24 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
义诊活动通知
2015/04/24 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
红色电影观后感
2015/06/18 职场文书
2019各种承诺书范文
2019/06/24 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python