-
Notifications
You must be signed in to change notification settings - Fork 119
/
basic-use.html
73 lines (70 loc) · 3.65 KB
/
basic-use.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AppInfoParser Demo</title>
<style>
html,body { padding: 0;margin: 0; font-size: 12px; background: #efefef; }
p { padding: 0; margin: 0; }
.container { width: 450px; margin: 20px auto; }
.title { border-left: 4px solid #78C3F3; padding-left: 12px; font-size: 16px; margin: 0 0 20px 0; }
.card { padding: 20px; margin-bottom: 20px; background: #fff; border-radius: 4px; font-size: 12px; transition: all .3s; border: 1px solid #d9d9d9; border-color: #e9e9e9; }
.card:hover { box-shadow: 0 1px 6px hsla(0,0%,39%,.2); border-color: #eee; }
.file { position: relative; border: 1px solid #99D3F5; border-radius: 2px; width: 85px; height: 30px; line-height: 30px; text-align: center; color: #1E88C7; }
.file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; }
#file-input { position: absolute; top: 0; left: 0; width: 85px; height: 30px; opacity: 0; }
#file-input:hover { cursor: pointer; }
</style>
</head>
<body>
<div class="container">
<div class="card">
<p class="title">Operation Panel</p>
<div class="file">Select File
<input type="file" name="file" id="file-input" onchange="fileSelect()">
</div>
</div>
<div id="result-list">
</div>
</div>
<script src="../dist/app-info-parser.js"></script>
<script>
function fileSelect() {
const files = document.getElementById('file-input').files
try {
const parser = new AppInfoParser(files[0])
parser.parse().then(result => {
const div = document.createElement('div')
div.innerHTML = `
<div style="padding: 20px; margin-bottom: 10px; background: #fff; border-radius: 4px; font-size: 16px; color: #717171; border: 1px solid #d9d9d9; border-color: #e9e9e9;">
<p style="padding: 10px 0; display: flex; overflow: hidden;">
<span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">File Name: </span>
<span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${ files[0].name }</span>
</p>
<p style="padding: 10px 0; display: flex; overflow: hidden;">
<span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Icon: </span>
<img style="width: 80px; height: 80px;" src="${result.icon}" alt="">
</p>
<p style="padding: 10px 0; display: flex; overflow: hidden;">
<span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Name: </span>
<span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${ result['package'] || result['CFBundleName'] }</span>
</p>
<p style="padding: 10px 0; display: flex; overflow: hidden;">
<span style="color: #000; text-align: right; width: 100px; font-weight: 600; padding-right: 20px;">App Version: </span>
<span style="width: 0; flex: 1; overflow-wrap: break-word; word-wrap: break-word;">${ result['versionName'] || result['CFBundleShortVersionString'] }</span>
</p>
</div>
`
document.getElementById('result-list').appendChild(div)
}).catch(e => {
window.alert('Parse Error: ' + e)
})
} catch (e) {
window.alert('Parse Error: ' + e)
}
}
</script>
</body>
</html>