iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >浅谈React原生APP更新
  • 584
分享到

浅谈React原生APP更新

2024-04-02 19:04:59 584人浏览 八月长安
摘要

目录App更新流程大致的流程图更新APP信息1.首先定义需要获取的文件地址2.通过文件地址, 获取打完包后的版本信息3.替换现有文件中的信息大致流程图总结App更新流程 1.在 Ap

App更新流程

1.在 App 打开时请求接口或文件, 获取远程版本/版本更新说明/地址等等重用信息

2.通过库或者原生方案, 获取 App 的当前版本

3.比较远程版本和当前版本的区别(可以使用库,也可以自己写一个比较方案)

4.通过获取到的链接进行操作(可以跳转到对应网站下载,类似蒲公英这种,可以是 apk 链接, 通过安卓原生方法下载, 也可以是 App Store 链接)

大致的流程图

详细说明:

1.这些远程信息,可以是接口, 这样可以有一个中台来控制, 当然也可以是一个文件, 让运维来控制
关于信息,不止于远程版本, 在项目里还可以添加其他属性,如: versionCode, versionCodeSwitch , notUpdate , deleteApp

  • 1.1 versionCode 通过 code 来升级版本,一般是一个数字(在 iOS 里提交 App Store 的时候有需要用到的地方), 这样 versionName 并不会增加, 但是如果添加了 versionCode, 如果要升级 versionName, versionCode 也需要增加
  • 1.2 versionCodeSwitch 用来控制是否要根据versionCode来更新, 一般我都是在测试和其他环境开启,生产环境关闭的
  • 1.3 notUpdate 是否要根据远程信息来更新, 一般都是开启状态
  • 1.4 deleteApp 安卓 app 需要卸载重新安装, 因为直接安装可能存在某些问题, 将会使用此信息,先删除 APP, 再重新下载

2.获取当前手机的信息,方案较多, 我使用的是 React-native-device-info 这个库, 这个库里面提供的信息较全, 当然也可以使用原生方法, 来获取APP的信息

3.关于本地版本号和原生版本号之间的对比也是可以使用库,也可以自己写, 这边推荐两个库,下载量都是百万以上的: semver-compare 和 compare-versions, 这边附上我的 versionName 比较方案, 较为简陋:



compareVersion = (currentVersion: string): boolean => {
    const {versionName: remoteVersion} = this.remoteInfo || {}
    if (!remoteVersion) {
        return false
    }
    if (currentVersion === remoteVersion) {
        return false
    }
    const currentVersionArr = currentVersion.split('.')
    const remoteVersionArr = remoteVersion.split('.')
    for (let i = 0; i < 3; i++) {
        if (Number(currentVersionArr[i]) < Number(remoteVersionArr[i])) {
            return true
        }
    } 
    return false
}

关于下载 app 有很多方案, 最简单的就是跳转链接到第三方平台, 像蒲公英这样的, 使用 RN 提供的 Linking 方法来直接跳转
当然安卓是可以直接通过自己提供的地址下载的, 这里提供一个方法(此方法来源于网络):


@ReactMethod
public void installApk(String filePath, String fileProviderAuthority) {
    File file = new File(filePath);
    if (!file.exists()) {
        Log.e("RNUpdater", "installApk: file doe snot exist '" + filePath + "'");
        // FIXME this should take a promise and fail it
 return;
    }
    if (Build.VERSION.SDK_INT >= 24) {
        // api24 and up has a package installer that can handle FileProvider content:// URIs
 Uri contentUri;
        try {
            contentUri = FileProvider.getUriForFile(getReactApplicationContext(), fileProviderAuthority, file);
        } catch (Exception e) {
            // FIXME should be a Promise.reject really
 Log.e("RNUpdater", "installApk exception with authority name '" + fileProviderAuthority + "'", e);
            throw e;
        }
        Intent installApp = new Intent(Intent.ACTION_INSTALL_PACKAGE);
        installApp.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        installApp.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        installApp.setData(contentUri);
        installApp.putExtra(Intent.EXTRA_INSTALLER_PACKAGE_NAME, reactContext.getApplicationInfo().packageName);
        reactContext.startActivity(installApp);
    } else {
        // Old APIs do not handle content:// URIs, so use an old file:// style
 String cmd = "chmod 777 " + file;
        try {
            Runtime.getRuntime().exec(cmd);
        } catch (Exception e) {
            e.printStackTrace();
        }
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        intent.setDataAndType(Uri.parse("file://" + file), "application/vnd.Android.package-arcHive");
        reactContext.startActivity(intent);
    }
}

如果是我们自己提供下载服务,需要注意的是带宽, 如果网速过慢则用户体验过差, 还有就会带来更多的流量消耗, 其中的取舍,需要开发者决定

更新APP信息

在打包时, 通过脚本更新接口或者文件信息, 当然这个得看具体的打包方案
比如我现在的方案是使用 jenkins 打包, 在打包时使用 shell 脚本更新对应信息(有需要也可以使用其他语言脚本):

1.首先定义需要获取的文件地址


androidVersionFilePath="$WORKSPACE/android/app/build.gradle"  // 通过此文件获取安卓的版本信息
iosVersionFilePath="$WORKSPACE/ios/veronica/Info.plist" // 通过此文件获取iOS的版本信息
changeLogPath="$WORKSPACE/change.log" // 将版本更新信息存储在此文件中

2.通过文件地址, 获取打完包后的版本信息


getAndroidVersion(){
  androidVersion=$(cat $androidVersionFilePath  | grep "versionName" | awk '{print $2}' | sed 's/\"//g')
  androidCode=$(cat $androidVersionFilePath  | grep "versionCode " | awk '{print $2}' | sed 's/\"//g')
  androidDelete=$(cat $androidVersionFilePath  | grep "deleteApp" | awk '{print $4}' | sed 's/\"//g')
  return 0
}

getIOSVersion(){
  rows=$(awk '/CFBundleShortVersionString/ {getline; print}' $iosVersionFilePath)
  iosVersion=$(echo "$rows" | sed -ne 's/<string>\(.*\)<\/string>/\1/p')
  iosVersion=$(echo "$iosVersion" | sed 's/^[[:space:]]*//')

  rows2=$(awk '/VersionCode/ {getline; print}' $iosVersionFilePath)
  iosCode=$(echo "$rows2" | sed -ne 's/<string>\(.*\)<\/string>/\1/p')
  iosCode=$(echo "$iosCode" | sed 's/^[[:space:]]*//')
  return 0
}

desc=$(cat $changeLogPath | tr "\n" "#")

3.替换现有文件中的信息


sed -i '' "s/\"releaseInfo\":.*$/\"releaseInfo\": \"$desc\"/"  $JSONPath/$fileName
sed -i '' "s/\"versionName\":.*$/\"versionName\": \"$versionName\",/"  $jsonPath/$fileName
sed -i '' "s/\"versionCode\":.*$/\"versionCode\": \"$versionCode\",/"  $JsonPath/$fileName
sed -i '' "s/\"deleteApp\":.*$/\"deleteApp\": \"$deleteApp\",/"  $JsonPath/$fileName

我的文件是以 json 作为格式的,说明文字是可以任意填写的,会触发一些解析问题:

  • 不允许出现会造成 JSON.parse 解析失败的符号, 如 \ , ````, \n ,\r, \" 等等
  • 因为说明文字的换行我是通过 # 切割的, 所以也不允许出现这个符号

大致流程图

总结

关于 APP 原生版本的更新流程基本就是这样,当然这个流程不光适用 APP, 也可以用于 PC 软件的更新
除了原生版本的更新,还有热更新, 也是非常重要的,

以上就是浅谈React原生APP更新的详细内容,更多关于React原生APP更新的资料请关注编程网其它相关文章!

--结束END--

本文标题: 浅谈React原生APP更新

本文链接: https://www.lsjlt.com/news/127515.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 浅谈React原生APP更新
    目录App更新流程大致的流程图更新APP信息1.首先定义需要获取的文件地址2.通过文件地址, 获取打完包后的版本信息3.替换现有文件中的信息大致流程图总结App更新流程 1.在 Ap...
    99+
    2024-04-02
  • React原生APP更新的示例分析
    这篇文章主要介绍了React原生APP更新的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。App更新流程在 App 打开时请求接口或文件, 获取远程版本/版本更新说明...
    99+
    2023-06-15
  • 浅谈VUE uni-app 生命周期
    目录一、应用的生命周期二、页面生命周期三、组件生命周期总结一、应用的生命周期 onLaunch 当uni-app 初始化完成时触发(全局只触发一次)onShow 当 uni-ap...
    99+
    2024-04-02
  • 浅谈React底层实现原理
    目录1. props,state与render函数关系,数据和页面如何实现互相联动?2. React中的虚拟DOM常规思路改良思路(仍使用DOM)React的思路深入理解虚拟DOM3...
    99+
    2024-04-02
  • 浅谈React Component生命周期函数
    React组件有哪些生命周期函数?类组件才有的生命周期函数,包括ES6语法的class以及create-react-class模块: 分为几个阶段:挂载,更新,卸载,错误处理; 1,...
    99+
    2024-04-02
  • react native是不是原生app
    本篇文章和大家了解一下react native是不是原生app。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 “react native”不是原生app,“r...
    99+
    2024-04-02
  • 浅谈Redis缓存更新策略
     内存淘汰超时剔除主动更新说明不用自己维护,利用Redis的内存淘汰机制,当内存不足时自动淘汰部分数据。下次查询时更新缓存给缓存数据添加TTL时间,到期后自动删除缓存,下次...
    99+
    2022-11-13
    redis缓存策略 redis缓存更新策略 redis缓存更新机制
  • 浅谈PHP 8.2的更新进展
    PHP 8.2 带来了类型系统改进、只读 `readonly` 类、敏感参数隐藏支持、新的随机 `random` 扩展,以及包括简化和现代化 PHP 在内的多项功能,下面一起来看一下,希望对大家有帮助。PHP 8.2 带来了类型系统改进、只...
    99+
    2023-05-14
    PHP
  • 浅谈React双向数据绑定原理
    目录什么是双向数据绑定实现双向数据绑定数据影响视图视图影响数据如果已经学过Vue,并且深入了解过Vue的双向数据绑定的话,就会明白 Vue 2.0 双向数据绑定的核心其实是通过Obj...
    99+
    2024-04-02
  • 浅谈react 16.8版本新特性以及对react开发的影响
    目录react 16.8版本更新useEffectreact16.8版本更新解决了什么问题组件复用更便捷hooks和react diff算法总结Facebook团队对社区上的MVC框...
    99+
    2024-04-02
  • react实现原生下拉刷新
    react是基于vue下拉刷新做了一个小小的改动,供大家参考,具体内容如下 我是用js写的 用jsx文件转化为jsx格式 ,如果用下载的react项目需要稍微改一下 html代码 &...
    99+
    2024-04-02
  • 浅谈php原生类的利用 2(Error&SoapClient&SimpleXMLElement)
    除了上篇文章浅谈 php原生类的利用 1(文件操作类)_php spl原生类_葫芦娃42的博客-CSDN博客 里提到的原生利用文件操作类读文件的功能,在CTF题目中,还可以利用php原生类来进行XSS,反序列化,SSRF,XXE。 常用...
    99+
    2023-09-11
    php web安全
  • React更新渲染原理深入分析
    目录ScheduleLegacy modeConcurrent mode时间切片任务的优先级获取最先处理的taskReconcile前置知识从jsx到dom双缓存fiber tree...
    99+
    2022-12-23
    React更新渲染 React更新 React渲染
  • 浅谈MyBatis原生批量插入的坑与解决方案
    目录原生批量插入的“坑”解决方案分片 Demo 实战原生批量插入分片实现总结前面的文章咱们讲了 MyBatis 批量插入的 3 种方法:循环单次插入、MyBatis Plus 批量插...
    99+
    2024-04-02
  • React的生命周期函数初始挂载更新移除详解
    目录概述constructor初始挂载 更新移除概述 在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor  在类或组件创...
    99+
    2024-04-02
  • 原生js实现下拉刷新和上拉加载更多
    本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: t...
    99+
    2024-04-02
  • 原生js怎么实现下拉刷新和上拉加载更多
    本篇文章为大家展示了原生js怎么实现下拉刷新和上拉加载更多,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器...
    99+
    2023-06-26
  • react父组件更改props子组件无法刷新原因及解决方法
    目录项目场景:1、创建父组件2、创建子组件问题描述原因分析:解决方案:项目场景: 使用过vue的朋友都知道,vue父组件更改props的值,子组件是会刷新的,而react就未必。先看...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作