【H5】ファイルダウンロード（JavaScript）

一連の記事

[モバイルデバイス] iData 50P 技術仕様
この記事へのリンク: https://blog.csdn.net/youcheng_ge/article/details/130604517

[H5] Avalon フロントエンド データの双方向バインディングの
記事リンク: https://blog.csdn.net/youcheng_ge/article/details/131067187

[H5] Android 自動更新ソリューション (アプリのアップグレード)
この記事へのリンク: https://blog.csdn.net/youcheng_ge/article/details/126759498

---

序文

この記事では主に端末（先に紹介した産業用携帯電話といえる）のソフトウェア自動更新の仕組みを紹介しますが、なぜこれを行うのでしょうか？それは、生産工場には多数の「ハンドヘルドデバイス」があり、それらを一々更新するためにO&Mを派遣するのは非現実的であること、また、システムの初期段階では、必然的にさまざまな問題が発生するためです。最新バージョンを「ハンドヘルド デバイス」に適時にリリースするために必要です。
当社の「アップデートの仕組み」は、最もシンプルなC/Sアーキテクチャを採用しています。サーバー（Server）はWebAPIを展開し、アップデートパッケージを指定されたディレクトリに保存します。ハンドヘルドクライアントがサーバーに接続すると、ソフトウェアのバージョンが自動的に比較されます。「自動プッシュ」アップデート」。

1. 技術紹介

apiとテクノロジー、特定のオンライン検索を使用しますWebAPI。

2. ソフトウェア開発（ソースコード）

2.1 フロントエンドコード (HTML5)

クリックしてファイルのダウンロード時間をトリガーします。以下はテストコードです。
使用到：api.js、框架

<div class="aui-list-item-inner" onclick="checkUpdate(true)">
	<div class="aui-list-item-label">检查新版本</div>
	<div class="aui-list-item-right">
		<i class="aui-iconfont aui-icon-right aui-collapse-arrow"></i>
	</div>
</div>

2.2 バックエンドのソースコード (C#)

Visual Studio を使用して WebAPI プロジェクトを作成し、Controllersディレクトリの下に QRController.cs コントローラーを作成します。ソースコードの一部は次のとおりです。

/// <summary>
/// 文件下载-app自动更新机制
/// </summary>
/// <returns>文件字节流</returns>
 [HttpGet]
 public HttpResponseMessage DownloadFile(string a_fileName)
 {
    
    
     try
     {
    
    
         //文件的服务器地址
         string filePath = HttpContext.Current.Server.MapPath("~/") + "filepath\\" + a_fileName;
         if (!File.Exists(filePath))
         {
    
    
             return new HttpResponseMessage(HttpStatusCode.NotFound);
         }

         FileStream stream = new FileStream(filePath, FileMode.Open);
         HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
         response.Content = new StreamContent(stream);
         response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
         response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
         {
    
    
             FileName = HttpUtility.UrlEncode(a_fileName)
         };
         response.Headers.Add("Access-Control-Expose-Headers", "FileName");
         response.Headers.Add("FileName", HttpUtility.UrlEncode(a_fileName));
         return response;
     }
     catch (Exception)
     {
    
    
         return new HttpResponseMessage(HttpStatusCode.NoContent);
     }
 }

2.3 フロントエンドコード (JavaScript)

サーバーから返された URL に従って、フロントエンド JavaScript がファイルのダウンロードを実行し、進行状況バーを表示します。

	api.download({
    
    
		url: source,
		report: true
	}, function(ret, err) {
    
    
		if (ret && 0 == ret.state) {
    
    
			/* 下载进度 */
			ShowToast("正在下载应用" + ret.percent + "%");
		}
		if (ret && 1 == ret.state) {
    
    
			/* 下载完成 */
			var savePath = ret.savePath;
			api.installApp({
    
    
				/* 安装app */
				appUri: savePath
			});
		}
	});

3.エフェクト表示

WebAPI プロジェクトを直接実行して効果を確認します。

3.1 WebAPI プロジェクトの実行

IP サービスが必要であることに注意してください。存在しない場合は、それを公開してIIS実行できます。

3.2 Android スマートフォンを実行する

4. リソースリンク

API.js フロントエンド フレームワークを使用する必要があります。APICloud官网ダウンロードできます。
https://www.apicloud.com/