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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 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用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python列表与元组详解实例
2013/11/01 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
遗传算法python版
2018/03/19 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python中wheel的用法整理
2020/06/15 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
公司采购主管岗位职责
2014/06/17 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python