react項目打包超詳細整個流程


之前博客園賬號密碼忘記了,無法找回,無奈注冊了一個新賬號繼續發布

一:首先用hbuild打包,hbuild需要實名認證,android打包的是apk文件,ios打包的是ipa文件

(首先ios你需要證書和Bundle ID  )

Bundle ID  :例如:com.XX.XX

 

 

 android的話可以直接用hbuilder直接打包不需要證書

證書的話可以去申請:申請鏈接:https://developer.apple.com/account/

證書的話最好是企業申請,開發者賬號最好是企業

 

 

 如果說后期想要在企業內部使用,公司所有ios手機都能安裝的話,選擇企業級別開發者賬號;

讓公司給你提供:

開發者賬號:XXX,

序列號:XXX,

UDID:XX,

ECID:XX,

密碼:XX

蒲公英網站:生成二維碼下載安裝(有廣告,有些客戶不想用這些)

https://www.pgyer.com

第二種方法:

自己寫代碼生成二維碼下載鏈接

(首先我們要把apk文件和ipa文件都放到我們服務器上,生成一個下載鏈接)

例如:https://XXXX.ipa,ipa的記住一定要https開頭的,因為ios14版本及以上會有安全限制,http開頭的話,ios14無法下載的,此鏈接要保證用瀏覽器打開能直接下載,apk的也一樣

訪問該apk,ipa的地址,並且訪問時就會自動下載,說明地址准備的沒問題了

對於這樣你覺得就完了嗎?

由於apk,ipa文件不能直接在微信下載,需要跳出微信,在瀏覽器里下載;

apk的倒沒啥問題,ios由於如果項目未上架,沒放到應用市場里,那你就需要ipa在線下載

ipa在線下載安裝

要求:

1、ipa的下載地址放到plist的文件中,鏈接指定plist(plist格式見下文)

2、plist的鏈接要求一定是https的,而且必須是公網ssl,自簽名及免費的https不可用。

3、鏈接格式要求一定是符合蘋果規范的,itms-services://?action=download-manifest&url=https://****/***.plist


強調必須是公網ssl的https,其它不符合格式網址會報錯,提示域名無法連接。


目前可以使用https測試用的域名:https://XX.com/ 

具體方法:將plist上傳到服務器上

使用該地址鏈接格式為https://XX.com/用戶名/項目名/master/xxxx.plist

拼接鏈接:itms-services://?action=download-manifest&url=https://httpXX.com/用戶名/項目名/master/xxxx.plist

在iphone手機中打開Safari,訪問該鏈接,提示“在"iTunes"中打開鏈接嗎?",點擊打開

提示“httpXXX.com”要安裝“XXXXX”,點擊安裝即可在線下載安裝ipa。

<?php
 <?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://XX/zcdownload/XX.ipa</string>
                </dict>
                <dict>
                    <key>kind</key>
                    <string>full-size-image</string>
                    <key>needs-shine</key>
                    <true/>
                    <key>url</key>
                    <string>http://XX/zcdownload/123.png</string>
                </dict>
                <dict>
                    <key>kind</key>
                    <string>display-image</string>
                    <key>needs-shine</key>
                    <true/>
                    <key>url</key>
                    <string>http://XX/zcdownload/123.png</string>
                </dict>
            </array>
            <key>metadata</key>
            <dict>
                <key>bundle-identifier</key>
                <string>com.cur.app</string>
                <key>bundle-version</key>
                <string>1.0.0</string>
                <key>kind</key>
                <string>software</string>
                <key>title</key>
                <string>app名字</string>
            </dict>
        </dict>
    </array>
</dict>
</plist>
 '
?>

 

index.html   

 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>某某App</title>
        <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta content="telephone=no" name="format-detection" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                height: 100%;
            }
            
            .container {
                padding: 0 20px;
                background-image: url(images/bg.jpg);
                background-position: center center;
                background-size: 100% 100%;
                height: 100%;
            }
            
            .dl-step {
                padding-top: 58px;
            }
            
            .dl-step .step {
                clear: both;
            }
            
            .dl-step .index {
                float: left;
                height: 36px;
                width: 36px;
                border: 2px solid #fff;
                background-color: #ffba26;
                border-radius: 50%;
                text-align: center;
                line-height: 36px;
                position: relative;
                background-clip: padding-box;
                color: #fff;
            }
            
            .dl-step .content {
                margin-left: 70px;
                border-radius: 4px;
                padding: 8px 13px 13px;
                position: relative;
            }
            
            .dl-step-1 {
                margin-bottom: 60px;
                position: relative;
            }
            
            .dl-step-1 .content {
                background-color: #ffba26;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
                font-size: 15px;
                color: #fff;
                padding: 0 13px;
                height: 38px;
                line-height: 38px;
            }
            
            .dl-step-1:before {
                content: "";
                display: block;
                width: 89px;
                height: 75px;
                position: absolute;
                right: 0;
                top: -56px;
                background-image: url(images/icons.png);
                background-size: auto 213px;
                background-repeat: no-repeat;
                background-position: 0 0;
                z-index: 10;
            }
            
            .dl-step-1 .index:before {
                content: "";
                display: block;
                height: 45px;
                width: 2px;
                background-color: #fff;
                position: absolute;
                top: 45px;
                left: 17px;
                border-radius: 2px;
            }
            
            .dl-step-2 {
                margin-bottom: 58px;
            }
            
            .dl-step-2 .index,
            .dl-step-3 .index {
                background-color: rgba(39, 41, 57, 0.2);
            }
            
            .dl-step-2 .content,
            .dl-step-3 .content {
                background-color: rgba(255, 255, 255, 0.9);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }
            
            .dl-step-2 .content .tip,
            .dl-step-3 .content .tip {
                margin-bottom: 2px;
                font-size: 15px;
                color: #333;
                font-family: Microsoft Yahei;
            }
            
            .dl-step-2 .index:before {
                content: "";
                display: block;
                height: 128px;
                width: 2px;
                background-color: #fff;
                position: absolute;
                top: 45px;
                left: 17px;
                border-radius: 2px;
            }
            
            .dl-devices {
                overflow: hidden;
            }
            
            .dl-devices .item {
                background-color: #ceecfb;
                width: 49%;
                float: left;
                padding: 5px 0;
            }
            
            .dl-devices .android {
                margin-left: 1px;
            }
            
            .dl-devices .name {
                float: left;
                background-color: #fff;
                padding: 0 4px;
                color: #666;
                line-height: 14px;
                font-size: 12px;
                font-family: Microsoft Yahei;
            }
            
            .dl-devices .icon {
                height: 40px;
                clear: left;
                background-image: url(images/icons1.png);
                background-size: auto 213px;
                background-repeat: no-repeat;
            }
            
            .dl-devices .desc {
                color: #666;
                font-size: 10px;
                text-align: center;
                font-family: Microsoft Yahei;
            }
            
            .dl-devices .ios .icon {
                background-position: center -85px;
            }
            
            .dl-devices .android .icon {
                background-position: center -131px;
            }
       
            .dl-step .content:before {
                content: "";
                display: block;
                height: 0;
                width: 0;
                border: 5px solid transparent;
                border-right-color: rgba(0, 0, 0, 0.1);
                position: absolute;
                top: 14px;
                left: -11px;
            }
            
            .dl-step .content:after {
                content: "";
                display: block;
                height: 0;
                width: 0;
                border: 5px solid transparent;
                position: absolute;
                top: 13px;
                left: -10px;
            }
            
            .dl-step-1 .content:after {
                border-right-color: #ffba26;
            }
            
            .dl-step-2 .content:after {
                border-right-color: rgba(255, 255, 255, 0.9);
            }
        </style>
    </head>
    
    <div id="weixin-tip" style="margin: 0px; background: #0e0e0e;"></div>

    <body>
        <script>
            //二維碼掃碼
            goDownload();
            // 去下載
            function goDownload() {
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                // 這里是安卓瀏覽器
                if(isAndroid) {
                    if(is_weixn()) {
                        var weixin_tip = document.getElementById("weixin-tip");
                        var img = document.createElement("img");
//                        img.src = "#";
//                        weixin_tip.appendChild(img);
                    } else {
                        window.location.href = 'http://XX.XX.com:8229/XX.apk';
                    }
                };
                // 這里是iOS瀏覽器
                if(isIOS) {
                    var url = "itms-services://?action=download-manifest&url=https://XX.XX.com/zcdownload/php.plist";
                    window.location.href = url;
                    // 跳AppStore下載地址
                }
            }
            // 微信掃碼判斷
            function is_weixn() {
                var ua = navigator.userAgent.toLowerCase();
                if(ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            };
        </script>
        <div class="container">
            <div class="dl-step">
                <div class="step dl-step-1">
                    <div class="index">1</div>
                    <div class="content">點擊右上方</div>
                </div>
                <div class="step dl-step-2">
                    <div class="index">2</div>
                    <div class="content">
                        <p class="tip">選擇在瀏覽器中打開下載</p>
                        <!--<div class="dl-devices">
                            <div class="item ios">
                                <span class="name">iOS</span>
                                <div class="icon"></div>
                                <p class="desc">在Safari中打開</p>
                            </div>
                            <div class="item android">
                                <span class="name">安卓</span>
                                <div class="icon"></div>
                                <p class="desc">在瀏覽器中打開</p>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

 把index.html放到服務器上,生成一個http鏈接

借助草料二維碼,生成一個二維碼實現android和ios公用一個二維碼下載安裝app

如果ios項目你放到應用市場的話,也就不需要上述操作了,可以直接去應用市場下載

關於開發者賬號---簡單個人分析

 

蘋果開發者賬號的三種類型

 

一、賬號的區別(年費/上架/udid數等)

 

1、個人(Individual):

 

1費用:99美元一年

 

2App Store上架:是

 

3)最大udid支持數:100

 

4)協作人數:1人(開發者自己)

 

5)該賬號在App Store銷售者只能顯示個人的ID,比如 Abu

 

說明:個人開發者可以申請升級公司

 

2、公司(Company):

 

1)費用:99美元一年

 

2App Store上架:是

 

3)最大udid支持數:100

 

4)協作人數:多人

 

5)該賬號該賬號在App Store銷售者可以顯示類似Studios,或者自定義的團隊

 

名稱,例如:Game omiga

 

6)分4種管理級別權限:

 

Admin Legal權限:超級管理員。可以管理開發者和管理app store中的應用。

 

Admin權限:管理員,可以管理開發者。添加測試機子和管理團隊證書。

 

Member權限:是普通開發者。只能下載證書和使用證書

 

No Access權限:沒有相應的權限。

 

7)公司賬號可以自己定義一定數量的開發者子賬號,不過只能由主賬號來執行

 

提交,發布等操作。

 

說明:允許多個開發者進行協作開發,比個人多一些帳號管理的設置,可設置多個Apple ID,分4種管理級別的權限。公司帳號比個人多一些帳號管理的設置:個人帳號集AgentAdminDeveloper等為一身,而公司帳號可以設置不同的AppleID來擔當。

 

3、企業 (Enterprise

 

1)費用:299美元一年

 

2App Store上架:否

 

即該賬號開發應用不能發布到App Store,直接掃碼下載,蘋果的iOS設備UDID數量不限制。

 

3)最大udid支持數:不限制

 

4)協作人數:多人

 

5)企業開發者不能通過appstore途徑發app,但是可以直接無上限的分發

 

appin-house 發布)

 

明:企業賬號不能上線應用到App Store,適用於那些不希望公開發布應用的企業且還需要大量安裝使用的公司。

 

 

 

二、該怎么選擇賬號類型?

 

Ps:簡單個人分析

 

1.個人賬號:簡單的發布一個應用,適合個人公司用戶項目不上架的話,最多100ios手機,需要自己一個一個添加udid,加滿了不能再加

 

2.公司賬號:希望以公司品牌來發布應用,適合公司用戶,最多100ios手機,需要自己一個一個添加udid,加滿了不能再加

 

3.企業賬號:希望不審核,直接掃碼下載應用,適合一些不可說目的的用戶項目不用上架,但不好申請,審核不易

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM