cordova-13/www/index.html
2024-12-16 20:56:14 +08:00

176 lines
5.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, width=device-width, viewport-fit=cover"
/>
<title>Hello World</title>
<script src="cordova.js"></script>
<!-- 导入样式 -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- 导入 Vue 3 -->
<script src="//unpkg.com/vue@next"></script>
<!-- 导入组件库 -->
<script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
<h1>Cordova plugins</h1>
<el-button @click="getDeviceInfo">获取设备信息</el-button>
<el-button @click="openUrl">打开百度</el-button>
<el-button @click="deviceVibration">设备震动</el-button>
<el-button @click="scanCode">扫码</el-button>
<el-button @click="takPhoto">拍照</el-button>
<el-button @click="docPrint">文件打印</el-button>
<el-button @click="versionCheck">版本升级</el-button>
<el-button @click="installAPK" type="danger">安装apk</el-button>
<el-button @click="customPlugin">自定义插件</el-button>
</div>
</body>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
var vConsole = new window.VConsole();
</script>
<script>
const app = Vue.createApp({
mounted() {
setTimeout(() => {
window.addEventListener("batterystatus", this.onBatteryStatus, false);
}, 600);
},
methods: {
customPlugin() {
console.log(cordovaTest);
cordovaTest.coolMethod(
"param",
(res) => {
console.log(res);
this.$message.success(res);
},
(e) => {
this.$message.error(e);
}
);
},
installAPK() {
let url = "http://3000.taoya.art/app.apk";
var filename = url.split("/").pop();
var targetPath = cordova.file.externalRootDirectory + filename;
console.log(cordova.file.externalRootDirectory);
//1. 下载
let _this = this;
_this.progress = 0;
_this.fileTransfer = new FileTransfer();
_this.fileTransfer.onprogress = function (e) {
if (e.lengthComputable) {
const progress = e.loaded / e.total;
_this.progress = (progress * 100).toFixed(2);
console.log(progress);
}
};
console.log("download file");
_this.fileTransfer.download(
encodeURI(url), //服务器地址
targetPath, //本地存储地址
function (entry) {
//下载完成回调
let url = entry.toURL();
console.log(url);
},
function (error) {
console.log(error);
_this.$message.error(error);
},
{
trustHosts: true,
}
);
return;
//2. 安装
cordova.plugins.fileOpener2.open(
"",
"application/vnd.android.package-archive",
{
error: function (e) {
console.log("open fail");
},
success: function () {
console.log("open successfully");
},
}
);
},
async versionCheck() {
let versionCode =
await window.cordova.getAppVersion.getVersionNumber();
this.$message.success(`当前版本: ${versionCode}`);
},
docPrint() {
// use
// cordova.plugins.printer.print();
cordova.plugins.printer.print("<b>Hello Cordova!</b>");
},
takPhoto() {
let that = this;
window.navigator.camera.getPicture(
(imageURI) => {
console.log(imageURI);
that.$message.success(`文件路径: ${imageURI}`);
},
(message) => {
this.$message.warning("取消拍照");
},
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
}
);
},
scanCode() {
cordova.plugins.barcodeScanner.scan(
function (result) {
console.log("扫码结果", result);
try {
if (result.text) {
alert(result.text);
}
} catch (e) {
console.log(e);
}
},
function (error) {
that.$message.error("扫描失败");
}
);
},
onBatteryStatus(status) {
this.$message.warning(
"电池电量: " + status.level + " 是否充电中: " + status.isPlugged
);
},
deviceVibration() {
navigator.vibrate(600);
// var pattern = [1000, 1000, 1000, 1000];
// navigator.vibrate(pattern);
},
openUrl() {
var ref = cordova.InAppBrowser.open(
"https://www.baidu.com",
"_blank",
"location=yes"
);
},
getDeviceInfo() {
this.$message.success("请打开控制台查看");
console.log(window.device);
},
},
});
app.use(ElementPlus);
app.mount("#app");
</script>
</html>