使用 Cordova 的一些记录

Android 软键盘顶起底部导航和遮住输入框

使用 adjustPan 模式,软键盘不会把底部导航顶起

<edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:name='MainActivity']" mode="merge">            
    <activity android:windowSoftInputMode="adjustPan" />        
</edit-config>   

遮住输入框的问题,监听软键盘显示/隐藏,让页面偏移

/**
 * 修正 android 软键盘遮住输入框的问题
 * 需安装插件 ionic-plugin-keyboard
 */
fixKeyBorardCovered() {
    if ( ! window.cordova) {
        return;
    }

    // 非 android 系统? 不处理
    if (cordova.platformId != 'android') {
        return;
    }

    // 监听键盘显示
    window.addEventListener('native.keyboardshow',function (e) {
        // 当前输入框页底距离
        var bottonHeight = document.documentElement.clientHeight - document.activeElement.offsetParent.offsetTop;
        // 软键盘与输入框差距
        var offset = e.keyboardHeight - bottonHeight
        // 两者相差 100px 以内? 拉高页面
        if (Math.abs(offset) < 100) {
            document.documentElement.style.marginTop = "-" + (offset+100) + "px";
        }
    })
    // 监听键盘隐藏  
    window.addEventListener('native.keyboardhide',function (e) {
        document.documentElement.style.marginTop = "0";
    })        
}

npm ERR! Could not install "../build@2/node_modules/cordova/node_modules/cordova-app-hello-world/index.js" as it is not a directory and is not a file with a name ending in .tgz, .tar.gz or .tar

用 cordova create 新项目时出现错误,修改 cordova-create/index.js 文件

vim /usr/local/lib/node_modules/cordova/node_modules/cordova-create/index.js

isRemoteUri 方法中的 uri.includes('@') 改为 path.basename(uri).includes('@'),如下:

 function isRemoteUri (uri) { 
     return isUrl(uri) || path.basename(uri).includes('@') || !fs.existsSync(uri); 
 } 

Failed to execute shell command "input,keyevent,82"" on device: Error: adb: Command failed with exit code 137

连接真机运行 cordova run android 时出现错误,当时测试设备是 Redmi 5A,需要在开发者选项中设置USB调试(安全设置),允许通过USB调试修改权限或模拟点击。

允许明文链接

Android 限制了明文流量的网络请求,非加密的流量请求都会被系统禁止掉。在 config.xml 的 <platform name="android"> 下添加

<edit-config file="AndroidManifest.xml" target="/manifest/application" mode="merge">
    <activity android:usesCleartextTraffic="true" />        
</edit-config>

cordova build 的时候遇到 Execution failed for task ':app:mergeDebugResources'. 错误,需要在 widget 标签内加入参数 xmlns:android="http://schemas.android.com/apk/res/android"

滚动页面时头部导航出现抖动

html,body {height: 100%;}

将 UIWebView 替换为 WKWebView

在 iOS 系统上,使用性能更好的 WKWebView。安装插件

cordova plugin add cordova-plugin-wkwebview-engine@latest --save 

在 config.xml 的 <platform name="ios"> 中添加:

<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

防止页面缩放

页面 meta 使用以下标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

取消 input 输入的时候英文首字母大写

<input autocapitalize="off" autocorrect="off" />     

修改电池状态栏背景颜色

安装插件

cordova plugin add cordova-plugin-statusbar

在 config.xml 文件中添加

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />

禁止整个应用页面上下拖动

在 config.xml 文件中添加

<preference name="WebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

解决 WKWebView 中元素无法自动聚焦

cordova plugin add cordova-plugin-wkwebview-inputfocusfix

使用蓝牙打印机

安装插件,使用方法查看详细

cordova plugin add cordova-plugin-ble-central