iOS 扫码下载的实现
关键字：Plist iOS 扫码下载 蒲公英 HTTPS VUE
故事背景
测试的产品在 jenkins 自动打包完成后，会上传到蒲公英(https://www.pgyer.com/)这样的第三方安装包管理平台上进行托管。
本来长期薅羊毛就不行，这不，蒲公英开始变得不稳定。
- 上传过程经常失败，卡住，上传速度极慢。
- 对每个免费账户每天上传的次数进行限制。
- 然后是硬盘坏掉丢失一些数据，毕竟免费，免责。（个人感觉可能是企业运行成本上升迫不得已了）
- 接下来迅速来了一个安装包审核机制，也就是安装包上传后需要审核通过才能扫描二维码下载。而这个时间间隔是不确定的，白天可能 5 分钟、10 分钟，晚上 40 分钟、1 个半小时，都遇到过，十分影响工作效率。
于是想着自己能够搭建一套二维码扫描下载，取代下蒲公英承担的这部分工作。安卓的太简单了，就是个文件服务器嘛，向来 iOS 棘手些，一起开始挑战吧~
ps: 不会搭建 SpringBoot 后台的同学可以提前查一下资料
提纲
- 做一个 HTTPS 协议的网站
- Plist 文件填写 App 以及安装包的相关信息
- 将类似 deeplink 的一个链接放进按钮或者二维码中
SpringBoot 后台
- 搭建文件上传服务，用于上传 plist 配置文件
本文使用了 SpringBoot 搭建后台服务，具体的如何新建一个项目的教程网络上随便一搜索很简单~
plist 文件的格式参考
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>items</key>
<array>
<dict>
<key>assets</key>
<array>
<dict>
<key>kind</key>
<string>software-package</string>
<key>url</key>
<string>http://这是你的安装包地址.ipa</string>
</dict>
<dict>
<key>kind</key>
<string>full-size-image</string>
<key>needs-shine</key>
<false/>
<key>url</key>
<string></string>
</dict>
<dict>
<key>kind</key>
<string>display-image</string>
<key>needs-shine</key>
<false/>
<key>url</key>
<string>安装过程显示图片</string>
</dict>
</array>
<key>metadata</key>
<dict>
<key>bundle-identifier</key>
<string>这里是 bundle ID</string>
<key>bundle-version</key>
<string>1.0</string>
<key>kind</key>
<string>software</string>
<key>title</key>
<string>这里写应用名称</string>
</dict>
</dict>
</array>
</dict>
</plist>
bundle id
根据企业包、内测包的不同要作相应的更改。
安装过程显示图片
指的是扫码开始下载之后，手机上的占位图标（有灰色圆形下载进度展示）的背景图片。
尤其注意，plist 文件是要放在 HTTPS 协议的文件服务上的。
- 建立 HTTPS 网站链接
编辑 SpringBoot 工程的 application.properties 文件
# 尝试更换成 HTTPS
server.port=443
server.ssl.key-store=server.keystore
server.ssl.key-alias=tomcat
server.ssl.enabled=true
server.ssl.key-store-password=123456
server.ssl.key-store-type=JKS
这里用到了一个 server.keystore 文件，和一些配置参数。
需要我们自己来生成：
生成 HTTPS 证书
在命令行输入
keytool -genkey -alias tomcat -keyalg RSA -keystore ./server.keystore
会请求用户进行一系列的输入
输入密钥库口令: 123456
再次输入新口令: 123456
您的名字与姓氏是什么?
[Unknown]: pengli
您的组织单位名称是什么?
[Unknown]: netease
您的组织名称是什么?
[Unknown]: netease
您所在的城市或区域名称是什么?
[Unknown]: beijing
您所在的省/市/自治区名称是什么?
[Unknown]: beijing
该单位的双字母国家/地区代码是什么?
[Unknown]: cn
CN=pengli, OU=netease, O=netease, L=beijing, ST=beijing, C=cn是否正确?
[否]: y
输入 <tomcat> 的密钥口令
(如果和密钥库口令相同, 按回车):
Warning:
JKS 密钥库使用专用格式。建议使用 "keytool -importkeystore -srckeystore ./server.keystore -destkeystore ./server.keystore -deststoretype pkcs12" 迁移到行业标准格式 PKCS12。
最终会在当前目录下得到一个 server.keystore 文件，然后把该文件放置到 SpringBoot 项目的根目录。
like this
SpringBoot 项目目录.png
- 开启文件下载目录
编辑 application.properties 文件
# 尝试更换成 HTTPS
# 开放文件的访问目录（用于测试iOS 的扫码下载）
#资源映射路径为/image/**，你想在url访问的请求路径
spring.mvc.static-path-pattern=/CsvFiles/**
#资源映射地址为file:xxx，文件存放的真实路径
spring.resources.static-locations=file:/Users/lipeng/Documents/qa/src/main/resources/CsvFiles
- 扫码下载
使用 VUE 生成二维码，直接扫描下载（也可以直接在后台 SpringBoot 项目中直接生成好图片以供前端直接调用）
地址：
itms-services://?action=download-manifest&url=https://11.111.xxx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist
这里给出一个自己的 VUE 页面实现
使用 For 循环制作，优化交互样式
<template>
<div>
<!-- <Button style="margin: 10px 0;" type="primary">刷新数据</Button> -->
<Card shadow class="image-show" title="最新安装包列表 - 扫码下载" v-model="pkgMsgs">
<ul class="myul">
<!-- 进入对象循环 -->
<li class="myli" v-for="(pkg,index) in pkgMsgs" :key="index">
<Card class="my-card">
<div class="order-number-label">
{{index+1}}
</div>
<img class="product-img" v-bind:src="pkg.imgUrl">
<!-- 下面是包体信息 -->
<div class="my-info-card">
<p>
<strong class="code-name">产品：{{pkg.product}}</strong>
</p>
<p>Version：{{pkg.version}}</p>
<p>类型：{{pkg.type}}</p>
<p>打包人：{{pkg.author}}</p>
<p>日期：{{pkg.timestamp}}</p>
</div>
<!-- 二维码和按钮布局 -->
<img class="qrcode-img" src="http://www.qmacode.com/resources/common/image/qmacode.png">
<p>
<Button class="on-mobile" to="itms-services://?action=download-manifest&url=https://11.111.xx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist" target="_blank" size="large">
点此安装 (手机)
</Button>
</p>
<p>
<Button class="on-pc" to="itms-services://?action=download-manifest&url=https://11.111.xx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist" target="_blank" size="large">
电脑点此下载ipa
</Button>
</p>
</Card>
</li>
</ul>
</Card>
<Card shadow class="image-show" title="iOS安装包下载 A">
<div id="qrcode" ref="qrcode">
<i-col span="12">
<p>扫码下载 TEST</p>
<row>
<a href="itms-services://?action=download-manifest&url=https://11.111.xx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist">点我安装测试包</a>
</row>
<row>
<a href="itms-services://?action=download-manifest&url=https://11.111.xx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist">点我安装测试包</a>
</row>
</i-col>
</div>
</Card>
</div>
</template>
<script>
import logoImg from '../../assets/images/logo.jpg'
import QRCode from 'qrcode2'
export default {
components: {QRCode},
methods:{
qrcodeScan () { //生成二维码
let qrcode = new QRCode('qrcode', {
width: 200, // 二维码宽度
height: 200, // 二维码高度
text: 'itms-services://?action=download-manifest&url=https://github.com/LeepengX/Learn_iOS/blob/master/ios_ipa_download.plist'
})
},
// 从后台抓取数据并更新列表
getPkgList (bundleid) {
console.log('testHTTP函数')
console.log(bundleid)
fetch('http://www.baidu.com/')
.then(response => response.json())
.then(json => {
this.pkgMsgs = [
{
product: '网易云音乐',
author: '晓明',
type: '内测包',
version: '4.1.6',
timestamp: '12-19 16:42',
imgUrl: 'icon图片地址'
},
{
product: '网易云音乐',
author: '晓明',
type: '企业包',
version: '4.2.2',
timestamp: '12-19 16:42',
imgUrl: 'icon图片地址'
},
{
product: '网易云音乐',
author: '晓明',
type: '企业包',
version: '4.2.0',
timestamp: '12-19 16:42',
imgUrl: 'icon图片地址'
}
]
console.log(this.pkgMsgs)
})
}
},
mounted () {
this.qrcodeScan(); // 注：需在mounted里触发qrcodeScan函数
this.getPkgList('bundleid');
},
name: 'scan_qrcode',
data () {
pkgMsgs: []
return {
pkgMsgs: [
{
product: 'Producct Name',
author: 'QA',
type: '企业包',
version: '8.8.8',
timestamp: '12-12 16:16',
imgUrl: 'icon图片地址'
}
],
}
}
}
</script>
<style>
.join-page{
text-align: center;
}
.qq-group-img{
width: 100%;
}
.join-page-other-icon{
width: 20px;
vertical-align: middle;
margin-right: 6px;
}
.join-page-other{
text-align: left;
}
.join-page-other .ivu-btn{
margin-right: 6px;
}
/* 自定义样式控制 */
.image-show{
margin-top: 24px;
padding-bottom: 24px;
}
.my-card{
text-align: center;
}
.my-info-card{
text-align: left;
margin-left: 10px;
}
.myul{
display:inline;
white-space:nowrap;
}
.myli{
list-style: none;
display: inline-block;
margin: 3px;
margin-left: 24px;
}
.product-img{
margin-top: 0px;
width: 60px;
height: 60px;
}
.qrcode-img{
margin-top: 12px;
width: 128px;
height: 128px;
}
.on-mobile{
margin-top: 12px;
background-color: #62D16B;
color: white;
}
.on-pc{
margin-top: 12px;
}
.order-number-label{
border-radius: 10px;
/* background-color:black; */
width:20px;
height:20px;
margin-left: -10px;
margin-top: -10px;
color: rgb(114, 120, 128);
}
</style>
验收：
扫码下载界面.png
接下来就是接入各种产品啦，有空加个下拉框，考虑接口请求下 bundleid.
大功告成！内网安装速度杠杠的，码字不易，烦请点个赞啊~
😸😺😺
网友评论