UNIapp實現局域網內在線升級

首先是UNIapp 生成apk

用Hbuilder 進行打包云打包
可以從網站https://www.yunedit.com/reg?goto=cert 使用自有證書，目測比直接使用云證書要快一些。

發布apk 網站

發布內容用IIS發布即可
注意事項中記錄如下內容

第一、需要在 iis 的MiMe 中添加apk 的格式，否則無法下載apk 文件到手持機中。添加方式打開MIME 點擊添加
分別輸入 apk application/vnd.android.package-archive 點擊保存即可

第二、發布新的apk 的時候，需要修改應用版本號（往大了修改），同時版本號.json 文件中
newVersionCode對應的值，也要和新的應用版本號相同（方便檢測更新） newVersionName 中保存的是當前PDA的版本名稱
versionDesc 中可以添加修改的內容 appName 需要添加新發布的apk 名稱（用于下載對應的文件）

第三、將對應的文件夾發布在iis中，同時要修改uniapp 中的http.js文件
uni.setStorageSync(‘loadVersion’, ‘http://127.0.0.1:8032/’); 修改內部的url

要在IIS中添加.apk文件的MIME類型，可以按照以下步驟操作：

打開IIS管理器，找到服務器，右鍵選擇“屬性”。
在打開的屬性窗口中，選擇“MIME類型”選項卡。
點擊“MIME類型”按鈕，打開MIME類型設置窗口。
選擇“新建”來添加一個新的MIME類型。
在“擴展名”中填寫“.apk”，在“MIME類型”中填寫“.apk”的MIME類型“application/vnd.android.package-archive”。
點擊“確定”保存設置。
重啟IIS服務，以使更改生效。
完成以上步驟后，IIS就能夠正確識別和處理.apk文件了

版本號.json中的內容為

{"newVersionCode":223,"newVersionName":"V1.2.0","versionDesc":"升級了部分功能","appName":"android_debug.apk"}

uniapp相關代碼

upgrade.vue中存在

<template><view class="upgrade-popup"><view class="main"><view class="version">發現新版本{{versionName}}</view><view class="content"><text class="title">更新內容</text><view class="desc" v-html="versionDesc"></view></view><!--下載狀態-進度條顯示 --><view class="footer" v-if="isStartDownload"><view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp"><!-- 進度條 --><view v-if="hasProgress" style="height: 100%;"><view class="txt">{{percentText}}</view><view class="progress" :style="setProStyle"></view></view><view v-else><view class="btn upgrade force">{{ isDownloadFinish  ? '立即安裝' :'下載中...'}}</view></view></view></view><!-- 強制更新 --><view class="footer" v-else-if="isForceUpdate"><view class="btn upgrade force" @click="handleUpgrade">立即更新</view></view><!-- 可選擇更新 --><view class="footer" v-else><view class="btn close" @click="handleClose">以后再說</view><view class="btn upgrade" @click="handleUpgrade">立即更新</view></view></view></view>
</template><script>import {downloadApp,installApp} from './upgrade.js'export default {data() {return {isForceUpdate: false, //是否強制更新versionName: '', //版本名稱versionDesc: '', //更新說明downloadUrl: '', //APP下載鏈接isDownloadFinish: false, //是否下載完成hasProgress: false, //是否能顯示進度條currentPercent: 0, //當前下載百分比isStartDownload: false, //是否開始下載fileName: '', //下載后app本地路徑名稱}},computed: {//設置進度條樣式，實時更新進度位置setProStyle() {return {width: (510 * this.currentPercent / 100) + 'rpx' //510：按鈕進度條寬度}},//百分比文字percentText() {let percent = this.currentPercent;if (typeof percent !== 'number' || isNaN(percent)) return '下載中...'if (percent < 100) return `下載中${percent}%`return '立即安裝'}},onLoad(options) {this.init(options)},onBackPress(options) {// 禁用返回if (options.from == 'backbutton') {return true;}},methods: {//初始化獲取最新APP版本信息init(options) {let randomNum = Math.random();//模擬接口獲取最新版本號，版本號固定為整數const baseurl = uni.getStorageSync('loadVersion')+options.appName+'?V='+randomNum;;console.log('結果為')console.log((baseurl))//模擬接口獲取setTimeout(() => {//演示數據請根據實際修改this.versionName = options.versionName; //版本名稱this.versionDesc = options.versionDesc; //更新說明this.downloadUrl = baseurl; //下載鏈接this.isForceUpdate = false; //是否強制更新}, 200)},//更新handleUpgrade() {console.log('Hello UniApp!-----------------------------------------------')uni.getStorage({key: 'loadVersion',success: function (res) {console.log(res.data);}});//requestTask.abort();if (this.downloadUrl) {this.isStartDownload = true//開始下載AppdownloadApp(this.downloadUrl, current => {//下載進度監聽this.hasProgress = truethis.currentPercent = current}).then(fileName => {//下載完成this.isDownloadFinish = truethis.fileName = fileNameif (fileName) {//自動安裝Appthis.handleInstallApp()}}).catch(e => {console.log(e, 'e')})} else {uni.showToast({title: '下載鏈接不存在',icon: 'none'})}},//安裝apphandleInstallApp() {//下載完成才能安裝，防止下載過程中點擊if (this.isDownloadFinish && this.fileName) {installApp(this.fileName, () => {//安裝成功,關閉升級彈窗uni.navigateBack()})}},//關閉返回handleClose() {uni.navigateBack()},}}
</script><style>page {background: rgba(0, 0, 0, 0.5);/**設置窗口背景半透明*/}
</style>
<style lang="scss" scoped>.upgrade-popup {width: 580rpx;height: auto;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;border-radius: 20rpx;box-sizing: border-box;border: 1px solid #eee;}.header-bg {width: 100%;margin-top: -112rpx;}.main {padding: 10rpx 30rpx 30rpx;box-sizing: border-box;.version {font-size: 36rpx;color: #026DF7;font-weight: 700;width: 100%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;letter-spacing: 1px;}.content {margin-top: 60rpx;.title {font-size: 28rpx;font-weight: 700;color: #000000;}.desc {box-sizing: border-box;margin-top: 20rpx;font-size: 28rpx;color: #6A6A6A;max-height: 80vh;overflow-y: auto;}}.footer {width: 100%;display: flex;justify-content: center;align-items: center;position: relative;flex-shrink: 0;margin-top: 100rpx;.btn {width: 246rpx;display: flex;justify-content: center;align-items: center;position: relative;z-index: 999;height: 96rpx;box-sizing: border-box;font-size: 32rpx;border-radius: 10rpx;letter-spacing: 2rpx;&.force {width: 500rpx;}&.close {border: 1px solid #E0E0E0;margin-right: 25rpx;color: #000;}&.upgrade {background-color: #026DF7;color: white;}}.progress-view {width: 510rpx;height: 90rpx;display: flex;position: relative;align-items: center;border-radius: 6rpx;background-color: #dcdcdc;display: flex;justify-content: flex-start;padding: 0px;box-sizing: border-box;border: none;overflow: hidden;&.active {background-color: #026DF7;}.progress {height: 100%;background-color: #026DF7;padding: 0px;box-sizing: border-box;border: none;border-top-left-radius: 10rpx;border-bottom-left-radius: 10rpx;}.txt {font-size: 28rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;}}}}
</style>

upgrade.js

/*** @description H5+下載App* @param downloadUrl:App下載鏈接* @param progressCallBack:下載進度回調*/
export const downloadApp = (downloadUrl, progressCallBack = () => {}, ) => {return new Promise((resolve, reject) => {//創建下載任務const downloadTask = plus.downloader.createDownload(downloadUrl, {method: "GET"}, (task, status) => {console.log(status,'status')if (status == 200) { //下載成功resolve(task.filename)} else {reject('fail')uni.showToast({title: '下載失敗',duration: 1500,icon: "none"});}})//監聽下載過程downloadTask.addEventListener("statechanged", (task, status) => {switch (task.state) {case 1: // 開始  break;case 2: //已連接到服務器  break;case 3: // 已接收到數據  let hasProgress = task.totalSize && task.totalSize > 0 //是否能獲取到App大小if (hasProgress) {let current = parseInt(100 * task.downloadedSize / task.totalSize); //獲取下載進度百分比progressCallBack(current)}break;case 4: // 下載完成       break;}});//開始執行下載downloadTask.start();})}
/*** @description H5+安裝APP* @param fileName:app文件名* @param callBack:安裝成功回調*/
export const installApp = (fileName, callBack = () => {}) => {//注冊廣播監聽app安裝情況onInstallListening(callBack);//開始安裝plus.runtime.install(plus.io.convertLocalFileSystemURL(fileName), {}, () => {//成功跳轉到安裝界面}, function(error) {uni.showToast({title: '安裝失敗',duration: 1500,icon: "none"});})}
/*** @description 注冊廣播監聽APP是否安裝成功* @param callBack:安裝成功回調函數*/
const onInstallListening = (callBack = () => {}) => {let mainActivity = plus.android.runtimeMainActivity(); //獲取activity//生成廣播接收器let receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {onReceive: (context, intent) => { //接收廣播回調  plus.android.importClass(intent);mainActivity.unregisterReceiver(receiver); //取消監聽callBack()}});let IntentFilter = plus.android.importClass('android.content.IntentFilter');let Intent = plus.android.importClass('android.content.Intent');let filter = new IntentFilter();filter.addAction(Intent.ACTION_PACKAGE_ADDED); //監聽APP安裝     filter.addDataScheme("package");mainActivity.registerReceiver(receiver, filter); //注冊廣播}

home.vue

<template><view><image style="width: 100%;" mode="widthFix" src="/static/swiper1.png"></image><!-- 	<u-swiper height="360rpx" :list="swiperList" :radius="0"></u-swiper> --><view class="home-content"><view class="app-name">WMS手持機系統</view><view class="card-container"><view class="fn-title">基礎功能</view><u-grid :border="false" @click="gridClick" col="4"><u-grid-item v-for="(item,index) in fn" :key="index"><view :class="['grid-item-bg','grid-item-bg-'+(index+1)]"><u-icon :name='item.icon' :color="item.color" size="28"></u-icon></view><view class="grid-text">{{item.name}}</view></u-grid-item></u-grid></view><view style="padding:30rpx;padding-top:0;"><vol-alert type="primary"></vol-alert></view></view></view>
</template><script>export default {data() {return {height: 0,swiperList: ['/static/swiper1.png','/static/swiper2.png','/static/swiper3.png'],fn: [{name: "有單據組盤1",icon: '/static/fc.png',path: "/pages/basics/T_In_ReceiptNoticeDetail/T_In_ReceiptNoticeDetail",color: '#EE0000',subPage: true //二級頁面}, {name: "手動入庫",icon: '/static/fc.png',path: "",color: '#EE0000',subPage: true //二級頁面}, {name: "無單據組盤",icon: 'edit-pen-fill',color: '#8B8989',path: "/pages/createbyus/HaveOrderGroup/HaveOrderGroup",subPage: true //二級頁面}, {name: "入庫計劃",icon: '/static/fc.png',path: "/pages/basics/T_In_ReceiptNotice/T_In_ReceiptNotice",color: '#EE0000',subPage: true //二級頁面}, {name: "確認出庫",icon: '/static/fc.png',path: "/pages/reportvshow/V_OutboundDetail/V_OutboundDetail",color: '#EE0000',subPage: true //二級頁面}, {name: "托盤處理",icon: '/static/fc.png',path: "/pages/strategy/DealTrayCURD/DealTrayCURD",color: '#EE0000',subPage: true //二級頁面}, {name: "盤點處理",icon: '/static/fc.png',path: "/pages/strategy/T_InventoryCheckDetail/T_InventoryCheckDetail",color: '#EE0000',subPage: true //二級頁面}, {name: "出庫計劃",icon: '/static/flow.png',color: '#EE0000',path: "/pages/basics/T_Out_DeliveryNotice/T_Out_DeliveryNotice",subPage: true //二級頁面},{name: "審批流程",icon: '/static/flow.png',color: '#EE0000',path: "/pages/flow/flow",subPage: false //二級頁面}, {name: "表單示例",icon: '/static/form.png',color: '#EE0000',path: "/pages/form/form",subPage: true //二級頁面},{name: "Table組件",icon: '/static/fc.png',color: '#EE0000',path: "/pages/form/form",subPage: true //二級頁面},{name: "菜單列表",icon: '/static/table.png',color: '#EE0000',path: "/pages/menu/menu",subPage: false //二級頁面},// {// 	name: "地圖導航",// 	icon: '/static/fc.png',// 	color:'#EE0000',// 	path: "/pages/map/map",// 	subPage: true //二級頁面// },// //待開發功能// {// 	name: "敬請期待",// 	icon: '/static/fc.png',// 	path: "pages/basics/T_In_ReceiptNotice/T_In_ReceiptNotice",// 	color:'#EE0000',// 	subPage: true //二級頁面// },// {// 	name: "敬請期待",// 	icon: '/static/fc.png',// 	color:'#EE0000',// 	path: "",// }],}},onLoad() {var _this = this;// 獲取手機狀態欄高度uni.getSystemInfo({success: function(data) {// 將其賦值給this_this.height = data.statusBarHeight;}});_this.init();},onReady(){this.checkVersion(1)},onShow() {},methods: {//初始化init() {},//檢查版本更新情況checkVersion(indexValue) {var _this = this;let index=0;setTimeout(() => {let randomNum = Math.random();//模擬接口獲取最新版本號，版本號固定為整數const baseurl = uni.getStorageSync('loadVersion')+'版本號.json?V='+randomNum;console.log(baseurl)var requestTask = uni.request({url: baseurl, //僅為示例，并非真實接口地址。method:'GET',success: function(res) {index++;console.log(res.data);	const newVersionName =res.data.newVersionName //線上最新版本名const newVersionCode =res.data.newVersionCode; //線上最新版本號const selfVersionCode = Number(uni.getSystemInfoSync().appVersionCode) //當前App版本號console.log(index+'../index/upgrade?versionName='+newVersionName+'&versionDesc='+res.data.versionDesc)console.log(selfVersionCode)console.log(newVersionCode)//線上版本號高于當前，進行在線升級if (selfVersionCode < newVersionCode) {let platform = uni.getSystemInfoSync().platform //手機平臺uni.navigateTo({url: '../index/upgrade?versionName='+newVersionName+'&versionDesc='+res.data.versionDesc+'&appName='+res.data.appName})}else{_this.clickUseInfo(indexValue);}},fail :function(res){console.log(res);},complete: ()=> {}});}, 200)},getStyle(item) {return {paddingTop: 20 + 'rpx',background: item.color,padding: '50%',color: "#ffff",'border-radius': '50%',left: '-24rpx'}},gridClick(index) {this.checkVersion(index)},clickUseInfo(index){const item = this.fn[index];console.log(index)if (!item.path) {this.$toast('開發中')return;}//注意下面的跳轉方式，一級頁面指pages.json中tabBar配置path//具體見uni頁面跳轉文檔if (item.subPage) {//二級頁面用navigateTo跳轉uni.navigateTo({url: this.fn[index].path})return;}//一級頁面uni.switchTab({url: this.fn[index].path})},swiperClick(index) {}}}
</script>
<style lang="less" scoped>.home-content {z-index: 999;position: relative;margin-top: -220rpx;}.app-name {text-align: center;color: #ffff;font-weight: bolder;font-size: 60rpx;top: -40rpx;position: relative;}.card-container {box-shadow: 1px 1px 9px #b9b6b629;margin: 30rpx 30rpx 30rpx 30rpx;border: 1px solid #f1f1f1;border-radius: 10rpx;padding: 26rpx 10rpx 14rpx 10rpx;background: #ffff;.fn-title {font-family: 黑體;font-size: 30rpx;font-weight: bold;//color: #8f9ca2;padding: 4rpx 20rpx 30rpx 20rpx;}.grid-text {padding-top: 8rpx;font-size: 26rpx;color: #626262;padding-bottom: 20rpx;}}.grid-item-bg {border-radius: 50%;width: 86rpx;height: 86rpx;display: flex;align-items: center;justify-content: center;box-shadow: 5px 3px 6px #e0ddddb0;}.grid-item-bg-1 {background-image: linear-gradient(to bottom right, #97caff, #47a1fe);}.grid-item-bg-2 {background-image: linear-gradient(to bottom right, #f8bcbc, #f07e7e);}.grid-item-bg-3 {background-image: linear-gradient(to bottom right, #afb5e6, #808cf0);}.grid-item-bg-4 {background-image: linear-gradient(to bottom right, #98e4e2, #56c3bf);}.grid-item-bg-5 {background-image: linear-gradient(to bottom right, #d1d1d1, #c878e7);}.grid-item-bg-6 {background-image: linear-gradient(to bottom right, #97caff, #47a1fe);}.grid-item-bg-7 {background-image: linear-gradient(to bottom right, #98e4e2, #56c3bf);}.grid-item-bg-8 {background-image: linear-gradient(to bottom right, #afb5e6, #808cf0);}
</style>