[TOC]
## update.js
> 存放路徑 /common/update.js
> 參考 《[倉鼠團](https://ext.dcloud.net.cn/plugin?id=2641)》
~~~
// #ifdef APP-PLUS
// 請求配置說明：https://ext.dcloud.net.cn/plugin?id=822
import request from '@/common/httpRequest.js';
const platform = uni.getSystemInfoSync().platform;
// 主顏色
const $mainColor = "FF5B78";
// 彈窗圖標url
const $iconUrl = "/static/img/ic_ar.png";
// 獲取當前應用的版本號
export const getCurrentNo = function(callback) {
// 獲取本地應用資源版本號
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
callback && callback({
versionCode: inf.version.replace(/\./g, ""),
version: inf.version
});
});
}
// 發起ajax請求獲取服務端版本號
export const getServerNo = function(version,isPrompt = false, callback) {
request.post("config/update",{
version: version, // 當前應用的版本
os:platform, // OS環境 ios / android
}).then(res=>{
/* res.data的數據說明
* | 參數名稱 | 一定返回 | 類型 | 描述
* | -------------|--------- | --------- | ------------- |
* | versionCode | y | int | 版本號 |
* | versionName | y | String | 版本名稱 |
* | versionInfo | y | String | 版本信息 |
* | forceUpdate | y | boolean | 是否強制更新 |
* | downloadUrl | y | String | 版本下載鏈接 |
*/
if (res && res.code == 200 ) {
callback && callback(res.data);
}
})
}
// 從服務器下載應用資源包（wgt文件）
export const getDownload = function(data) {
let popupData = {
progress:true,
buttonNum: 2
};
if(data.forceUpdate){
popupData.buttonNum = 0;
}
let dtask;
let lastProgressValue = 0;
downloadPopup(popupData, function(res) {
dtask = plus.downloader.createDownload(data.downloadUrl, {
filename: "_doc/update/"
}, function(download, status) {
if (status == 200) {
res.change({
progressValue: 100,
progressTip:"正在安裝文件...",
progress: true,
buttonNum: 0
});
plus.runtime.install(download.filename, {}, function() {
res.change({
contentText: "應用資源更新完成！",
buttonNum: 1,
progress: false
});
}, function(e) {
res.cancel();
plus.nativeUI.alert("安裝文件失敗[" + e.code + "]：" + e.message);
});
} else {
res.change({
contentText: "文件下載失敗...",
buttonNum: 1,
progress: false
});
}
});
dtask.start();
dtask.addEventListener("statechanged", function(task, status) {
switch (task.state) {
case 1: // 開始
res.change({
progressValue:0,
progressTip:"準備下載...",
progress: true
});
break;
case 2: // 已連接到服務器
res.change({
progressValue:0,
progressTip:"開始下載...",
progress: true
});
break;
case 3:
const progress = parseInt(task.downloadedSize / task.totalSize * 100);
if(progress - lastProgressValue >= 2){
lastProgressValue = progress;
res.change({
progressValue:progress,
progressTip: "已下載" + progress + "%",
progress: true
});
}
break;
}
});
},function(){
// 取消下載
dtask && dtask.abort();
uni.showToast({
title: "已取消下載",
icon:"none"
});
},
function(){
// 重啟APP
plus.runtime.restart();
});
}
// 文字換行
function drawtext(text, maxWidth) {
let textArr = text.split("");
let len = textArr.length;
// 上個節點
let previousNode = 1;
// 記錄節點寬度
let nodeWidth = 0;
// 文本換行數組
let rowText = [];
for (let i = 0; i < len; i++) {
if (/[\u4e00-\u9fa5]/g.test(textArr[i])) {
nodeWidth += 24;
} else {
nodeWidth += 12;
}
if (nodeWidth >= maxWidth) {
rowText.push(text.substring(previousNode, i));
previousNode = i;
nodeWidth = 0;
}
}
if (previousNode < text.length) {
rowText.push(text.substring(previousNode, text.length));
}
return rowText.length;
}
// 是否更新彈窗
function updatePopup(data, callback) {
// 彈窗遮罩層
let maskLayer = new plus.nativeObj.View("maskLayer", { //先創建遮罩層
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
});
// 以下為計算菜單的nview繪制布局，為固定算法，使用者無關關心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//彈窗容器寬度
const popupViewWidth = screenWidth * 0.7;
// 彈窗容器的Padding
const viewContentPadding = 20;
// 彈窗容器的寬度
const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2));
// 文本高度
let viewContentHeight = parseInt(drawtext(data.versionInfo, viewContentWidth) * 16) + 10;
// 彈窗容器高度
const popupViewHeight = viewContentHeight + 80 + 20 + 20 + 90;
// 彈窗內容
let popupView = new plus.nativeObj.View("popupView", { //創建底部圖標菜單
tag: "rect",
top: (screenHeight - popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewHeight + "px",
width: "70%"
});
// 繪制白色背景
popupView.drawRect({
color: "#FFFFFF",
radius: "8px"
}, {
top: "40px",
height: popupViewHeight - 40 + "px",
});
// 繪制底邊按鈕
popupView.drawRect({
radius: "3px",
borderColor: "#f1f1f1",
borderWidth: "1px",
}, {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
});
// 繪制底邊按鈕
popupView.drawRect({
radius: "3px",
color: $mainColor,
}, {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
});
popupView.draw([{
src: $iconUrl,
id: "logo",
tag: "img",
position: {
top: "0px",
left: (popupViewWidth - 124) / 2 + "px",
width: "124px",
height: "80px",
}
},
{
tag: 'font',
id: 'title',
text: "發現新版本" + data.versionName,
textStyles: {
size: '18px',
color: "#333",
weight: "bold",
whiteSpace: "normal"
},
position: {
top: '90px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "30px",
}
},
{
tag: 'font',
id: 'content23',
text: data.versionInfo,
textStyles: {
size: '14px',
color: "#666",
lineSpacing: "50%",
whiteSpace: "normal"
},
position: {
top: '130px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: viewContentHeight + "px",
}
},
{
tag: 'font',
id: 'cancelText',
text: "暫不升級",
textStyles: {
size: '14px',
color: "#666",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
},
{
tag: 'font',
id: 'confirmText',
text: "立即升級",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
},
]);
popupView.addEventListener("click", function(e) {
let maxTop = popupViewHeight - viewContentPadding;
let maxLeft = popupViewWidth - viewContentPadding;
let buttonWidth = (viewContentWidth - viewContentPadding) / 2;
if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
// 暫不升級
if (e.clientX > viewContentPadding && e.clientX < maxLeft - buttonWidth - viewContentPadding) {
maskLayer.hide();
popupView.hide();
} else if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
// 立即升級
maskLayer.hide();
popupView.hide();
callback && callback();
}
}
});
// 點擊遮罩層
maskLayer.addEventListener("click", function() { //處理遮罩層點擊
maskLayer.hide();
popupView.hide();
});
// 顯示彈窗
maskLayer.show();
popupView.show();
}
// 文件下載的彈窗繪圖
function downloadPopupDrawing(data){
// 以下為計算菜單的nview繪制布局，為固定算法，使用者無關關心
const screenWidth = plus.screen.resolutionWidth;
const screenHeight = plus.screen.resolutionHeight;
//彈窗容器寬度
const popupViewWidth = screenWidth * 0.7;
// 彈窗容器的Padding
const viewContentPadding = 20;
// 彈窗容器的寬度
const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
// 彈窗容器高度
let popupViewHeight = viewContentPadding * 3 + 60;
let progressTip = data.progressTip || "準備下載...";
let contentText = data.contentText || "正在為您更新，請耐心等待";
let elementList = [
{
tag: 'rect', //背景色
color: '#FFFFFF',
rectStyles:{
radius: "8px"
}
},
{
tag: 'font',
id: 'title',
text: "升級APP",
textStyles: {
size: '16px',
color: "#333",
weight: "bold",
verticalAlign: "middle",
whiteSpace: "normal"
},
position: {
top: viewContentPadding + 'px',
height: "30px",
}
},
{
tag: 'font',
id: 'content',
text: contentText,
textStyles: {
size: '14px',
color: "#333",
verticalAlign: "middle",
whiteSpace: "normal"
},
position: {
top: viewContentPadding * 2 + 30 + 'px',
height: "20px",
}
}
];
// 是否有進度條
if(data.progress){
popupViewHeight += viewContentPadding + 40;
elementList = elementList.concat([
{
tag: 'font',
id: 'progressValue',
text: progressTip,
textStyles: {
size: '14px',
color: $mainColor,
whiteSpace: "normal"
},
position: {
top: viewContentPadding * 4 + 20 + 'px',
height: "30px"
}
},
{
tag: 'rect', //繪制進度條背景
id: 'progressBg',
rectStyles:{
radius: "4px",
borderColor: "#f1f1f1",
borderWidth: "1px",
},
position:{
top: viewContentPadding * 4 + 60 + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "8px"
}
},
]);
}
if (data.buttonNum == 2) {
popupViewHeight += viewContentPadding + 30;
elementList = elementList.concat([
{
tag: 'rect', //繪制底邊按鈕
rectStyles:{
radius: "3px",
borderColor: "#f1f1f1",
borderWidth: "1px",
},
position:{
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px"
}
},
{
tag: 'rect', //繪制底邊按鈕
rectStyles:{
radius: "3px",
color: $mainColor
},
position:{
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px"
}
},
{
tag: 'font',
id: 'cancelText',
text: "取消下載",
textStyles: {
size: '14px',
color: "#666",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
},
{
tag: 'font',
id: 'confirmText',
text: "后臺下載",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
whiteSpace: "normal"
},
position: {
bottom: viewContentPadding + 'px',
left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
width: (viewContentWidth - viewContentPadding) / 2 + "px",
height: "30px",
}
}
]);
}
if (data.buttonNum == 1) {
popupViewHeight += viewContentPadding + 40;
elementList = elementList.concat([
{
tag: 'rect', //繪制底邊按鈕
rectStyles:{
radius: "6px",
color: $mainColor
},
position:{
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
},
{
tag: 'font',
id: 'confirmText',
text: "關閉",
textStyles: {
size: '14px',
color: "#FFF",
lineSpacing: "0%",
},
position: {
bottom: viewContentPadding + 'px',
left: viewContentPadding + "px",
width: viewContentWidth + "px",
height: "40px"
}
}
]);
}
return {
popupViewHeight:popupViewHeight,
popupViewWidth:popupViewWidth,
screenHeight:screenHeight,
viewContentWidth:viewContentWidth,
viewContentPadding:viewContentPadding,
elementList: elementList
};
}
// 文件下載的彈窗
function downloadPopup(data, callback, cancelCallback,rebootCallback) {
// 彈窗遮罩層
let maskLayer = new plus.nativeObj.View("maskLayer", { //先創建遮罩層
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.5)'
});
let popupViewData = downloadPopupDrawing(data);
// 彈窗內容
let popupView = new plus.nativeObj.View("popupView", { //創建底部圖標菜單
tag: "rect",
top: (popupViewData.screenHeight - popupViewData.popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewData.popupViewHeight + "px",
width: "70%",
});
let progressValue = 0;
let progressTip = 0;
let contentText = 0;
let buttonNum = 2;
if(data.buttonNum >= 0){
buttonNum = data.buttonNum;
}
popupView.draw(popupViewData.elementList);
popupView.addEventListener("click", function(e) {
let maxTop = popupViewData.popupViewHeight - popupViewData.viewContentPadding;
let maxLeft = popupViewData.popupViewWidth - popupViewData.viewContentPadding;
if (e.clientY > maxTop - 40 && e.clientY < maxTop) {
if(buttonNum == 1){
// 單按鈕
if (e.clientX > popupViewData.viewContentPadding && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
rebootCallback && rebootCallback();
}
}else if(buttonNum == 2){
// 雙按鈕
let buttonWidth = (popupViewData.viewContentWidth - popupViewData.viewContentPadding) / 2;
if (e.clientX > popupViewData.viewContentPadding && e.clientX < maxLeft - buttonWidth - popupViewData.viewContentPadding) {
maskLayer.hide();
popupView.hide();
cancelCallback && cancelCallback();
} else if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
maskLayer.hide();
popupView.hide();
}
}
}
});
// 顯示彈窗
maskLayer.show();
popupView.show();
// 改變進度條
callback({
change: function(res) {
let progressElement = [];
if(res.progressValue){
progressValue = res.progressValue;
// 繪制進度條
progressElement.push({
tag: 'rect', //繪制進度條背景
id: 'progressValueBg',
rectStyles:{
radius: "4px",
color: $mainColor
},
position:{
top: popupViewData.viewContentPadding * 4 + 60 + 'px',
left: popupViewData.viewContentPadding + "px",
width: popupViewData.viewContentWidth * (res.progressValue / 100) + "px",
height: "8px"
}
});
}
if(res.progressTip){
progressTip = res.progressTip;
progressElement.push({
tag: 'font',
id: 'progressValue',
text: res.progressTip,
textStyles: {
size: '14px',
color: $mainColor,
whiteSpace: "normal"
},
position: {
top: popupViewData.viewContentPadding * 4 + 20 + 'px',
height: "30px"
}
});
}
if(res.contentText){
contentText = res.contentText;
progressElement.push({
tag: 'font',
id: 'content',
text: res.contentText,
textStyles: {
size: '16px',
color: "#333",
whiteSpace: "normal"
},
position: {
top: popupViewData.viewContentPadding * 2 + 30 + 'px',
height: "30px",
}
});
}
if(res.buttonNum >= 0 && buttonNum != res.buttonNum){
buttonNum = res.buttonNum;
popupView.reset();
popupViewData = downloadPopupDrawing(Object.assign({
progressValue:progressValue,
progressTip:progressTip,
contentText:contentText,
},res));
let newElement = [];
popupViewData.elementList.map((item,index) => {
let have = false;
progressElement.forEach((childItem,childIndex) => {
if(item.id == childItem.id){
have = true;
}
});
if(!have){
newElement.push(item);
}
});
progressElement = newElement.concat(progressElement);
popupView.setStyle({
tag: "rect",
top: (popupViewData.screenHeight - popupViewData.popupViewHeight) / 2 + "px",
left: '15%',
height: popupViewData.popupViewHeight + "px",
width: "70%",
});
popupView.draw(progressElement);
}else{
popupView.draw(progressElement);
}
},
cancel: function() {
maskLayer.hide();
popupView.hide();
}
});
}
export default function(isPrompt = false) {
getCurrentNo(version => {
getServerNo(version.versionCode,isPrompt, res => {
if (res.forceUpdate) {
if (/\.wgt$/i.test(res.downloadUrl)) {
getDownload(res);
} else {
if (platform == "android") {
getDownload(res);
} else {
plus.runtime.openURL(res.downloadUrl);
}
}
} else {
updatePopup(res, function() {
if (/\.wgt$/i.test(res.downloadUrl)) {
getDownload(res);
} else {
if (platform == "android") {
getDownload(res);
} else {
plus.runtime.openURL(res.downloadUrl);
}
}
});
}
});
});
}
// #endif
~~~
## 客戶端調用
> 參考 《[倉鼠團](https://ext.dcloud.net.cn/plugin?id=2641)》
~~~
// 暫無
~~~
- 基礎知識
- UNI核心介紹
- flex布局
- 生命周期
- 全局方法
- 組件定義
- 自定義組件
- 全局組件
- 組件之間的數據傳輸
- 條件編譯
- 自定義頭部
- 節點信息 (SelectorQuery)
- vuejs基礎語法
- 頁面跳轉以及參數傳遞
- 事件的監聽注冊以及觸發
- css3動畫
- block的妙用
- mixin (混入)
- uniapp快捷鍵
- vuex狀態管理
- 實用功能
- 獲取服務提供商
- 啟動頁 / 啟動界面
- 引導頁
- tabbar配置
- 頭部導航欄基礎設置
- 上拉下拉（刷新/加載）
- 第三方登錄
- 第三方分享
- 推送通知 之 unipush
- scroll-view雙聯動
- 配置iOS通用鏈接（Universal Links）
- 本地緩存操作
- 升級/更新方案
- 熱更新
- 圖片上傳
- 搜索頁實現
- canvas繪圖助手
- 地圖定位
- 第三方支付————todo
- 分類輪播
- 清除應用緩存
- uniapp與webview的實時通訊
- 視頻-----todo
- 聊天----todo
- 長列表swiper左右切換
- 第三方插件
- uview
- mescroll
- uCharts (圖表)
- 無名 (更新插件)
- 第三方模版
- 自定義基座
- 打包發行
- 要封裝的方法
- 緩存 cache.js
- 請求接口 request.js
- 工具類 util.js
- 小程序登錄 xcxLogin.js
- 版本更新 update.js
- 優質插件
- 更新插件----todo
- 語音
- 語音識別 (含上傳)
- 百度語音合成播報接口
- 官方常用組建
- input 輸入框
- image 圖片
- audio 音頻
- picker 選擇器
- video 視頻
- scroll-view 滾動視圖