Android text view 加下划线

最近公司的项目里要求开发一款具有三维应用的App项目,本来对于以前从未开发过支持三维APP前端程序员来说无疑是个挑战但既然有了这样的需求那就欣然地接受下来并扛在肩上,于是就开始大肆地收集了过往老前辈们此种开发的记录加之以个人不断踩坑,终于上天不负有心人按时完成了产品经理的这一系列需求,赶时周末作此记录来供后来者参考少踩点坑,若有描述不当之处敬请谅解与指出,谢谢

打包方法一:Vue3项目采用Cordova集成crosswalk插件实现支持WebGL的Webview打包(不推荐)

1.首先来简单说下Cordova

Cordova是PhoneGap贡献给Apache后的一个开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。你可以把它们的关系想象成类似于Webkit和Google Chrome的关系官方中文网址

运用cordova命令行工具我们可以很容易构建一款属于混合开发的app应用安装包,安装方式:

npm install -g cordova@8.1.2

此处插一段小插曲,由于后面要集成crosswalk插件,而小编经过了大量查阅后crosswalk这个项目已经于2017年停止维护了,也就是说为了兼容后面的集成,我们就需要降低cordova的版本为8.1.2的版本,以免后续一些未知的错误导致最后面的打包不成功

然而经过后续的一路踩坑后,又发现了版本8.1.2的cordova对nodejs的版本又有所限制,无奈我的电脑上已经安装了14.x版本的nodejs,如果说要卸掉这个版本的nodejs安装老版本的nodejs那无疑是要让开发人员吐血,幸好有nvm工具(即nodejs的版本管理工具)的存在,不然头发又得少了,具体安装可以看这位博主的nvm for window下载与安装,安装好nvm管理工具后就选择了10.22.0版本的nodejs进行下载并使用,打开cmd窗口如下图:

捣鼓完这一堆版本问题后,我们还需要下载Android SDK来进行本地安卓开发环境的下载与配置,具体可以看这位博主的Android SDK下载与安装,如果你觉得Android SDK难以下载,我这里有一个百度网盘上的r24.4.1版本的安装包(提取码是:jouh)

同时你也可以下载个android-studio工具来下载安装相应的安卓环境,如果你嫌下载太慢我这里也有一个android-studio的安装包(提取码是:ohv4)，具体安装与配置方法可参考该博主的文章Android-Studio的安装配置与环境搭建及基本使用

当然无论是哪种下载的方式我们都首先需要在本机器上安装Java环境,具体看这位博主文章JDK1.8下载安装与环境配置，还是那句"以免后续一些未知的错误导致最后面的打包不成功"我们需要配置的Java的JDK环境应选择1.8版本的(谁叫Android原生都是用Java开发的呢,只能说我们做大前端的就是要无所不能)

下列是本人安装Java JDK环境的过程图(以供参考)

1.安装后的JDK目录

2.新建系统变量JAVA_HOME(变量值是刚刚安装的JDK目录)

3.新建系统变量CLASSPATH(变量值是%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar)

4.编辑环境变量path(添加变量值%JAVA_HOME%\bin以及变量值%JAVA_HOME%\jre\bin)

5.打开cmd命令窗口分别输入java命令和javac命令出现如图所示内容即代表配置Java环境成功

好了,搞了一堆与Java后端环境的知识,现在我们终于可以开始搭建Android的开发环境了首先进入安装后的Android SDK目录下

打开SDK Manager.exe执行文件(界面如下图)

在Tools目录中分别下载Android SDK Tools(Obsolete)和Android SDK Platform-tools以及Android SDK Build-tools(注意Android SDK Build-tools的Rev对应的是27版本的下载,由于之前一路踩坑下载了一些不兼容的版本,最后才发现27版本是兼容8.1.2版本的cordova安装的crosswalk插件的（说的有点绕口）不过还是那句"以免后续一些未知的错误导致最后面的打包不成功",读者们只需要下载27的就对了)

接着就是下载Android8.1.0(API 27)注意:这里的api27是对应上面的版本号27的所以只需要将Android8.1.0目录下的所有都下载即可

最后Extras目录下的下载(最主要的两个包便是Google USB Driver谷歌usb驱动和Google Web Driver谷歌web驱动,其他的用到就下不用就不下,反正没影响)

好了,终于下载完相应的Android环境了,那么接下来还是那个步骤即配置系统环境变量和用户环境变量了首先,新建系统变量,名为ANDROID_HOME,变量值是你的android-sdk目录

接着编辑系统变量path,添加变量值%ANDROID_HOME%\tools和%ANDROID_HOME%\platform-tools以及%ANDROID_HOME%\build-tools\27.0.0（即对应刚刚下载的27版本的build-tools工具,具体可以在目录中查看到）

最后验证下是否已经配置成功,即打开cmd命令窗口分别输入命令adb和aapt若出现如下内容即android开发环境已经搭建完成

踏破铁鞋无觅处,得来全不费工夫,把这些环境都弄好后,我们可以开始进入打包的主题了

首先输入创建cordova项目命令:

cordova create project com.site.project test

其中:

project是指创建的app名

com.site.project是指开发时包名(一般使用域名倒叙)

test是指app的描述

执行如下图

这时进入目录可以看到(如下图自动生成的文件和目录)

此时再在该目录上打开cmd命令窗口,执行:

cordova platform add android

如下图代表已添加android平台上的打包方式

接着便是集成crosswalk插件,仍是在cmd窗口中输入命令:

cordova plugin add cordova-plugin-crosswalk-webview --variable XWALK_MODE=“lite” --save

安装成功后内容如下图

最后打开目录下的config.xml文件进行打包前的配置,如下图

其中划线部分是避免某些冲突所添加的,具体可以看这里集成crosswalk浏览器内核打包问题 据本人所了解:
XWALK_MUTIPLUSAPK是为了开启或关闭多核打包的
–ignore-gpu-blanklist这个命令是强制任何情况下都保持开启gpu渲染的(即webgl渲染)

好了万事具备了,就只剩下我们的vue3项目迁移到该目录下了,如下图

vueProject是我创建的Vue3项目(至于如何创建Vu3项目并开发,这里我就不详说了,想要知道vue2和vue3的不同之处可以看这里)接着进入到我们的vue项目目录下打开vue.config.js文件并修改如下图内容(主要是下划线内容，此处我用的是VSCode编辑器进行开发打开的)

这样我们在vue项目目录下打开cmd窗口运行打包命令:

npm run build

这样打包的文件就会自动打包到cordova项目的www目录下里了

好了,到这里我们就可以运行cordova打包命令了(仍旧是先打开cmd命令窗口)

cordova build android

如果报gradle下载失败或没配置则可以看这位博主的文章下载gradle失败,由于我们安装android打包方式时默认是下载cordova-android@~7.1.1的所以对应的gradle包应该是4.1版本（大家需要可以点击这里进行下载其验证码是x1f9）

解压后再配置下环境,即新建系统变量,名为GRADLE_HOME，变量值为你的解压目录

再运行下cordova,最终打包成功

运行在手机上查看（大功告成）

打包方法二:使用HBuilderX并集成Android X5 Webview(腾讯TBS)插件进行打包(推荐)

被cordova和crosswalk折磨了很久后来才发现,其实可以利用HbuilderX创建H5+项目并集成X5插件就可以实现WebGL的渲染(即对threejs的支持),同时在这里吐槽一下,使用cordova集成的crosswalk打包其实会多出大概40多m的内容(但不可否认cordova还是有它过人之处因为使用HbuilderX打包还需要上传才可以打包而利用cordova我们可以快速在自己的本机里进行打包所以还是很有必要去学习的)然而非必要时小编建议大家都还是使用Hbuilder+X5进行集成打包吧(因为比较于crosswalk已经不再维护了),具体可看腾讯x5的官方网址:点击打开，如果你想更任性点,那么你也可以用cordova来集成腾讯X5来完成打包也是可以的

不多说了,先上图

先在HBuilderX上创建一个5+ App项目,创建完成后把除了manifest.json的其他文件都删除掉去,再将vue3项目打包后的dist目录下的除了manifest.json所有文件全都丢进该5+ App项目下，最后配置下manifest.json内容，勾选Android X5 Webview(腾讯TBS)这项

最后制作自定义基座

勾选’使用公共测试证书’和‘打自定义基座’

确认后点击打包,等待打包成功后控制台并会出现打包的apk路径,将该apk安装后,页面的threejs输出同上一样正常

最后还有一点小知识就是threejs在加载我们自定义模型的时候要注意路径的引用,最好使用网络路径进行引入,其一是保护知识产权其二是因为打包出来后的threejs不同开发时的那样询问相对路径了(实测貌似),好了不知不觉已经很晚了,先写到这吧,后续再写个教程来教大家如何高性能地应用threejs渲染3d在移动端把…