176 lines
5.4 KiB
HTML
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>
|