背景说明

最近参加公司开发一款移动端App,因为原生开发成本较大(没有人会原生开发),终究公司决定选用H5+cordova实现web打包App。再屡次测验之后,咱们开发出来了第一版体系,并成功发e 0 7 q版。不可避免l l a X m K M W的(bug、新的需求)提上来了,对体系进行修改之后,晋级就成了一个大难题(技能不熟练)。咱们选用了每次晋级让用户卸载再从头下载新的版别装置。在用户体会上成了老大难….

处理方案

查阅相关材料,咱们发现web打包app晋级/ a k 3 1 Y ( F a主要分n [ c z m r为两种办法:手动晋级、和自动更新。这两种办法各有优缺点。下面是我的踩坑之旅

手动晋级

百度H5 APP cordova 晋级,获取到的大多数都是下面的自动更新的办法,在咱们的App晋级中许多时分不X 1 D v . 7满足运用要求,针对新增cordova插件等情况C ( g L , & A : )也完全不够用;另外一种就是凭借各种cordova插件,Z { [因为咱们App具有一些特别需求,网上的自动晋级插件在许多方面不能实现期望的作用。终究只能自己想办法处理。在通过一轮评论之v 7 后,咱们定下了如下T | u流程:

cordova热更新和手动升级

下面咱们就跟着上面的流程图来实现相关功能。

获取当前版别号

凭借cordova-plugin-app-version插件,能够获取当前版别信息,详细运用办法如下:

// 装置插件cordova-plugin-app-version(指令如下,不会用的百度cordova插E Z T 3件装置)
cordova pa . 7lugin add cordova-plu0 - 5 : # ygin-app-version
// 获取版别号
var getVersN R Y y W #ion = funcW o s 6tion() {
cordova.ge1 r Y ,tAppVersion.getVersionNumbex A Zr().then(version => {
console.log(version)
})
}

留意:

  1. 该办法获取的版别号是Cordova项目下config.xml中所设置的version值(如下图所示)
  2. 该办法在H5中运用必须在window.onload履行之后(H5DOM元素加载结束)
cordova热更新和手动升级

获取最新版别号

此处我选用的是树立一个web服务器,并在该服务器中建了一个json文件,在json文件中保存app历次版别信息(依据自己的情况来定,此处不做说明)

提示最新的版别

cordova热更新和手动升级

展现前史b [ G $版别信息

cordova热更新和手动升级

下载最新版别并装置

凭借c% m ? O 3 ,ordoU 9 b e / W 5 )va-plugin-file、cordova-plugt e } # 7 S W nin-file-transfer和cordova-plugin-file-opener2插件。其中cordova-plugin-file获取程序相关目录,coQ I b 3 g ?rdova-pli + l r o fugin-file-transfer实现文件上传功能,cordova-plugin-file-opener2实现翻开本地E 8 s O G 1 B i文件。

// 定义 X  u # w r R大局下载函数
document.addEventListener("deviceready", onDeviceReady, false)
function onDeviceReady() {
console.log(FileTransfer)
}
// 设置文件本地保存目录
var saveUrO K v p C ] /l = cordova.file.externalDataDirectory + 'fileName'
// 下载保存并装置
var down =( m O [ a k h J nw n E s Cew FileTra% | 7 b `nsfer()
down.download(
url: '远程文件地点目录',
saveUrl,
functioo _ o u 2 cn(entK  ! a z 1ry) {
let url = entry.8 U @toURL()
cordova.plugins.fileOpener2.op7 ? H : 6 P a 9 jen(url, fileMIMEType, {
error: funf o h = ^ y & +ction(e) {
console.log('open fail')
},
success: function() {
console9 a h S ; |.log('oper r P / $n7 f w O & ! d & D successfully')
}
})
}
)

fileMIMEType可取的值

            {".3gp",    "video/3gpp"},
{".apk",    "application/vnd.android.package-archive"},: O $ % D c
{".asf",    "video/x-msl G ; Q = O --asd E P q ) sf"},
{".avi",    "video/x-msvideo"},
{".bin"( - i p z,    "application/octet-stream"},
{".bmp",    "image/f s A A j ebmp"},
{".c",  "text/plain"}Z & G # 3 @ Q j,
{".class",  "apW  z G t e N `plicX T U V & f ) $ation/octet-stream"},
{".conf",   "text/plain"},
{".cpp",    "text/plain"},
{".doc",    "applicationA v Z @ _ D N/msword"},
{".docx",   "application/vnd.openxmlfoL m 2 grmats-of- v k e U Hficedocument.wordprocessingml.document"},
{".; j S : E b / ?xls",    "application/vnd.ms-excel"},
{".xlsx",   "application/vnd.openxmlformats-officedocument.spreadsheetml.shx 7 q m $ s h ; .eet"}* H C,
{".exe",    "application/ocj : Vtet-stre+ ^ j - @ = !am"},
{".gif",    "image/gif"},
{".gtar",   "a~ O 7pplic/ k O : )ation/x-gtar"},
{".gz", "application/x-gzip"},
{".h",  "text/plain"},
{".htm",    "text/hp A J itml"},
{".html",   "text/html"},
{".jar",    "application/java-archive"},
{".java",   "text/plain"},
{".jpeg",   "image/jpeg"},
{".jpg",    "image/jpeg"},
{".js", "application/x-javascript"},
{".log",    "text/plain"},
{k ] n f 0 W r".m3u",    "audio/x-mpegurl"},
{".m4a",    "aC | ( w O ` / ludio/mp4a-latm"},
{".m4b",E J 1 & L A y )    "audio/mp4a-latm"},
{".m4p",    "audio/mp4a-latm"},
{".m4u",    "video/vnd.mpegurl"},
{".m4v",    "video/x-m4v"},
{".mov",    "video/quicktime"},
{".mp2H 1 $",    "audio/x-mpeg"},
{".mp3",| F I y w d +    "audio/x-mpeg"},
{".mp4",    "video/mp4"},
{".mpc",    "application/vnd.mpohun.certificate"}W u e ! R,
{".mpe",    _ B U | q ~ 0"v6 t Zideo/mpeg9 { F l"},
{".g n l G l ^ m F :mpeg",   "videoV w //mpeg"},
{".mpg",    "video/mpe` T Z Wg"},
{".mpg4",   "video/mp4"},
{".mpga",   "t R e - b vaudio/mpeg"},
{".msg",    "application/vnd.ms-outlookX & = D g"},
{".ogg",    "audio/ogg"},
{".pdj h X 0 | kf",    "application/pdf"},
{".png",    "image/png"},
{".pps",    "application/vnd.ms-powerpoint"},o ; F (
{".ppt",    "applR P 0 l _ o ! F ^ication/vnd.ms-powerpoint"},
{".pptx",   "application/vnd.openxmlformats-Z F ;officedocument.presentationml.presentation"},
{".prop",   "text/plain"},
{".rc", "text/plain"},
{".rmvb",   "audio/x-pn-realaudio"g  : ` : v y m},
{".rtf",    "application/rtf"},
{".sh", "text/plain"},
{".tar",    "application/x-tar"},
{".tgz",    "application/x-compressed"},
{".txt", K K T d &    "text/plain"},
{".wav",    "audio/x-wav"},
{".wma",    "audio/x-ms-wma"},
{".wmv",    "audio/x-ms-wmv"},
{".wps",    "application/vnd.mY | 9 w O O I Js-works"},
{".xml",    "tS ~ a  %ext/pv ? b V dlain"},
{R 9 j d /".z",  "application/x-compress"},
{".zip",    "application/x-zip-compressed"},
{"",        "*/*"}
————————————————

cordova-P E Y o p S % W Vplugin-file 可获` R W [ D取的本地文件目录

//当前程序的目录  
console.info(cordova.file.applicationDirectory);
//程序的数据目录  
console.info(cordova.file.applicationStorageDirectory);
//程序的数据目录  
console.info(cordova.f$ $ F )ile.dataDirectory);w ; P _
//程序的暂存目录  
con3 & I Z ^ S i u 2soled f ~ y r y o U.info(cordova.file.cacheDirecto/ U v dry);
//Android扩展存储使用目录  
console.info(cordova.file.externalApplicationStorageDirectory);
//Android扩展f 2 M }存储数据目录  
console.info(cordova.file.externalDataDirectory);
//Android扩展存储缓存目录  
console.info(cordova.file.ex. M | V e MternalCacheDirectoV B , 0ry);
//Android扩展根目录  
console.info(cordova.file7 J , k Z i.tempDirectory)d 8 *;
/**iOS中的目录**/
//暂时目录  
console.info(cordova.file.tempDirectory);
//云存储目录  
console.info(cordova.file.syncedDataDirectory);
//文档目录  
console.info(corD  } = n : ( |dova.file.document2 k usDirectory);
//共享目录  
console.info(cordova.fS r @ : 9 Qile.sharedDirectory);

留意:

  1. Android~ : f 08.0以上对软件做了限制,不允许翻开未知来源的软件。处理办法:
  <!--config.xml增加以下内容-->
<platform name="android"&C E %gt;
<config-file parent="/manifest" target="AndroidManifest.xR L ? f - S  Pml" xmlns:and/ v & H l Hroid="http://schemas^ y 8 d - S G.android.com/ai K 2 | 7pk/res/a@ 8 0 # !ndroid"&u : _ ` I zgt;
<uses-permission android:name=o 7 d  F 2 -"android.permission.REQUEST_INSTALL_PACKAGES" />
</config-file>
</platform>
  1. 虽然cordova: E 2 % c-plugin-file 插件提供了许多获取文件的办法,但在androiy ; Dd` : [ T | #里边通用的只要externalDataDirectory这个办法,其他办法获取的路径实际上不可用如下图所示(原因未明,有大佬知道能够讲解一下,求解)。
    cordova热更新和手动升级

自动更新

cordova热更新和手动升级