react项目打包超详细整个流程

时间:2024-03-09 19:46:07

之前博客园账号密码忘记了,无法找回,无奈注册了一个新账号继续发布

一:首先用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.企业账号:希望不审核,直接扫码下载应用,适合一些不可说目的的用户项目不用上架,但不好申请,审核不易