cordova打包vue生成的app的一些问题
1. app白屏可能有下:1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。assetsPublicPath默认的是‘/’也就是根目录。而我们的index.html和static在同一级目录下面module.exports = {b...
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"));
}
});
}
更多推荐
所有评论(0)