美文网首页iOS
RN - codePush热更新 - IOS&RN配置

RN - codePush热更新 - IOS&RN配置

作者: Th丶小伟 | 来源:发表于2019-05-16 17:47 被阅读43次

    codePush 安装

    安装codePush CLI

    安装CodePush指令,直接在终端上输入如下命令即可,注意:这个CodePush指令只需要全局安装一次即可,如果第一次安装成功了,那后面就不在需要安装

    npm install -g code-push-cli
    

    注册 CodePush账号

    code-push register
    

    注意:当执行完上面的命令后,会自动打开一个授权网页,让你选择使用哪种方式进行授权登录 推荐使用gitHub
    注册成功后会有一个key
    把这个KEY在终端填写进去即可。可用登录命令验证是否登录成功
    CodePush注册登录相关命令:
    code-push login 登陆
    code-push loout 注销
    code-push access-key ls 列出登陆的token
    code-push access-key rm <accessKye> 删除某个 access-key

    在CodePush服务器注册App

    code-push app add  <appName> <platform> react-native
    //例子:code-push app add CodePushDemo ios react-native
    

    CodePush管理App的相关命令:
    code-push app add 在账号里面添加一个新的app
    code-push app remove 或者 rm 在账号里移除一个app
    code-push app rename 重命名一个存在app
    code-push app list 或则 ls 列出账号下面的所有app
    code-push app transfer 把app的所有权转移到另外一个账号

    创建成功后会有Staging&Production 两个KEY 这两个KEY很重要 原生集成CodePush 需要使用到。

    后面如果忘记可输入以下命令插看:
    code-push deployment ls <appName> -k

    RN集成codePush

    安装第三方库 codepush
    npm install react-native-code-push --save
    连接 codepush
    react-native link react-native-code-push
    

    在app.js里面替换以下代码

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
        Platform,
        StyleSheet,
        Text,
        View
    } from 'react-native';
    
    import CodePush from "react-native-code-push"; //引入code-push
    
    let codePushOptions = {
        //设置检查更新的频率
        //ON_APP_RESUME APP恢复到前台的时候
        //ON_APP_START APP开启的时候
        //MANUAL 手动检查
        checkFrequency : CodePush.CheckFrequency.ON_APP_START
    };
    
    const instructions = Platform.select({
        ios: '现在是5.16 15:40分',
        android: 'Double tap R on your keyboard to reload,\n' +
            'Shake or press menu button for dev menu',
    });
    
    class App extends Component  {
    
        //如果有更新的提示
        syncImmediate() {
            CodePush.sync( {
                    //安装模式
                    //ON_NEXT_RESUME 下次恢复到前台时
                    //ON_NEXT_RESTART 下一次重启时
                    //IMMEDIATE 马上更新
                    installMode : CodePush.InstallMode.IMMEDIATE ,
                    //对话框
                    updateDialog : {
                        //是否显示更新描述
                        appendReleaseDescription : true ,
                        //更新描述的前缀。 默认为"Description"
                        descriptionPrefix : "更新内容:" ,
                        //强制更新按钮文字,默认为continue
                        mandatoryContinueButtonLabel : "立即更新" ,
                        //强制更新时的信息. 默认为"An update is available that must be installed."
                        mandatoryUpdateMessage : "必须更新后才能使用" ,
                        //非强制更新时,按钮文字,默认为"ignore"
                        optionalIgnoreButtonLabel : '稍后' ,
                        //非强制更新时,确认按钮文字. 默认为"Install"
                        optionalInstallButtonLabel : '后台更新' ,
                        //非强制更新时,检查到更新的消息文本
                        optionalUpdateMessage : '有新版本了,是否更新?' ,
                        //Alert窗口的标题
                        title : '更新提示'
                    } ,
                } ,
            );
        }
    
        componentWillMount() {
            CodePush.disallowRestart();//页禁止重启
            this.syncImmediate(); //开始检查更新
        }
    
        componentDidMount() {
            CodePush.allowRestart();//在加载完了,允许重启
        }
    
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.welcome}>
                        Welcome to React Native!
                    </Text>
                    <Text style={styles.instructions}>
                        To get started, edit App.js
                    </Text>
                    <Text style={styles.instructions}>
                        {instructions}
                    </Text>
    
                    <Text style={styles.instructions}>
                        这是更新的版本
                    </Text>
                </View>
            );
        }
    }
    
    //这一行是必须的
    App = CodePush( codePushOptions )( App );
    export default App;
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
        instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: 5,
        },
    });
    
    

    到此 RN 已经 集成成功codepush

    IOS集成codePush

    使用Xcode打开项目,Xcode的项目导航视图中的PROJECT下选择你的项目,选择Info页签 ,在Configurations节点下单击 + 按钮 ,选择Duplicate "Release Configaration,输入Staging


    6342050-fbfc9b79199d4a3f..jpg.png

    选择Build Settings tab,搜索Build Location -> Per-configuration Build Products Path -> Staging,
    将之前的值:

    值:$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 
    改为:$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
    
    6342050-369c31244b0f528f..jpg.png

    选择Build Settings tab,点击 + 号,选择Add User-Defined Setting,将key设置为CODEPUSH_KEY。
    特别注意: Release 和 Staging的值为前面CodePush创建项目时显示的查询Production跟StagingKey

    6342050-663dc2df47438cc5..jpg.png

    打开Info.plist文件,在CodePushDeploymentKey中输入$(CODEPUSH_KEY),并修改Bundle versions为三位1.0.0


    6342050-c4392091edc647a0..jpg.png

    在cocoaPod 里面添加:

    pod 'CodePush', :path => '../node_modules/react-native-code-push'
    

    获取热更新连接

    #import <CodePush/CodePush.h>
    jsCodeLocation= [CodePush bundleURL];
    //之前是:jsCodeLocation=[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    

    这个时候IOS环境就集成完毕。
    Staging环境为codepush热更新的测试环境 类似Xcode的debug模式。之后发布热更新典型的流程是先发在staging环境下没问题了在发布到Production环境

    直接运行Staging环境会报寻找不到第三方库Base64
    先运行Release环境之后会提示是否需要自动设配之前导入的第三方库。点击 是, 之后Staging环境就不会报错了。

    发布热更新

    非常重要:先在RN项目的根目录创建文件夹 bundle 在bundle里面在创建ios文件夹

    生成main.jsbundle包:

    生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
    例子:
    react-native bundle --entry-file index.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
    

    将生成的main.jsbundle拖入ios项目中

    将main.jsbundle上传到codepush服务器

    code-push release-react <AppName> <Platform> --t <填写IOS项目版本号> --des <本次更新说明>
    **注意:**CodePush默认是更新Staging 环境的,如果发布生产环境的更新包,需要指定--d参数:--d Production,如果发布的是强制更新包,需要加上 --m true强制更新
    例子:
    code-push release-react codePushDemo ios --t 1.0.0 --dev false  --des "这是第一个更新包" --m true
    
    

    巨坑出现: 填写IOS项目版本号!!! 填写IOS项目版本号!!!IOS项目版本号是多少就填多少!!!!

    查看上传历史记录

    //查询Production
     code-push deployment history <AppName> Production
    //查询Staging
     code-push deployment history <AppName> Staging 
    

    之后版本更新 需要重新打包main.jsbundle 在将main.jsbundle发到codepush上去。

    相关文章

      网友评论

        本文标题:RN - codePush热更新 - IOS&RN配置

        本文链接:https://www.haomeiwen.com/subject/gucwaqtx.html