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动态调整iframe高度的代码
Apr 10 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
详解webpack babel的配置
Jan 09 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
适合前端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将字符串转换成16进制的方法
2015/03/17 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
js的一些常用方法小结
2011/06/29 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python实现划词翻译
2020/04/23 Python
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python之PyUnit单元测试实例
2014/10/11 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
PHP如何自定义函数
2016/09/16 面试题
超市重阳节活动方案
2014/02/10 职场文书
车辆转让协议书
2014/04/15 职场文书
民事授权委托书范文
2014/08/02 职场文书
2014年护理部工作总结
2014/11/14 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS