iOS 掃碼下載的實(shí)現(xiàn) - 擺脫蒲公英的種種坑

iOS 掃碼下載的實(shí)現(xiàn)

關(guān)鍵字：Plist iOS 掃碼下載 蒲公英 HTTPS VUE

故事背景

測試的產(chǎn)品在 jenkins 自動打包完成后，會上傳到蒲公英(https://www.pgyer.com/)這樣的第三方安裝包管理平臺上進(jìn)行托管。
本來長期薅羊毛就不行，這不，蒲公英開始變得不穩(wěn)定。

  • 上傳過程經(jīng)常失敗，卡住，上傳速度極慢。
  • 對每個免費(fèi)賬戶每天上傳的次數(shù)進(jìn)行限制。
  • 然后是硬盤壞掉丟失一些數(shù)據(jù)，畢竟免費(fèi)，免責(zé)。（個人感覺可能是企業(yè)運(yùn)行成本上升迫不得已了）
  • 接下來迅速來了一個安裝包審核機(jī)制，也就是安裝包上傳后需要審核通過才能掃描二維碼下載。而這個時間間隔是不確定的，白天可能 5 分鐘、10 分鐘，晚上 40 分鐘、1 個半小時，都遇到過，十分影響工作效率。

于是想著自己能夠搭建一套二維碼掃描下載，取代下蒲公英承擔(dān)的這部分工作。安卓的太簡單了，就是個文件服務(wù)器嘛，向來 iOS 棘手些，一起開始挑戰(zhàn)吧~

ps: 不會搭建 SpringBoot 后臺的同學(xué)可以提前查一下資料

提綱
  • 做一個 HTTPS 協(xié)議的網(wǎng)站
  • Plist 文件填寫 App 以及安裝包的相關(guān)信息
  • 將類似 deeplink 的一個鏈接放進(jìn)按鈕或者二維碼中

SpringBoot 后臺

  1. 搭建文件上傳服務(wù)，用于上傳 plist 配置文件
    本文使用了 SpringBoot 搭建后臺服務(wù)，具體的如何新建一個項(xiàng)目的教程網(wǎng)絡(luò)上隨便一搜索很簡單~
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>這里寫應(yīng)用名稱</string>
            </dict>
        </dict>
    </array>
</dict>
</plist>
bundle id

根據(jù)企業(yè)包、內(nèi)測包的不同要作相應(yīng)的更改。

安裝過程顯示圖片

指的是掃碼開始下載之后，手機(jī)上的占位圖標(biāo)（有灰色圓形下載進(jìn)度展示）的背景圖片。

尤其注意，plist 文件是要放在 HTTPS 協(xié)議的文件服務(wù)上的。

  1. 建立 HTTPS 網(wǎng)站鏈接

編輯 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 文件，和一些配置參數(shù)。
需要我們自己來生成：

生成 HTTPS 證書

在命令行輸入

keytool -genkey -alias tomcat -keyalg RSA -keystore ./server.keystore

會請求用戶進(jìn)行一系列的輸入

輸入密鑰庫口令:  123456
再次輸入新口令:  123456
您的名字與姓氏是什么?
  [Unknown]:  pengli
您的組織單位名稱是什么?
  [Unknown]:  netease
您的組織名稱是什么?
  [Unknown]:  netease
您所在的城市或區(qū)域名稱是什么?
  [Unknown]:  beijing
您所在的省/市/自治區(qū)名稱是什么?
  [Unknown]:  beijing
該單位的雙字母國家/地區(qū)代碼是什么?
  [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" 遷移到行業(yè)標(biāo)準(zhǔn)格式 PKCS12。

最終會在當(dāng)前目錄下得到一個 server.keystore 文件，然后把該文件放置到 SpringBoot 項(xiàng)目的根目錄。

like this

SpringBoot 項(xiàng)目目錄.png
  1. 開啟文件下載目錄

編輯 application.properties 文件

# 嘗試更換成 HTTPS
# 開放文件的訪問目錄（用于測試iOS 的掃碼下載）
#資源映射路徑為/image/**，你想在url訪問的請求路徑
spring.mvc.static-path-pattern=/CsvFiles/**
#資源映射地址為file:xxx，文件存放的真實(shí)路徑
spring.resources.static-locations=file:/Users/lipeng/Documents/qa/src/main/resources/CsvFiles
  1. 掃碼下載
    使用 VUE 生成二維碼，直接掃描下載（也可以直接在后臺 SpringBoot 項(xiàng)目中直接生成好圖片以供前端直接調(diào)用）
    地址：
itms-services://?action=download-manifest&url=https://11.111.xxx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist

VUE 生成二維碼教程

這里給出一個自己的 VUE 頁面實(shí)現(xiàn)

使用 For 循環(huán)制作，優(yōu)化交互樣式

<template>
  <div>
    <!-- <Button style="margin: 10px 0;" type="primary">刷新數(shù)據(jù)</Button> -->
    <Card shadow class="image-show" title="最新安裝包列表 - 掃碼下載"  v-model="pkgMsgs">
      <ul class="myul">
        <!-- 進(jìn)入對象循環(huán) -->
        <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">產(chǎn)品：{{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">
              點(diǎn)此安裝 (手機(jī))
              </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">
              電腦點(diǎn)此下載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">點(diǎn)我安裝測試包</a>
            </row>
            <row>
              <a href="itms-services://?action=download-manifest&url=https://11.111.xx.xxx/CsvFiles/CsvFiles1576660703964ios_ipa_download.plist">點(diǎn)我安裝測試包</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'
            })
    },
    // 從后臺抓取數(shù)據(jù)并更新列表
    getPkgList (bundleid) {
      console.log('testHTTP函數(shù)')
      console.log(bundleid)
      fetch('http://www.baidu.com/')
        .then(response => response.json())
        .then(json => {
          this.pkgMsgs = [
        {
          product: '網(wǎng)易云音樂',
          author: '曉明',
          type: '內(nèi)測包',
          version: '4.1.6',
          timestamp: '12-19 16:42',
          imgUrl: 'icon圖片地址'
        },
        {
          product: '網(wǎng)易云音樂',
          author: '曉明',
          type: '企業(yè)包',
          version: '4.2.2',
          timestamp: '12-19 16:42',
          imgUrl: 'icon圖片地址'
        },
        {
          product: '網(wǎng)易云音樂',
          author: '曉明',
          type: '企業(yè)包',
          version: '4.2.0',
          timestamp: '12-19 16:42',
          imgUrl: 'icon圖片地址'
        }
      ]
          console.log(this.pkgMsgs)
        })
    }
    },
  mounted () {
    this.qrcodeScan(); // 注：需在mounted里觸發(fā)qrcodeScan函數(shù)
    this.getPkgList('bundleid');
  },
  name: 'scan_qrcode',
  data () {
    pkgMsgs: []
    return {
      pkgMsgs: [
        {
          product: 'Producct Name',
          author: 'QA',
          type: '企業(yè)包',
          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>

驗(yàn)收：
掃碼下載界面.png

接下來就是接入各種產(chǎn)品啦，有空加個下拉框，考慮接口請求下 bundleid.

大功告成！內(nèi)網(wǎng)安裝速度杠杠的，碼字不易，煩請點(diǎn)個贊啊~

??????

點(diǎn)贊??！

贊?。?/h4>

??！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容