Cordova 配置
邬英武
PDF 在线查阅
ios
通过 cordova-plugin-inappbrowser
cordova.InAppBrowser.open(url, '_blank', 'location=no')
android
通过 vue-pdf
<van-pdf :src="url" :page="currentPage" @progress="load = $event" @num-pages="numPages = $event"></van-pdf>
import VanPdf from "vue-pdf";
components: { VanPdf }
Cordova 项目从 UIWebView 更换为 WKWebView
Cordova 项目中添加 cordova-plugin-wkwebview-engine 插件（当前最新版本1.2.1）
cordova plugin add cordova-plugin-wkwebview-engine
config.xml 中添加配置
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>
热更新
极光推送
github 地址
IOS 推送证书绑定
安装：
cordova plugin add jpush-phonegap-plugin --variable APP_KEY=your_key
封装：
export class StatusPush {
onOpenNotification(event: any) {
try {
var alertContent;
// @ts-ignore
if (device.platform == "Android") {
alertContent = event.alert;
} else {
alertContent = event.aps.alert;
}
alert("open Notification:" + alertContent);
} catch (exception) {
alert("JPushPlugin: onOpenNotification" + exception);
}
};
initiateUI() {
const getRegistrationId = () => {
// @ts-ignore
window.JPush.getRegistrationID((rId) => {
try {
alert("JPushPlugin:registrationID is " + rId)
if (rId.length === 0) {
setTimeout(getRegistrationId, 1000)
}
} catch (e) {
alert('error: ' + e)
}
})
}
try {
// @ts-ignore
window.JPush.init();
// @ts-ignore
window.JPush.setDebugMode(true);
getRegistrationId();
// @ts-ignore
if (device.platform != "Android") {
// @ts-ignore
window.JPush.setApplicationIconBadgeNumber(0);
}
} catch (exception) {
alert('init: ' + exception);
}
};
}
调用：
const statusPush = new StatusPush()
document.addEventListener(
"deviceready",
function () {
statusPush.initiateUI()
new Vue({
render: h => h(App),
router,
store
}).$mount("#app");
},
false
);
document.addEventListener("jpush.openNotification", statusPush.onOpenNotification, false);
下载 apk 并安装
１.安装
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-file-opener2
２.下载.apk
var ft = new FileTransfer();
//监听下载进度
ft.onprogress = function (e) {
if (e.lengthComputable) {
var progress = e.loaded / e.total * 100;
$("#progress").css({ "width": progress + "%" });
$("#progress").html(progress + "%");
}
}
ft.download(zyd.openApp._downloadUrl, filePath, function (entry) {
console.log('下载成功');
console.info(JSON.stringify(entry));
console.log('文件位置：' + entry.toURL());
// 打开apk安装包
cordova.plugins.fileOpener2.open(
entry.toURL(), 'application/vnd.android.package-archive', {
error: function (e) {
alert('失败status:' + JSON.stringify(e) + " 路径：" + entry.toURL())
},
success: function () {
alert("安装完成后请重新打开。");
}
});
}, function (err) {
console.log("下载失败！");
console.info(JSON.stringify(err));
}, null, {});
- vue 使用
downloadApk(url) {
const fileTransfer = new FileTransfer()
const uri = encodeURI(url)
const fileURL = 'cdvfile://localhost/temporary/update.apk'
fileTransfer.onprogress = (e) => {
if (e.lengthComputable) {
this.update.show = true
let progress = Math.ceil(e.loaded / e.total * 100)
if (progress < 100) {
this.update.progress = progress;
} else {
this.update.progress = 100;
this.update.show = false
}
}
}
fileTransfer.download(uri, fileURL,
function (entry) {
cordova.plugins.fileOpener2.open(
entry.toURL(), 'application/vnd.android.package-archive', {
error: function (e) {
this.$tip("fail", `打开失败，文件路径：${entry.toURL()}`);
},
success: function () { }
}
)
},
function (error) {
this.$tip("fail", "下载失败");
}
)
}
插件使用（相机）
在 www 文件下的 index.html 加入 （或 vue 的 index.html）
<script src="cordova.js"></script>
cordova.js
export function camera() {
return new Promise((resolve, reject) => {
const onSuccess = (data) => { resolve(data) }
const onError = (msg) => { reject(msg) }
navigator.camera.getPicture(onSuccess, onError)
})
}
使用
import { camera } from "../../plugins/cordova";
// 拍照上传
onTakePhoto() {
camera()
.then(res => {
this.confirmDialog.prePhotos.push(res);
})
.catch(e => {
console.log(e);
});
},
打开外部浏览器
安装
cordova plugin add cordova-plugin-inappbrowser
使用
cordova.InAppBrowser.open(URL,target,options)
// 实例
cordova.InAppBrowser.open(url, "_system", "location=no,toolbar=yes,toolbarposition=top,closebuttoncaption=关闭");
修改名称和 icon 图标
一键获取
config.xml 下修改名称
config.xml 下修改 icon
- ios 系统
<platform name="ios">
<icon height="1024" src="res/ios/icon-1024.png" width="1024" />
<icon height="196" src="res/ios/icon-98@2x.png" width="196" />
<icon height="172" src="res/ios/icon-86@2x.png" width="172" />
<icon height="167" src="res/ios/icon-83.5@2x.png" width="167" />
<icon height="152" src="res/ios/icon-76@2x.png" width="152" />
<icon height="76" src="res/ios/icon-76.png" width="76" />
<icon height="144" src="res/ios/icon-72@2x.png" width="144" />
<icon height="72" src="res/ios/icon-72.png" width="72" />
<icon height="180" src="res/ios/icon-60@3x.png" width="180" />
<icon height="120" src="res/ios/icon-60@2x.png" width="120" />
<icon height="100" src="res/ios/icon-50@2x.png" width="100" />
<icon height="50" src="res/ios/icon-50.png" width="50" />
<icon height="88" src="res/ios/icon-44@2x.png" width="88" />
<icon height="80" src="res/ios/icon-40@2x.png" width="80" />
<icon height="40" src="res/ios/icon-40.png" width="40" />
<icon height="87" src="res/ios/icon-29@3x.png" width="87" />
<icon height="58" src="res/ios/icon-29@2x.png" width="58" />
<icon height="29" src="res/ios/icon-29.png" width="29" />
<icon height="55" src="res/ios/icon-27.5@2x.png" width="55" />
<icon height="48" src="res/ios/icon-24@2x.png" width="48" />
<icon height="60" src="res/ios/icon-20@3x.png" width="60" />
<icon height="40" src="res/ios/icon-20@2x.png" width="40" />
<icon height="20" src="res/ios/icon-20.png" width="20" />
<icon height="114" src="res/ios/icon@2x.png" width="114" />
<icon height="57" src="res/ios/icon.png" width="57" />
<splash src="res/screen/ios/Default~iphone.png" width="320" height="480" />
<splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960" />
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024" />
<splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048" />
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768" />
<splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536" />
<splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136" />
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334" />
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208" />
<splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242" />
</platform>
- android 系统
<platform name="android">
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->
<icon src="res/android/ldpi.png" density="ldpi" />
<icon src="res/android/mdpi.png" density="mdpi" />
<icon src="res/android/hdpi.png" density="hdpi" />
<icon src="res/android/xhdpi.png" density="xhdpi" />
<icon src="res/android/xxhdpi.png" density="xxhdpi" />
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
<splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />
<splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />
<splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />
<splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />
<splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
<splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />
<splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
<splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
</platform>
- Windows
<platform name="windows">
<icon src="res/windows/storelogo.png" target="StoreLogo" />
<icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
<icon src="res/Windows/Square44x44Logo.png" target="Square44x44Logo" />
<icon src="res/Windows/Square70x70Logo.png" target="Square70x70Logo" />
<icon src="res/Windows/Square71x71Logo.png" target="Square71x71Logo" />
<icon src="res/Windows/Square150x150Logo.png" target="Square150x150Logo" />
<icon src="res/Windows/Square310x310Logo.png" target="Square310x310Logo" />
<icon src="res/Windows/Wide310x150Logo.png" target="Wide310x150Logo" />
</platform>
- Windows Phone 8 (WP8 Platform)
<platform name="wp8">
<icon src="res/wp/ApplicationIcon.png" width="99" height="99" />
<!-- tile image -->
<icon src="res/wp/Background.png" width="159" height="159" />
</platform>
config.xml文件配置
widget：id填写app所有人的域名，version填写app的版本号
name：app名称
description：app描述，会在app stroe里显示
author：app作者相关信息，会在app stroe里显示
content：指定app开始指向页面
access：指定app可进行通信的域名，*为所有
preference：偏好设置，可针对不同平台进行个性化设置。
android和ios支持额外版本号：
<widget id="io.cordova.hellocordova" version="0.0.1" android-versionCode="7" ios-CFBundleVersion="3.3.3">
如果额外版本号未指定，默认值如下：
// assuming version = MAJOR.MINOR.PATCH-whatever
versionCode = PATCH + MINOR * 100 + MAJOR * 10000
CFBundleVersion = "MAJOR.MINOR.PATCH"
所有平台支持的Preferences
设置app全屏，默认值为false：
<preference name="Fullscreen" value="true" />
部分平台支持的Preferences设置：
隐藏滚动条，默认值为false，适用于android、ios：
<preference name="DisallowOverscroll" value="true"/>
背景色设置，适用于android、BlackBerry，可在CSS中设置body的背景色替代该方法且对所有平台都适用：
<preference name="BackgroundColor" value="0xff0000ff"/>
隐藏键盘上的工具栏，适用于iOS、BlackBerry：
<preference name="HideKeyboardFormAccessoryBar" value="true"/>
横屏竖屏锁定，可设置值为default|landscape|portrait，其中default指根据手机自身设置显示：
<preference name="Orientation" value="landscape" />
针对指定平台设定横竖屏，适用于Android、iOS、WP8、Amazon Fire OS、Firefox OS：
<platform name="android">
<preference name="Orientation" value="sensorLandscape" />
</platform>
在ios平台下，可通过JS控制：
function shouldRotateToOrientation(degrees) {
return true;
}
feature标签
feature不适用于通过cmd添加插件的方式，适用于通过SDK特定平台进行开发可通过编辑config.xml feature标签的内容添加API
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="Device">
<param name="ios-package" value="CDVDevice" />
</feature>
针对特定平台设置：
<platform name="android">
<preference name="Fullscreen" value="true" />
</platform>
android配置：
<preference name="KeepRunning" value="false"/>
<preference name="LoadUrlTimeoutValue" value="10000"/>
<preference name="SplashScreen" value="mySplash"/>
<preference name="SplashScreenDelay" value="10000"/>
<preference name="InAppBrowserStorageEnabled" value="true"/>
<preference name="LoadingDialog" value="My Title,My Message"/>
<preference name="LoadingPageDialog" value="My Title,My Message"/>
<preference name="ErrorUrl" value="myErrorPage.html"/>
<preference name="ShowTitle" value="true"/>
<preference name="LogLevel" value="VERBOSE"/>
<preference name="AndroidLaunchMode" value="singleTop"/>
cordova 修改顶部状态栏颜色
// 状态栏颜色
<preference name="StatusBarBackgroundColor" value="#000000" />
// 闪屏
<preference name="SplashScreenDelay" value="0" />
<preference name="FadeSplashScreenDuration" value="0" />
// 全面屏
<preference name="Fullscreen" value="true" />
// 首部上拉空白背景
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="WebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
类似资料：