最近接触了一个公司之前找供应商做的项目,项目主要是为安卓立牌开发App进行车企信息展示。由于之前并没有实际处理过App的开发,所以难免遇到一系列的问题,特此记录这次简短的踩坑过程。

接触初始先整体对项目进行见到了解,分析其基本的结构。由于暂时只是素材、文案的替换更新,所以并不需要完全理顺整个代码结构。

通过分析,项目主要分为两个版本:

  • 一个版本就是常规的html+css+js的结构,修改起来没有太大的问题。
  • 一个版本是使用的Nuxt.js框架进行开发的,遇到了生产环境和开发环境的配置的问题。

由于代码针对配置没有具体的说明文档,并且相关的一些配置项还注释掉了,所以一度代码build都没有成功。由于修改较为紧急,只能各种求供应商帮忙查找原因。后来才告诉,我改的配置不对,蛋疼……

Apk的打包主要是依托于Cordova进行打包发布的。之前试着搞过RN,所以安卓环境还在,省去了环境搭建的过程。但是,build android 的流程执行正确了,apk生成了,原以为就这么顺利的跑通了,只能说我想的太简单了。。。

两个问题接踵而来:

1、打包的key没有提供,生成的apk安装不能更新原版本
2、由于代码中使用到了viewport进行适配的处理,打包生成的apk安装之后不适配,显示有问题

针对问题一,没办法,这个只能继续找供应商所要key文件,之后再替换自己本地的安卓环境中的key文件,debug.keysotre文件。
针对问题二,自己在网上查找了相关的问题解决办法,给到的解决放大大体都是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*iOS解决方法*/

在phonegap的config.xml中增加一行配置:
<preference name="EnableViewportScale" value="true"/>
建议在 Cordova 创建工程的目录下的 config.xml 文件也加上,方便以后用命令编译。

/*android 解决方法*/

MainActivity.java 类

package com.easycloud.waiter;

import android.os.Bundle;
import android.webkit.WebView;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);

//下面能让 Android 设备支持 viewport
WebView webView = (WebView) this.appView.getView();
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
}
}

但是修改之后依然不行,该不适配还是不适配。这个问题成了最大的阻碍,比对应需求都要紧急。

最后,最后,还是只能说解铃还须系铃人啊,没办法了,求人吧。

最后的解决方法是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 修改app/platforms/android/app/src/main/java/org/crosswalk/engine/XWalkWebViewEngine.java
// line 196 开始
private void initWebViewSettings() {
webView.setVerticalScrollBarEnabled(false);
/* 解决webview不适配性问题 */
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
/* 解决webview不适配性问题 */

boolean zOrderOnTop = preferences == null ? false : preferences.getBoolean(XWALK_Z_ORDER_ON_TOP, false);
webView.setZOrderOnTop(zOrderOnTop);

// Set xwalk webview settings by Cordova preferences.
String xwalkUserAgent = preferences == null ? "" : preferences.getString(XWALK_USER_AGENT, "");
if (!xwalkUserAgent.isEmpty()) {
webView.setUserAgentString(xwalkUserAgent);
}

String appendUserAgent = preferences.getString("AppendUserAgent", "");
if (!appendUserAgent.isEmpty()) {
webView.setUserAgentString(webView.getUserAgentString() + " " + appendUserAgent);
}

if (preferences.contains("BackgroundColor")) {
int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
webView.setBackgroundColor(backgroundColor);
}
}

至此,才第一次将整个打包过程跑通。

回顾整个过程,发现其实最大的原因就是在交接过程中没有规范的说明和文档。然后第三方在开发过程中没有及时的将一些坑同步告知。
当然,自己的接触面也是问题。

现在前端能做的越来越多,真心有点学不动了啊

本文只是针对这次事件的一个📝,以作简单记录,也希望能够帮到同样遇到上述适配问题的人。