适合前端Vue开发童鞋的跨平台Weex的使用详解(5)

Weex 官网中 image 图片组件显示项目目录下图片,src 地址直接写成相对路径,如下所示;但是这种写法存在问题,它只支持 web 端的显示,在 Android 端是无法显示的,找不到对应图片。

<image ref="poster" src="https://www.jb51.net/path/to/image.png"></image>

(2)Android/IOS 端显示本地图片

Weex 没有在将 vue 编译成 Android 组件时,对应将图片放置到 Android 对应的目录下,所以我们只好自己将图片手动再放置一份,其中 Android 端需要额外将图片放在 /platforms/android/app/src/main/res/drawable-xxhdpi ,IOS 放入xcode 底下的 /Source/images/下 ,然后我们在代码逻辑中,根据环境判断现在是 Web 环境、Android 环境或者 IOS 环境,再对应的获取对应目录下的图片(暂时只能做到这种程度了...),如下代码所示:

const ICON_URL = { Web: `${WEB_IMAGE_URL}`, android: `local:///${pureName}`, iOS: `local:///filePng/${pureName}${suffixName}` } return ICON_URL[CUR_RUN_PLATFORM];

五、编译 Android apk

Android apk 打包分 debug 版和 release 版,通常所说的打包指生成 release 版的 apk,release 版的 apk 会比debug 版的小,release 版的还会进行混淆和用自己的 keystore 签名,以防止别人反编译后重新打包替换你的应用。 下面我们主要介绍如何在 Android Studio 中对 weex 项目进行打包。

5.1、Android 平台目录

Android Studio 打开 Android 工程,目录为:weex 项目 /platforms/android 。

5.2、常规的 AS 打包分为两种

一种是没有 “.jks” 文件的打包
一种是有 “.jks” 文件的打包
注:.jks” 文件 类似 apk 身份证;

5.3、没有 “ .jks ” 文件的打包

(1)打包步骤如下截图:

适合前端Vue开发童鞋的跨平台Weex的使用详解


适合前端Vue开发童鞋的跨平台Weex的使用详解


(2)我们点击选择 【Create new】创建jks

适合前端Vue开发童鞋的跨平台Weex的使用详解


(3)填写 key 的相关信息

适合前端Vue开发童鞋的跨平台Weex的使用详解


(4)点击 OK 之后,可以看到如下信息已被自动填充,并点击打包即可。

适合前端Vue开发童鞋的跨平台Weex的使用详解


适合前端Vue开发童鞋的跨平台Weex的使用详解


(5)等待打包完成后,就可以查看打包好的 apk 文件

适合前端Vue开发童鞋的跨平台Weex的使用详解

六、Weex 开发总结

6.1、官网经常无法访问

Weex 官网经常出现无法访问的情况,频率大概一周至少一次;这就很影响开发效率了,因为在开发过程中需要经常查看官网的写法、说明等,如果访问不了,则会造成一定程度的开发 block。

6.2、官网文档粗糙

Weex 官网的文档比较粗糙,如果没有比较好的前端和移动端原生开发知识储备的话,看官网的文档就很吃力了,官网很多讲解写的非常简单,都默认你同时熟练前端和移动端原生开发,而且同时有较好前端和移动端原生开发人员应该在业界还比较少吧。

6.3、生态贫瘠

Weex 生态是真的贫瘠,除了阿里自己出产的组件库 weex-ui 外,其它的相关插件几乎找不到,有也是少于100个 star 的,例如我在项目开始前设计的一些功能:拍照、图片选择上传、语音录入、通讯、定位、文件预览等等移动端的特有功能,都没有插件,都需要自己去写 Android 的原生代码,那这时就失去了利用框架提高开发效率的意义;生态跟 react-native 差的真不是一丁半点,而是根本不是一个量级。

6.4、是否两个 Weex 版本

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ce5cd2ee401f214ba90fb2cd4df861f7.html