cordova打包vue生成的app的一些问题

1. app白屏

可能有下:

1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。
assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,

2、src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。
3、在电脑模拟器正常运行,但是打包发到真机运行打开白屏。因为部分机型webview版本必不高,需要使用一个新的webview来解决

cordova plugin add cordova-plugin-crosswalk-webview

4、可能是项目js本身就报错,导致cordova的sdk外壳无法执行
解决办法:把打包的文件直接用浏览器打开,除了跨域之外的所有报错都要解决

2. http外链图片无法显示

可能原因:

1. Android5.0上 WebView不支持Http和Https混合模式

//文件修改位置
\apptest\platforms\android\CordovaLib\src\org\apache\cordova\engine\SystemWebViewEngine.java
//需要设置setMixedContentMode(有三种值)
//MIXED_CONTENT_ALWAYS_ALLOW:允许从任何来源加载内容,即使起源是不安全的;
//MIXED_CONTENT_NEVER_ALLOW:不允许Https加载Http的内容,即不允许从安全的起源去加载一个不安全的资源;
//MIXED_CONTENT_COMPATIBILITY_MODE:当涉及到混合式内容时,WebView 会尝试去兼容最新Web浏览器的风格。

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
    webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
}
//或者直接:
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);

2. android版本过高(本人遇到的就是这个,我的版本cordova 9.0.0 android 8.0.0)

直接把android降级到android 23,及以下

//删除现有版本
cordova platform rm android
//安装android6.4.0(对应android 23)
cordova add platform android@6.4.1

安装android6.4.0可能报错:
You have not accepted the license agreements of the following SDK components:
[Android SDK Platform 25].
解决方案:

在cmd命令窗口下,先cd到 ***\Android\android-sdk\tools\bin下
运行命令:sdkmanager --update
如果不行就运行:sdkmanager --licenses
会有Accept? (y/N): y
接受 y 回车就行了

3. 沉侵式状态栏的设置

下载插件

cordova plugin add cordova-plugin-statusbar

在当前项目路径->platforms->android->src->org->apache->cordova->statusbar中找到StatusBar.java文件。修改run方法

 @Override
    public void initialize(final CordovaInterface cordova, CordovaWebView webView) {
        LOG.v(TAG, "StatusBar: initialization");
        super.initialize(cordova, webView);

        this.cordova.getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
                // by the Cordova.
                Window window = cordova.getActivity().getWindow();
                    //添加内容start
                    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
                    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                    window.setStatusBarColor(Color.TRANSPARENT);
                    window.setNavigationBarColor(Color.TRANSPARENT);
                    //添加内容end

                window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

                // Read 'StatusBarBackgroundColor' from config.xml, default is #000000.
                setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "rgba(0,0,0,0)"));  //设置背景透明

                // Read 'StatusBarStyle' from config.xml, default is 'lightcontent'.
                setStatusBarStyle(preferences.getString("StatusBarStyle", "lightcontent"));
            }
        });
    }
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值