设为首页 加入收藏

TOP

CodePush热更新组件详细接入教程(二)
2019-08-31 01:04:01 】 浏览:121
Tags:CodePush 更新 组件 详细 接入 教程
dateMessage : '有新版本了,是否更新?' , //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, }, })

5、原生应用中配置CodePush

这里原生应用中配置CodePush我们需要分别配置iOS平台和Android平台

配置iOS平台

  • 使用Xcode打开项目,Xcode的项目导航视图中的PROJECT下选择你的项目,选择Info页签 ,在Configurations节点下单击 + 按钮 ,选择Duplicate "Release Configaration,输入Staging
image
image
  • 选择Build Settings tab,搜索Build Location -> Per-configuration Build Products Path -> Staging,将之前的值:$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改为:$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
image
image
  • 选择Build Settings tab,点击 + 号,选择Add User-Defined Setting,将key设置为CODEPUSH_KEY,Release 和 Staging的值为前面创建的key,我们直接复制进去即可
image
image
  • 打开Info.plist文件,在CodePushDeploymentKey中输入$(CODEPUSH_KEY),并修改Bundle versions为三位
image
image

iOS平台CodePush环境集成完毕

配置Android平台

6、发布更新的版本

在使用之前需要考虑的是检查更新时机,更新是否强制,更新是否要求即时等

更新时机

一般常见的应用内更新时机分为两种,一种是打开App就检查更新,一种是放在设置界面让用户主动检查更新并安装

  • 打开APP就检查更新

    最为简单的使用方式在React Natvie的根组件的componentDidMount方法中通过
    codePush.sync()(需要先导入codePush包:import codePush from 'react-native-code-push')方法检查并安装更新,如果有更新包可供下载则会在重启后生效。不过这种下载和安装都是静默的,即用户不可见。如果需要用户可见则需要额外的配置。具体可以参考codePush官方API文档,部分代码,完整代码请参照文档上面

    codePush.sync({ updateDialog: { appendReleaseDescription: true, descriptionPrefix:'\n\n更新内容:\n', title:'更新', mandatoryUpdateMessage:'', mandatoryContinueButtonLabel:'更新', }, mandatoryInstallMode:codePush.InstallMode.IMMEDIATE, deploymentKey: CODE_PUSH_PRODUCTION_KEY, }); 

    上面的配置在检查更新时会弹出提示对话框, mandatoryInstallMode表示强制更新,appendReleaseDescription表示在发布更新时的描述会显示到更新对话框上让用户可见

  • 用户点击检查更新按钮

    在用户点击检查更新按钮后进行检查,如果有更新则弹出提示框让用户选择是否更新,如果用户点击立即更新按钮,则会进行安装包的下载(实际上这时候应该显示下载进度,这里省略了)下载完成后会立即重启并生效(也可配置稍后重启),部分代码如下

    codePush.checkForUpdate(deploymentKey).then((update) => { if (!update) { Alert.alert("提示", "已是最新版本--", [ { text: "Ok", onPress: () => { console.log("点了OK"); } } ]); } else { codePush.sync({ deploymentKey: deploymentKey, updateDialog: { optionalIgnoreButtonLabel: '稍后', optionalInstallButtonLabel: '立即更新', optionalUpdateMessage: '有新版本了,是否更新?', title: '更新提示' }, installMode: codePush.InstallMode.IMMEDIATE, }, (status) => { switch (status) { case codePush.SyncStatus.DOWNLOADING_PACKAGE: console.log("DOWNLOADING_PACKAGE"); break; case codePush.SyncStatus.INSTALLING_UPDATE: console.log(" INSTALLING_UPDATE"); break; } }, (progress) => { console.log(p
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇使用Hbuilder将自己app发布到App .. 下一篇iOS-Xcode解决【workspace integr..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目