美文网首页
React Native CodePush 热更新流程(1)

React Native CodePush 热更新流程(1)

作者: 求知者x | 来源:发表于2018-04-02 14:31 被阅读0次

    此教程是在Mac 上完成

    mysql安装

    网络上有很多mysql的安装教程,这里不在赘述,只要记住用户名和密码 就行了,用户名一般是root,密码是你登陆mysql的密码(第一次登录成功后,建议修改个好记的密码)

    搭建和配置CodePush热更新服务器

    code push的热更新服务器有两种:一种是开源的code-push-server,另一个就是微软的codepush,这个需要注册codepush 账号等等,这里是用第一种方式。

    git clone https://github.com/lisong/code-push-server.git
    cd code-push-server
    yarn //相当于npm install

    //配置数据库,code-push-server使用mysql作为数据库
    //在code-push-server目录中

    ./bin/db init --dbhost localhost --dbuser root --dbpassword mysqlpassword// mysqlpassword为安装的mysql的密码

    //修改配置文件 code-push-server/config/config.js

      db: {
        username: process.env.RDS_USERNAME || "root",
        password: process.env.RDS_PASSWORD || 'mysqlpassword',//这个是你mysql的密码
        database: process.env.DATA_BASE || "codepush",
        host: process.env.RDS_HOST || "127.0.0.1",
        port: process.env.RDS_PORT || 3306,
        dialect: "mysql",
        logging: false
      },
      local: {
        // Binary files storage dir, Do not use tmpdir and it's public download dir.
        //storageDir需要自己创建
        storageDir: "/Users/nichol/code-push/Sites/storage",
        // Binary files download host address which Code Push Server listen to. the files storage in storageDir.
    //自己电脑或服务器的ip地址
        downloadUrl: "http://youip:3000/download",
        // public static download spacename.
        public: '/download'
      },
      jwt: {
        // Recommended: 63 random alpha-numeric characters
        // Generate using: https://www.grc.com/passwords.htm
      //自己通过上面的网址生成
        tokenSecret: 'u8zYR4YyhpVTzBVVPBqs8Gcke9lOGfdHpnRn7EETmcYcHQmTzLEJW0AnPdITpgn'
      },
    common: {
        /*
         * tryLoginTimes is control login error times to avoid force attack.
         * if value is 0, no limit for login auth, it may not safe for account. when it's a number, it means you can
         * try that times today. but it need config redis server.
         */
        tryLoginTimes: 0,
        // CodePush Web(https://github.com/lisong/code-push-web) login address.
        //codePushWebUrl: "http://127.0.0.1:3001/login",
        // create patch updates's number. default value is 3
        diffNums: 3,
        // data dir for caclulate diff files. it's optimization.
        //自己创建
        dataDir: "/Users/nichol/code-push/Sites/storage",
        // storageType which is your binary package files store. options value is ("local" | "qiniu" | "s3")
        storageType: "local",
        // options value is (true | false), when it's true, it will cache updateCheck results in redis.
        updateCheckCache: false
      }
    

    到这里coder-push-server基本配置已经完成

    启动并登录CodePush热更新服务器

    启动服务器,在code-push-server目录下

    ./bin/www

    安装一个重要的命令行工具,以后会经常用到的

    yarn global add code-push-cli

    登录 code-push-server

    code-push login http://127.0.0.1:3000 //执行完这个命令 需要输入一个token值
    //然后在浏览器中输入http://127.0.0.1:300 输入用户名admin,密码123456 , 然后登录 获取token,复制token ,粘贴到 需要输入token的地方

    在服务器端添加应用

    code-push app add AwesomeProject-android android //AwesomeProject为自己创建的工程名
    code-push app add AwesomeProject-ios ios

    可以使用code-push app list 命令查看

    配置客户端

    在你的RN工程根目录下执行如下命令

    yarn add react-native-code-push
    react-native link react-native //在andorid中需要一些依赖,这个命令会自动添加依赖

    配置android端的MainApplication.java文件

        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
                new CodePush(“efJOrJ9Ae9mcKDVUBImsiW3swX8t4ksvOXqog”, getApplicationContext(), BuildConfig.DEBUG,"http://yourip:3000")
          );
        }
    
    

    CodePush 构造方法的第一个参数是Deployment Key(请填写自己的key值,我要测试线上版本,所以使用的是Production的deployment key),这个Deployment Key分为两类Production(生产版本)和Staging(测试版本),通过下列命令可以查看相关key:

    code-push deployment list AwesomeProject-android -k

    CodePush 构造方法的的第四个参数是热更新的服务器地址,一般是“http://yourip:3000”这个形式的

    修改App.js文件,类似如下:

    import React, { Component } from 'react';
    import {
      Text,
      View
    } from 'react-native';
    import CodePush from 'react-native-code-push';
    let codePushOptions = {
        //设置检查更新的频率
        //ON_APP_RESUME APP恢复到前台的时候
        //ON_APP_START APP开启的时候
        //MANUAL 手动检查
        checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME
    };
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });
    type Props = {};
    export default class App extends Component<Props> {
    
        //如果有更新的提示
        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>
              <Text>这是测试code push</Text>
            </View>
        );
      }
    }
    

    到此客户端相关配置完成

    测试Android 线上版本的热更新

    将RN工程中的android部分导入的Android Studio中,方便原生代码的开发。配置keystore等,使之能编译出release版本。

    在android/app/src/main 目录下 创建一个assets目录(自动生产的bundle会放在这里的)
    在RN工程根目录下,执行如下命令:

    react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
    //--entry-file index.js 这个index.js名字根据RN工程根目录下存在的文件确定,有的是存在index.andorid.js的

    在android项目部分执行assembleRelease ,生成最终的release版本的apk文件,将这个文件安装到手机中。

    修改js文件使之发生改变,在RN工程根目录运行

    code-push release-react Awesome-android android -d Production -m true

    以上名利是强制更新线上的版本 release-react 默认是发布Staging的版本,所以必须加-d Production,如果验证 Staging版本就不需要-d Production

    退出手机的应用,重新进入应用,会看到一个更新提示对话框,点击更细即可

    相关文章

      网友评论

          本文标题:React Native CodePush 热更新流程(1)

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