mps-deploy
Version:
miniprogram`s (weapp) batch deployment tool
522 lines (467 loc) • 11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mps-deploy</title>
<style>
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
margin: 0;
padding: 0;
}
header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th {
text-align: left;
font-weight: normal;
}
html,
body,
fieldset,
img,
iframe,
abbr {
border: 0;
}
i,
cite,
em,
var,
address,
dfn {
font-style: normal;
}
[hidefocus],
summary {
outline: 0;
}
li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
small {
font-size: 100%;
}
sup,
sub {
font-size: 83%;
}
pre,
code,
kbd,
samp {
font-family: inherit;
}
q:before,
q:after {
content: none;
}
textarea {
overflow: auto;
resize: none;
}
label,
summary {
cursor: default;
}
a,
button {
cursor: pointer;
}
body,
textarea,
input,
button,
select,
keygen,
legend {
outline: 0;
}
body {
background: #fff;
font-size: 12px;
font-family: "微软雅黑", Arial, "宋体", Tahoma, sans-serif;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.header {
width: 100%;
height: 80px;
background: rgba(96, 150, 230, 0.9);
text-align: center;
line-height: 80px;
color: #ffffff;
font-size: 24px;
font-weight: bold;
}
.container {
width: 1200px;
margin: 0 auto;
padding-top: 20px;
}
.container .left,
.container .right {
float: left;
}
.container .left {
width: 65%;
margin-right: 5%;
}
.container .right {
width: 30%;
padding: 15px;
box-sizing: border-box;
border: 1px solid #6096E6;
border-radius: 10px;
min-height: 550px;
}
.container .left .left-item {
width: 100%;
padding: 15px 0;
border-bottom: 1px solid #e5e5e5;
}
.container .left .left-item h3 {
font-size: 20px;
color: #333333;
}
.container .left .left-item .flex-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .left .left-item .btn {
display: inline-block;
padding: 0 20px;
line-height: 36px;
border-radius: 4px;
background: #6096E6;
color: #ffffff;
font-size: 16px;
}
.container .left .left-item .path-input {
display: block;
margin-top: 10px;
border: none;
border: 1px solid #6096E6;
border-radius: 4px;
padding: 10px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
.list-box .list-item {
padding: 15px 20px;
border-bottom: 1px solid #e5e5e5;
position: relative;
}
.list-box .list-item .del-list-item {
position: absolute;
top: 0;
right: 20px;
color: #6096E6;
font-size: 16px;
}
.list-box .list-item .input-item {
display: flex;
align-items: center;
margin-bottom: 10px;
padding-top: 20px;
}
.list-box .list-item .input-item>p {
width: 100px;
font-size: 16px;
margin-right: 10px;
}
.list-box .list-item .input-item>input {
display: block;
border: none;
border: 1px solid #6096E6;
border-radius: 4px;
padding: 10px 10px;
font-size: 16px;
flex: 1;
color: #666666;
}
.container .left .submit-btn {
display: block;
width: 30%;
height: 50px;
line-height: 50px;
text-align: center;
color: #ffffff;
font-size: 18px;
background: #6096E6;
margin: 20px auto;
border-radius: 8px;
border: 1px solid #4D7ABD;
user-select: none;
}
.container .left .submit-btn:active {
opacity: 0.8;
}
.container .right>h3 {
font-size: 18px;
padding-bottom: 15px;
border-bottom: 1px solid #e5e5e5;
}
.container .right .no-data {
text-align: center;
font-size: 16px;
color: #999999;
margin-top: 200px;
display: none;
}
.work-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #e5e5e5;
justify-content: space-between;
font-size: 14px;
}
.work-item .name {
flex: 1;
line-height: 24px;
}
.work-item .state {
margin-left: 10px;
}
.work-item .state.success {
color: #1AAD19;
}
.work-item .state.danger {
color: #E64340;
}
</style>
</head>
<body>
<div class="header">mps-deploy 小程序批量发布助手</div>
<div class="container clearfix">
<div class="left">
<!-- <div class="left-item">
<div class="flex-box">
<h3>1、下载小程序最新包</h3>
<a href="" target="_blank" class="btn">下载</a>
</div>
</div> -->
<div class="left-item">
<h3>1、填写下载小程序包的解压路径</h3>
<div class="input-box">
<input type="text" class="path-input" name="path">
</div>
</div>
<div class="left-item">
<div class="flex-box">
<h3>2、小程序发布列表</h3>
<a href="javascript:;" class="btn" id="addAppId">新增</a>
</div>
</div>
<div class="list-box">
<div class="list-item">
<div class="input-item">
<p>小程序名称</p>
<input type="text" name="name" maxlength="30" placeholder="请输入小程序名称">
</div>
<div class="input-item">
<p>appid</p>
<input type="text" name="appid" placeholder="请输入小程序appid">
</div>
<div class="input-item">
<p>key文件路径</p>
<input type="text" name="key" placeholder="请输入key文件路径">
</div>
</div>
</div>
<a href="javascript:;" class="submit-btn" id="startUpload">启 动</a>
</div>
<div class="right">
<h3>任务列表</h3>
<div class="no-data">暂无数据</div>
<div class="work-list">
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
console.log([
"",
" Mps-deploy v0.1.4",
" Author: Leeeink ",
" License: MIT",
" Repository: https://gitee.com/leeeink/mps-deploy",
" "
].join('\n'))
// 新增
$('#addAppId').click(function () {
let html = `<div class="list-item">
<a href="javascript:;" class="del-list-item">删除</a>
<div class="input-item">
<p>小程序名称</p>
<input type="text" name="name" maxlength="30">
</div>
<div class="input-item">
<p>appid</p>
<input type="text" name="appid">
</div>
<div class="input-item">
<p>key文件路径</p>
<input type="text" name="key">
</div>
</div>`
$('.list-box').append(html)
})
// 删除对应的item
$(document).on('click', '.del-list-item', function () {
$(this).parents('.list-item').remove()
})
$('#startUpload').click(function () {
let params = {
project: $('input[name="path"]').val(),
type: "miniProgram",
es6: true,
deploy: []
}
if (params.project === '') {
alert('请输入解压路径')
return
}
$('.list-box .list-item').each(function () {
if ($(this).find('input[name="key"]').val() === '') {
alert('请输入key文件路径')
return false
}
if ($(this).find('input[name="appid"]').val() === '') {
alert('请输入小程序appid')
return false
}
if ($(this).find('input[name="name"]').val() === '') {
alert('请输入小程序名称')
return false
}
params.deploy.push({
key: $(this).find('input[name="key"]').val(),
appid: $(this).find('input[name="appid"]').val(),
name: $(this).find('input[name="name"]').val()
})
})
console.log(params)
$.ajax({
url: 'http://192.168.6.36:8889/postdata',
type: 'post',
data: JSON.stringify(params),
dataType: 'json',
success: function (res) {
$('#startUpload').css({display: 'none'})
$('.work-list').empty()
getResult()
},
error: function (err) {
console.log('error: ' + JSON.stringify(err))
}
})
})
})
let template = `<div class="work-item">
<p class="name">{{name}}</p>
<p class="state success">{{type-text}}</p>
</div>`
function getResult() {
window.getResultClock = setInterval(() => {
$.ajax({
url: 'http://192.168.6.36:8889/result',
type: 'get',
dataType: 'json',
success: function (res) {
console.log(res.data, 'result')
if (res.data.length === 0) return
$('.work-list').empty()
let t = ''
res.data.forEach(item => {
console.log(item, 'item')
t = template
t = t.replace('{{name}}', item.app + item.speed)
t = t.replace('{{type-text}}', item.status)
$('.work-list').append(t)
})
if (res.type === 'end') {
window.clearInterval(window.getResultClock)
$('#startUpload').css({display: 'block'})
}
},
error: function (err) {
console.log('error: ' + JSON.stringify(err))
$('#startUpload').css({display: 'block'})
}
})
}, 1500)
}
</script>
</body>
</html>