21 changed files with 2170 additions and 102 deletions
@ -1,30 +1,38 @@ |
|||||
<script> |
<script> |
||||
export default { |
import APPUpdate from "plugins/APPUpdate/index.js"; |
||||
onLaunch: function() {}, |
export default { |
||||
|
onLaunch: function() { |
||||
|
console.log("》》》》", 11111111111111111); |
||||
|
APPUpdate(); |
||||
|
}, |
||||
onShow: function() {}, |
onShow: function() {}, |
||||
onHide: function() {}, |
onHide: function() {}, |
||||
globalData: {} //全局变量 |
globalData: {}, //全局变量 |
||||
} |
|
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
/*每个页面公共css */ |
/*每个页面公共css */ |
||||
@import '@/uni_modules/uni-scss/index.scss'; |
@import '@/uni_modules/uni-scss/index.scss'; |
||||
|
|
||||
|
/* #ifndef APP-NVUE */ |
||||
|
@import '@/static/customicons.css'; |
||||
|
|
||||
/* #ifndef APP-NVUE */ |
// 设置整个项目的背景色 |
||||
@import '@/static/customicons.css'; |
page { |
||||
// 设置整个项目的背景色 |
|
||||
page { |
|
||||
background-color: #f5f5f5; |
background-color: #f5f5f5; |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
/* #endif */ |
|
||||
|
/* #endif */ |
||||
|
|
||||
|
@import '@/uni_modules/uview-ui/index.scss'; |
||||
|
@import '@/common/app.scss'; |
||||
|
|
||||
@import '@/uni_modules/uview-ui/index.scss'; |
.example-info { |
||||
@import '@/common/app.scss'; |
|
||||
.example-info { |
|
||||
font-size: 14px; |
font-size: 14px; |
||||
color: #333; |
color: #333; |
||||
padding: 10px; |
padding: 10px; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,106 @@ |
|||||
|
# APP版本更新、强制更新、漂亮的更新界面、IOS更新（跳转IOS store）、wgt更新 |
||||
|
|
||||
|
### QQ交流群(学习干货多多) 607391225 |
||||
|
 |
||||
|
|
||||
|
### 常见问题 |
||||
|
1.安卓apk下载完成后没有更新APP? |
||||
|
|
||||
|
答：问题是因为没有添加APP安装应用的权限，解决方法在`manifest.json`文件里面`APP模块权限配置`的`Android打包权限配置`勾选以下权限 |
||||
|
``` |
||||
|
<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/> |
||||
|
<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/> |
||||
|
``` |
||||
|
若还有问题请看[安装apk无法执行的解决方案](https://ask.dcloud.net.cn/article/35703 "安装apk无法执行的解决方案") |
||||
|
|
||||
|
2.APP更新后版本号没变，还是之前的版本号？ |
||||
|
|
||||
|
答：可能是更新的安装包没有升级版本号，`manifest.json`文件里面基本设置`应用版本号`和`应用版本名称`需要升高 |
||||
|
|
||||
|
3.APP更新后没有覆盖之前的APP？ |
||||
|
|
||||
|
答：可能是更新的安装包`包名`和APP的`包名`不一样 |
||||
|
|
||||
|
### 第一步配置APP更新接口 |
||||
|
在`APPUpdate.js`里面`getServerNo`函数方法配置更新接口 |
||||
|
``` |
||||
|
let httpData = { |
||||
|
version:version |
||||
|
}; |
||||
|
if (platform == "android") { |
||||
|
httpData.type = 1101; |
||||
|
} else { |
||||
|
httpData.type = 1102; |
||||
|
} |
||||
|
/* 接口入参说明 |
||||
|
* version: 应用当前版本号（已自动获取） |
||||
|
* type：平台（1101是安卓，1102是IOS） |
||||
|
*/ |
||||
|
$http.get("api/kemean/aid/app_version", httpData).then(res => { |
||||
|
/*接口出参说明 （res数据说明） |
||||
|
* | 参数名称 | 一定返回 | 类型 | 描述 |
||||
|
* | -------------|--------- | --------- | ------------- | |
||||
|
* | versionCode | y | int | 版本号 | |
||||
|
* | versionName | y | String | 版本名称 | |
||||
|
* | versionInfo | y | String | 版本信息 \n 换行（例如：1.修改了bug1 \n 2.修改了bug2 \n 3.修改了bug3） | |
||||
|
* | forceUpdate | y | boolean | 是否强制更新 | |
||||
|
* | downloadUrl | y | String | 版本下载链接 `IOS安装包更新请放跳转store应用商店链接,安卓apk和wgt文件放文件下载链接` | |
||||
|
*/ |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 第二步 使用方法 |
||||
|
``` |
||||
|
// App.vue页面 |
||||
|
|
||||
|
// #ifdef APP-PLUS |
||||
|
import APPUpdate from "@/plugins/APPUpdate"; |
||||
|
// #endif |
||||
|
|
||||
|
onLaunch: function(e) { |
||||
|
// #ifdef APP-PLUS |
||||
|
APPUpdate(); |
||||
|
// #endif |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 第三步 添加APP安装应用的权限 |
||||
|
在`manifest.json`文件里面`APP模块权限配置`的`Android打包权限配置`勾选以下权限 |
||||
|
``` |
||||
|
<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/> |
||||
|
<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/> |
||||
|
``` |
||||
|
|
||||
|
### 修改弹窗的主题色或弹窗图标 |
||||
|
在`APPUpdate.js`里面上面`$mainColor`常量中定义主题颜色，`$iconUrl`常量中定义图标地址 |
||||
|
|
||||
|
### 检查APP是否有新版本（一般在设置页面使用） |
||||
|
``` |
||||
|
// #ifdef APP-PLUS |
||||
|
import APPUpdate, { getCurrentNo } from "@/plugins/APPUpdate"; |
||||
|
// #endif |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
version: "" // 版本号 |
||||
|
}; |
||||
|
}, |
||||
|
//第一次加载 |
||||
|
onLoad(e) { |
||||
|
// #ifdef APP-PLUS |
||||
|
getCurrentNo(res => { |
||||
|
// 进页面获取当前APP版本号（用于页面显示） |
||||
|
this.version = res.version; |
||||
|
}); |
||||
|
// #endif |
||||
|
}, |
||||
|
//方法 |
||||
|
methods: { |
||||
|
// 检查APP是否有新版本 |
||||
|
onAPPUpdate() { |
||||
|
// true 没有新版本的时候有提示，默认：false |
||||
|
APPUpdate(true); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
@ -0,0 +1,823 @@ |
|||||
|
// #ifdef APP-PLUS
|
||||
|
// import $api from '@/common/api';
|
||||
|
import $http from '@/utils/requester.js'; |
||||
|
const platform = uni.getSystemInfoSync().platform; |
||||
|
// 主颜色
|
||||
|
const $mainColor = "FF5B78"; |
||||
|
// 弹窗图标url
|
||||
|
const $iconUrl = "/static/ic_ar.png"; |
||||
|
// 获取当前应用的版本号
|
||||
|
export const getCurrentNo = function(callback) { |
||||
|
// 获取本地应用资源版本号
|
||||
|
console.log("》》》》", 11111111111111111); |
||||
|
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) { |
||||
|
// let userInfos = uni.getStorageSync('userInfos');
|
||||
|
// console.log(userInfos);
|
||||
|
// console.log(userInfos.username)
|
||||
|
// let userName = userInfos.username;
|
||||
|
let httpData = { |
||||
|
version: version, |
||||
|
// userName: userName
|
||||
|
}; |
||||
|
// console.log(userName)
|
||||
|
if (platform == "android") { |
||||
|
httpData.type = 1101; |
||||
|
} else { |
||||
|
httpData.type = 1102; |
||||
|
} |
||||
|
console.log("》》》》", 222222); |
||||
|
/* 接口入参说明 |
||||
|
* version: 应用当前版本号（已自动获取） |
||||
|
* type：平台（1101是安卓，1102是IOS） |
||||
|
*/ |
||||
|
$http.get("cyf/appVersion/versioninfo", httpData, { |
||||
|
isPrompt: isPrompt |
||||
|
}).then(res => { |
||||
|
/* res的数据说明 |
||||
|
* | 参数名称 | 一定返回 | 类型 | 描述 |
||||
|
* | -------------|--------- | --------- | ------------- | |
||||
|
* | versionCode | y | int | 版本号 | |
||||
|
* | versionName | y | String | 版本名称 | |
||||
|
* | versionInfo | y | String | 版本信息 | |
||||
|
* | forceUpdate | y | boolean | 是否强制更新 | |
||||
|
* | downloadUrl | y | String | 版本下载链接（IOS安装包更新请放跳转store应用商店链接,安卓apk和wgt文件放文件下载链接） | |
||||
|
*/ |
||||
|
console.log("》》》》", 333333333); |
||||
|
console.log(res) |
||||
|
console.log(JSON.parse(res)); |
||||
|
console.log(JSON.stringify(JSON.parse(res))) |
||||
|
console.log(JSON.parse(res).downloadUrl) |
||||
|
if (res && JSON.parse(res).downloadUrl && version < JSON.parse(res).versionCode) { |
||||
|
callback && callback(res); |
||||
|
} else if (isPrompt) { |
||||
|
uni.showToast({ |
||||
|
title: "暂无新版本", |
||||
|
icon: "none" |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
// 从服务器下载应用资源包
|
||||
|
export const getDownload = function(res) { |
||||
|
//let data = JSON.parse(res);
|
||||
|
let data = res; |
||||
|
let popupData = { |
||||
|
progress: true, |
||||
|
buttonNum: 2 |
||||
|
}; |
||||
|
if (data.forceUpdate) { |
||||
|
popupData.buttonNum = 0; |
||||
|
} |
||||
|
let file = data.fileName |
||||
|
let dtask; |
||||
|
let lastProgressValue = 0; |
||||
|
console.log("》》》》", 44444444); |
||||
|
downloadPopup(popupData, function(res) { |
||||
|
dtask = plus.downloader.createDownload(data.downloadUrl, { |
||||
|
// filename: '_doc/update/' + file + '/' + new Date().getTime() + '/'
|
||||
|
filename: '_doc/update/' + new Date().getTime() + '/' + file |
||||
|
}, function(download, status) { |
||||
|
console.log("status=====:" + status) |
||||
|
if (status == 200) { |
||||
|
res.change({ |
||||
|
progressValue: 100, |
||||
|
progressTip: "正在安装文件...", |
||||
|
progress: true, |
||||
|
buttonNum: 0 |
||||
|
}); |
||||
|
console.log(download.filename) |
||||
|
plus.runtime.install(download.filename, { |
||||
|
force: false |
||||
|
}, function() { |
||||
|
// plus.runtime.restart();//下载后重启app
|
||||
|
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) { |
||||
|
debugger |
||||
|
let textArr = text.split(" "); |
||||
|
let len = textArr.length; |
||||
|
// 上个节点
|
||||
|
let previousNode = 0; |
||||
|
// 记录节点宽度
|
||||
|
let nodeWidth = 0; |
||||
|
// 文本换行数组
|
||||
|
let rowText = []; |
||||
|
// 如果是字母，侧保存长度
|
||||
|
let letterWidth = 0; |
||||
|
// 汉字宽度
|
||||
|
let chineseWidth = 14; |
||||
|
// otherFont宽度
|
||||
|
let otherWidth = 7; |
||||
|
for (let i = 0; i < len; i++) { |
||||
|
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) { |
||||
|
if (letterWidth > 0) { |
||||
|
if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) { |
||||
|
rowText.push({ |
||||
|
type: "text", |
||||
|
content: text.substring(previousNode, i) |
||||
|
}); |
||||
|
previousNode = i; |
||||
|
nodeWidth = chineseWidth; |
||||
|
letterWidth = 0; |
||||
|
} else { |
||||
|
nodeWidth += chineseWidth + letterWidth * otherWidth; |
||||
|
letterWidth = 0; |
||||
|
} |
||||
|
} else { |
||||
|
if (nodeWidth + chineseWidth > maxWidth) { |
||||
|
rowText.push({ |
||||
|
type: "text", |
||||
|
content: text.substring(previousNode, i) |
||||
|
}); |
||||
|
previousNode = i; |
||||
|
nodeWidth = chineseWidth; |
||||
|
} else { |
||||
|
nodeWidth += chineseWidth; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
if (/\n/g.test(textArr[i])) { |
||||
|
rowText.push({ |
||||
|
type: "break", |
||||
|
content: text.substring(previousNode, i) |
||||
|
}); |
||||
|
previousNode = i + 1; |
||||
|
nodeWidth = 0; |
||||
|
letterWidth = 0; |
||||
|
} else if (textArr[i] == "\\" && textArr[i + 1] == "n") { |
||||
|
rowText.push({ |
||||
|
type: "break", |
||||
|
content: text.substring(previousNode, i) |
||||
|
}); |
||||
|
previousNode = i + 2; |
||||
|
nodeWidth = 0; |
||||
|
letterWidth = 0; |
||||
|
} else if (/[a-zA-Z0-9]/g.test(textArr[i])) { |
||||
|
letterWidth += 1; |
||||
|
if (nodeWidth + letterWidth * otherWidth > maxWidth) { |
||||
|
rowText.push({ |
||||
|
type: "text", |
||||
|
content: text.substring(previousNode, i + 1 - letterWidth) |
||||
|
}); |
||||
|
previousNode = i + 1 - letterWidth; |
||||
|
nodeWidth = letterWidth * otherWidth; |
||||
|
letterWidth = 0; |
||||
|
} |
||||
|
} else { |
||||
|
if (nodeWidth + otherWidth > maxWidth) { |
||||
|
rowText.push({ |
||||
|
type: "text", |
||||
|
content: text.substring(previousNode, i) |
||||
|
}); |
||||
|
previousNode = i; |
||||
|
nodeWidth = otherWidth; |
||||
|
} else { |
||||
|
nodeWidth += otherWidth; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
if (previousNode < len) { |
||||
|
rowText.push({ |
||||
|
type: "text", |
||||
|
// content: text.substring(previousNode, len)
|
||||
|
content: text |
||||
|
}); |
||||
|
} |
||||
|
return rowText; |
||||
|
} |
||||
|
// 是否更新弹窗
|
||||
|
function updatePopup(res, callback) { |
||||
|
console.log(res); |
||||
|
//let data = JSON.parse(res);
|
||||
|
let data = res; |
||||
|
console.log(data.versionInfo) |
||||
|
// 弹窗遮罩层
|
||||
|
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)); |
||||
|
// 描述的列表
|
||||
|
const descriptionList = drawtext(data.versionInfo, viewContentWidth); |
||||
|
// 弹窗容器高度
|
||||
|
let popupViewHeight = 80 + 20 + 20 + 90 + 10; |
||||
|
let popupViewContentList = [{ |
||||
|
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", |
||||
|
} |
||||
|
} |
||||
|
]; |
||||
|
const textHeight = 18; |
||||
|
let contentTop = 130; |
||||
|
descriptionList.forEach((item, index) => { |
||||
|
if (index > 0) { |
||||
|
popupViewHeight += textHeight; |
||||
|
contentTop += textHeight; |
||||
|
} |
||||
|
popupViewContentList.push({ |
||||
|
tag: 'font', |
||||
|
id: 'content' + index + 1, |
||||
|
text: item.content, |
||||
|
textStyles: { |
||||
|
size: '14px', |
||||
|
color: "#666", |
||||
|
lineSpacing: "50%", |
||||
|
align: "left" |
||||
|
}, |
||||
|
position: { |
||||
|
top: contentTop + "px", |
||||
|
left: viewContentPadding + "px", |
||||
|
width: viewContentWidth + "px", |
||||
|
height: textHeight + "px", |
||||
|
} |
||||
|
}); |
||||
|
if (item.type == "break") { |
||||
|
contentTop += 10; |
||||
|
popupViewHeight += 10; |
||||
|
} |
||||
|
}); |
||||
|
// 弹窗内容
|
||||
|
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", |
||||
|
}); |
||||
|
popupViewContentList.push({ |
||||
|
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", |
||||
|
} |
||||
|
}); |
||||
|
popupViewContentList.push({ |
||||
|
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.draw(popupViewContentList); |
||||
|
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 => { |
||||
|
console.log("》》》》", version); |
||||
|
getServerNo(version.versionCode, isPrompt, data => { |
||||
|
let res = JSON.parse(data); |
||||
|
console.log("》》》》", 6666666); |
||||
|
if (res.forceUpdate) { |
||||
|
if (/\.wgt$/i.test(res.downloadUrl)) { |
||||
|
getDownload(res); |
||||
|
} else if (/\.apk$/i.test(res.downloadUrl)) { |
||||
|
plus.runtime.openURL(res.downloadUrl); |
||||
|
} 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 (/\.html$/i.test(res.downloadUrl)) { |
||||
|
plus.runtime.openURL(res.downloadUrl); |
||||
|
} else { |
||||
|
if (platform == "android") { |
||||
|
getDownload(res); |
||||
|
} else { |
||||
|
plus.runtime.openURL(res.downloadUrl); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
// #endif
|
||||
@ -0,0 +1,390 @@ |
|||||
|
import request from "./request.js"; |
||||
|
const qiniuUploader = require("./qiniuUploader"); |
||||
|
export default class fileUpload extends request { |
||||
|
constructor(props) { |
||||
|
// 调用实现父类的构造函数
|
||||
|
super(props); |
||||
|
} |
||||
|
//七牛云上传图片
|
||||
|
qnImgUpload(data = {}, options = {}) { |
||||
|
const _this = this; |
||||
|
return new Promise((resolve, reject) => { |
||||
|
uni.chooseImage({ |
||||
|
count: data.count || 9, //默认9
|
||||
|
sizeType: data.sizeType || ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
|
sourceType: data.sourceType || ['album', 'camera'], //从相册选择
|
||||
|
success: function(res) { |
||||
|
_this.qnFileUpload({ |
||||
|
files: res.tempFiles, |
||||
|
...data |
||||
|
}, options).then(resolve, reject); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
//七牛云上传文件命名
|
||||
|
randomChar(l, url = "") { |
||||
|
const x = "0123456789qwertyuioplkjhgfdsazxcvbnm"; |
||||
|
let tmp = ""; |
||||
|
let time = new Date(); |
||||
|
for (let i = 0; i < l; i++) { |
||||
|
tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length); |
||||
|
} |
||||
|
return ( |
||||
|
"file/" + |
||||
|
url + |
||||
|
time.getTime() + |
||||
|
tmp |
||||
|
); |
||||
|
} |
||||
|
//七牛云文件上传（支持多张上传）
|
||||
|
qnFileUpload(data = {}, options = {}) { |
||||
|
const _this = this; |
||||
|
let requestInfo = { |
||||
|
...data, |
||||
|
...this.config, |
||||
|
...options, |
||||
|
header: {}, |
||||
|
method: "FILE" |
||||
|
}; |
||||
|
return new Promise((resolve, reject) => { |
||||
|
//请求前回调
|
||||
|
if (_this.requestStart) { |
||||
|
let requestStart = _this.requestStart(requestInfo); |
||||
|
if (typeof requestStart == "object") { |
||||
|
requestInfo.load = requestStart.load; |
||||
|
requestInfo.files = requestStart.files; |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
if (Array.isArray(requestInfo.files)) { |
||||
|
let len = requestInfo.files.length; |
||||
|
let imageList = new Array; |
||||
|
if(_this.getQnToken){ |
||||
|
_this.getQnToken(qnRes => { |
||||
|
/* |
||||
|
*接口返回参数： |
||||
|
*visitPrefix:访问文件的域名 |
||||
|
*token:七牛云上传token |
||||
|
*folderPath:上传的文件夹 |
||||
|
*region: 地区 默认为：SCN |
||||
|
*/ |
||||
|
uploadFile(0); |
||||
|
function uploadFile(i) { |
||||
|
let fileData = { |
||||
|
fileIndex: i, |
||||
|
files: requestInfo.files, |
||||
|
size: requestInfo.files[i].size |
||||
|
}; |
||||
|
// #ifdef H5
|
||||
|
fileData.name = requestInfo.files[i].name; |
||||
|
fileData.type = requestInfo.files[i].type; |
||||
|
// #endif
|
||||
|
// 交给七牛上传
|
||||
|
qiniuUploader.upload(requestInfo.files[i].path, (res) => { |
||||
|
fileData.url = res.imageURL; |
||||
|
requestInfo.onEachUpdate && requestInfo.onEachUpdate({ |
||||
|
url: res.imageURL, |
||||
|
...fileData |
||||
|
}); |
||||
|
imageList.push(res.imageURL); |
||||
|
if (len - 1 > i) { |
||||
|
uploadFile(i + 1); |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "request:ok", |
||||
|
statusCode: 200, |
||||
|
data: imageList |
||||
|
}); |
||||
|
resolve(imageList); |
||||
|
} |
||||
|
}, (error) => { |
||||
|
console.log('error: ' + error); |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, error); |
||||
|
reject(error) |
||||
|
}, { |
||||
|
region: qnRes.region || 'SCN', //地区
|
||||
|
domain: qnRes.visitPrefix, // bucket 域名，下载资源时用到。
|
||||
|
key: _this.randomChar(8, qnRes.folderPath), |
||||
|
uptoken: qnRes.token, // 由其他程序生成七牛 uptoken
|
||||
|
uptokenURL: 'UpTokenURL.com/uptoken' // 上传地址
|
||||
|
}, (res) => { |
||||
|
console.log(requestInfo); |
||||
|
requestInfo.onProgressUpdate && requestInfo.onProgressUpdate(Object.assign({}, fileData, res)); |
||||
|
// console.log('上传进度', res.progress)
|
||||
|
// console.log('已经上传的数据长度', res.totalBytesSent)
|
||||
|
// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
|
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "请添加七牛云回调方法：getQnToken", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "请添加七牛云回调方法：getQnToken", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "files 必须是数组类型", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "files 必须是数组类型", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
//本地服务器图片上传
|
||||
|
urlImgUpload(url = '', data = {}, options = {}) { |
||||
|
const _this = this; |
||||
|
return new Promise((resolve, reject) => { |
||||
|
uni.chooseImage({ |
||||
|
count: data.count || 9, //默认9
|
||||
|
sizeType: data.sizeType || ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
|
sourceType: data.sourceType || ['album', 'camera'], //从相册选择
|
||||
|
success: function(res) { |
||||
|
_this.urlFileUpload(url, { |
||||
|
...data, |
||||
|
files: res.tempFiles |
||||
|
}, options).then(resolve, reject); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
//本地服务器文件上传方法
|
||||
|
urlFileUpload(url = '', data = {}, options = {}) { |
||||
|
let requestInfo = this.getDefault({ |
||||
|
...data, |
||||
|
url: url, |
||||
|
method: "FILE" |
||||
|
}, options); |
||||
|
const _this = this; |
||||
|
return new Promise((resolve, reject) => { |
||||
|
//请求前回调
|
||||
|
if (_this.requestStart) { |
||||
|
let requestStart = _this.requestStart(requestInfo); |
||||
|
if (typeof requestStart == "object") { |
||||
|
requestInfo.data = requestStart.data; |
||||
|
requestInfo.header = requestStart.header; |
||||
|
requestInfo.isPrompt = requestStart.isPrompt; |
||||
|
requestInfo.load = requestStart.load; |
||||
|
requestInfo.isFactory = requestStart.isFactory; |
||||
|
requestInfo.files = requestStart.files; |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
// 本地文件上传去掉默认Content-Type
|
||||
|
if(requestInfo.header['Content-Type']){ |
||||
|
delete requestInfo.header['Content-Type']; |
||||
|
} |
||||
|
if (Array.isArray(requestInfo.files)) { |
||||
|
// #ifdef APP-PLUS || H5
|
||||
|
let files = []; |
||||
|
let fileData = { |
||||
|
files: requestInfo.files, |
||||
|
name: requestInfo.name || "file" |
||||
|
}; |
||||
|
requestInfo.files.forEach(item => { |
||||
|
files.push({ |
||||
|
uri: item.path, |
||||
|
name: requestInfo.name || "file" |
||||
|
}); |
||||
|
}); |
||||
|
let config = { |
||||
|
url: requestInfo.url, |
||||
|
files: files, |
||||
|
header: requestInfo.header, //加入请求头
|
||||
|
success: (response) => { |
||||
|
if (typeof(response.data) == "string") { |
||||
|
response.data = JSON.parse(response.data); |
||||
|
} |
||||
|
//是否用外部的数据处理方法
|
||||
|
if (requestInfo.isFactory && _this.dataFactory) { |
||||
|
//数据处理
|
||||
|
_this.dataFactory({ |
||||
|
...requestInfo, |
||||
|
response: response, |
||||
|
resolve: function(data) { |
||||
|
requestInfo.onEachUpdate && requestInfo.onEachUpdate({ |
||||
|
data: data, |
||||
|
...fileData |
||||
|
}); |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "request:ok", |
||||
|
statusCode: 200, |
||||
|
data: data |
||||
|
}); |
||||
|
resolve(data); |
||||
|
}, |
||||
|
reject: function(err) { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "数据工厂返回错误", |
||||
|
statusCode: 0, |
||||
|
data: err |
||||
|
}); |
||||
|
reject(err); |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
requestInfo.onEachUpdate && requestInfo.onEachUpdate({ |
||||
|
data: response, |
||||
|
...fileData |
||||
|
}); |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, response); |
||||
|
resolve(response); |
||||
|
} |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, err); |
||||
|
reject(err); |
||||
|
} |
||||
|
}; |
||||
|
if (requestInfo.data) { |
||||
|
config.formData = requestInfo.data; |
||||
|
} |
||||
|
const uploadTask = uni.uploadFile(config); |
||||
|
uploadTask.onProgressUpdate(res => { |
||||
|
requestInfo.onProgressUpdate && requestInfo.onProgressUpdate(Object.assign({}, fileData, res)); |
||||
|
}); |
||||
|
// #endif
|
||||
|
// #ifdef MP
|
||||
|
const len = requestInfo.files.length - 1; |
||||
|
let fileList = new Array; |
||||
|
fileUpload(0); |
||||
|
|
||||
|
function fileUpload(i) { |
||||
|
let fileData = { |
||||
|
fileIndex: i, |
||||
|
files: requestInfo.files, |
||||
|
size: requestInfo.files[i].size |
||||
|
}; |
||||
|
// #ifdef H5
|
||||
|
fileData.name = requestInfo.files[i].name; |
||||
|
fileData.type = requestInfo.files[i].type; |
||||
|
// #endif
|
||||
|
let config = { |
||||
|
url: requestInfo.url, |
||||
|
filePath: requestInfo.files[i].path, |
||||
|
header: requestInfo.header, //加入请求头
|
||||
|
name: requestInfo.name || "file", |
||||
|
success: (response) => { |
||||
|
if (typeof(response.data) == "string") { |
||||
|
response.data = JSON.parse(response.data); |
||||
|
} |
||||
|
//是否用外部的数据处理方法
|
||||
|
if (requestInfo.isFactory && _this.dataFactory) { |
||||
|
//数据处理
|
||||
|
_this.dataFactory({ |
||||
|
...requestInfo, |
||||
|
response: response, |
||||
|
resolve: function(data) { |
||||
|
requestInfo.onEachUpdate && requestInfo.onEachUpdate({ |
||||
|
data: data, |
||||
|
...fileData |
||||
|
}); |
||||
|
fileList.push(data); |
||||
|
if (len <= i) { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "request:ok", |
||||
|
statusCode: 200, |
||||
|
data: fileList |
||||
|
}); |
||||
|
resolve(fileList); |
||||
|
} else { |
||||
|
fileUpload(i + 1); |
||||
|
} |
||||
|
}, |
||||
|
reject: function(err) { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "数据工厂返回错误", |
||||
|
statusCode: 0, |
||||
|
data: err |
||||
|
}); |
||||
|
reject(err); |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
requestInfo.onEachUpdate && requestInfo.onEachUpdate({ |
||||
|
data: response, |
||||
|
...fileData |
||||
|
}); |
||||
|
fileList.push(response); |
||||
|
if (len <= i) { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "request:ok", |
||||
|
statusCode: 200, |
||||
|
data: fileList |
||||
|
}); |
||||
|
resolve(fileList); |
||||
|
} else { |
||||
|
fileUpload(i + 1); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, err); |
||||
|
reject(err); |
||||
|
} |
||||
|
}; |
||||
|
if (requestInfo.data) { |
||||
|
config.formData = requestInfo.data; |
||||
|
} |
||||
|
const uploadTask = uni.uploadFile(config); |
||||
|
uploadTask.onProgressUpdate(res => { |
||||
|
requestInfo.onProgressUpdate && requestInfo.onProgressUpdate(Object.assign({}, fileData, res)); |
||||
|
}); |
||||
|
} |
||||
|
// #endif
|
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "files 必须是数组类型", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "files 必须是数组类型", |
||||
|
statusCode: 0 |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
/***************纯粹的数据请求（如果使用这种可以删除掉fileUpload.js）******************/ |
||||
|
// import request from "./request.js";
|
||||
|
// export default request;
|
||||
|
|
||||
|
/********数据请求同时继承了文件上传（包括七牛云上传）************/ |
||||
|
import fileUpload from "./fileUpload.js"; |
||||
|
export default fileUpload; |
||||
@ -0,0 +1,169 @@ |
|||||
|
// created by gpake
|
||||
|
(function () { |
||||
|
|
||||
|
var config = { |
||||
|
qiniuRegion: '', |
||||
|
qiniuImageURLPrefix: '', |
||||
|
qiniuUploadToken: '', |
||||
|
qiniuUploadTokenURL: '', |
||||
|
qiniuUploadTokenFunction: null, |
||||
|
qiniuShouldUseQiniuFileName: false |
||||
|
} |
||||
|
|
||||
|
module.exports = { |
||||
|
init: init, |
||||
|
upload: upload, |
||||
|
} |
||||
|
|
||||
|
// 在整个程序生命周期中，只需要 init 一次即可
|
||||
|
// 如果需要变更参数，再调用 init 即可
|
||||
|
function init(options) { |
||||
|
config = { |
||||
|
qiniuRegion: '', |
||||
|
qiniuImageURLPrefix: '', |
||||
|
qiniuUploadToken: '', |
||||
|
qiniuUploadTokenURL: '', |
||||
|
qiniuUploadTokenFunction: null, |
||||
|
qiniuShouldUseQiniuFileName: false |
||||
|
}; |
||||
|
updateConfigWithOptions(options); |
||||
|
} |
||||
|
|
||||
|
function updateConfigWithOptions(options) { |
||||
|
if (options.region) { |
||||
|
config.qiniuRegion = options.region; |
||||
|
} else { |
||||
|
console.error('qiniu uploader need your bucket region'); |
||||
|
} |
||||
|
if (options.uptoken) { |
||||
|
config.qiniuUploadToken = options.uptoken; |
||||
|
} else if (options.uptokenURL) { |
||||
|
config.qiniuUploadTokenURL = options.uptokenURL; |
||||
|
} else if (options.uptokenFunc) { |
||||
|
config.qiniuUploadTokenFunction = options.uptokenFunc; |
||||
|
} |
||||
|
if (options.domain) { |
||||
|
config.qiniuImageURLPrefix = options.domain; |
||||
|
} |
||||
|
config.qiniuShouldUseQiniuFileName = options.shouldUseQiniuFileName |
||||
|
} |
||||
|
|
||||
|
function upload(filePath, success, fail, options, progress, cancelTask) { |
||||
|
if (null == filePath) { |
||||
|
console.error('qiniu uploader need filePath to upload'); |
||||
|
return; |
||||
|
} |
||||
|
if (options) { |
||||
|
updateConfigWithOptions(options); |
||||
|
} |
||||
|
if (config.qiniuUploadToken) { |
||||
|
doUpload(filePath, success, fail, options, progress, cancelTask); |
||||
|
} else if (config.qiniuUploadTokenURL) { |
||||
|
getQiniuToken(function () { |
||||
|
doUpload(filePath, success, fail, options, progress, cancelTask); |
||||
|
}); |
||||
|
} else if (config.qiniuUploadTokenFunction) { |
||||
|
config.qiniuUploadToken = config.qiniuUploadTokenFunction(); |
||||
|
if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) { |
||||
|
console.error('qiniu UploadTokenFunction result is null, please check the return value'); |
||||
|
return |
||||
|
} |
||||
|
doUpload(filePath, success, fail, options, progress, cancelTask); |
||||
|
} else { |
||||
|
console.error('qiniu uploader need one of [uptoken, uptokenURL, uptokenFunc]'); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function doUpload(filePath, success, fail, options, progress, cancelTask) { |
||||
|
if (null == config.qiniuUploadToken && config.qiniuUploadToken.length > 0) { |
||||
|
console.error('qiniu UploadToken is null, please check the init config or networking'); |
||||
|
return |
||||
|
} |
||||
|
var url = uploadURLFromRegionCode(config.qiniuRegion); |
||||
|
var fileName = filePath.split('//')[1]; |
||||
|
if (options && options.key) { |
||||
|
fileName = options.key; |
||||
|
} |
||||
|
var formData = { |
||||
|
'token': config.qiniuUploadToken |
||||
|
}; |
||||
|
if (!config.qiniuShouldUseQiniuFileName) { |
||||
|
formData['key'] = fileName |
||||
|
} |
||||
|
var uploadTask = wx.uploadFile({ |
||||
|
url: url, |
||||
|
filePath: filePath, |
||||
|
name: 'file', |
||||
|
formData: formData, |
||||
|
success: function (res) { |
||||
|
var dataString = res.data |
||||
|
if (res.data.hasOwnProperty('type') && res.data.type === 'Buffer') { |
||||
|
dataString = String.fromCharCode.apply(null, res.data.data) |
||||
|
} |
||||
|
try { |
||||
|
var dataObject = JSON.parse(dataString); |
||||
|
//do something
|
||||
|
var imageUrl = config.qiniuImageURLPrefix + '/' + dataObject.key; |
||||
|
dataObject.imageURL = imageUrl; |
||||
|
if (success) { |
||||
|
success(dataObject); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.log('parse JSON failed, origin String is: ' + dataString) |
||||
|
if (fail) { |
||||
|
fail(e); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
fail: function (error) { |
||||
|
console.error(error); |
||||
|
if (fail) { |
||||
|
fail(error); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
uploadTask.onProgressUpdate((res) => { |
||||
|
progress && progress(res) |
||||
|
}) |
||||
|
|
||||
|
cancelTask && cancelTask(() => { |
||||
|
uploadTask.abort() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function getQiniuToken(callback) { |
||||
|
wx.request({ |
||||
|
url: config.qiniuUploadTokenURL, |
||||
|
success: function (res) { |
||||
|
var token = res.data.uptoken; |
||||
|
if (token && token.length > 0) { |
||||
|
config.qiniuUploadToken = token; |
||||
|
if (callback) { |
||||
|
callback(); |
||||
|
} |
||||
|
} else { |
||||
|
console.error('qiniuUploader cannot get your token, please check the uptokenURL or server') |
||||
|
} |
||||
|
}, |
||||
|
fail: function (error) { |
||||
|
console.error('qiniu UploadToken is null, please check the init config or networking: ' + error); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function uploadURLFromRegionCode(code) { |
||||
|
var uploadURL = null; |
||||
|
switch (code) { |
||||
|
case 'ECN': uploadURL = 'https://up.qbox.me'; break; |
||||
|
case 'NCN': uploadURL = 'https://up-z1.qbox.me'; break; |
||||
|
case 'SCN': uploadURL = 'https://up-z2.qbox.me'; break; |
||||
|
case 'NA': uploadURL = 'https://up-na0.qbox.me'; break; |
||||
|
case 'ASG': uploadURL = 'https://up-as0.qbox.me'; break; |
||||
|
default: console.error('please make the region is with one of [ECN, SCN, NCN, NA, ASG]'); |
||||
|
} |
||||
|
return uploadURL; |
||||
|
} |
||||
|
|
||||
|
})(); |
||||
@ -0,0 +1,230 @@ |
|||||
|
export default class request { |
||||
|
constructor(options) { |
||||
|
//请求公共地址
|
||||
|
this.baseUrl = options.baseUrl || ""; |
||||
|
//公共文件上传请求地址
|
||||
|
this.fileUrl = options.fileUrl || ""; |
||||
|
//默认请求头
|
||||
|
this.header = options.header || {}; |
||||
|
//默认配置
|
||||
|
this.config = { |
||||
|
isPrompt: options.isPrompt === false ? false : true, |
||||
|
load: options.load === false ? false : true, |
||||
|
isFactory: options.isFactory === false ? false : true, |
||||
|
loadMore: options.loadMore === false ? false : true |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
// 获取默认信息
|
||||
|
getDefault(data, options = {}) { |
||||
|
//判断url是不是链接
|
||||
|
let urlType = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/.test( |
||||
|
data.url); |
||||
|
let config = Object.assign({}, this.config, options, data); |
||||
|
if (data.method == "FILE") { |
||||
|
config.url = urlType ? data.url : this.fileUrl + data.url; |
||||
|
} else { |
||||
|
config.url = urlType ? data.url : this.baseUrl + data.url; |
||||
|
} |
||||
|
//请求头
|
||||
|
if (options.header) { |
||||
|
config.header = Object.assign({}, this.header, options.header); |
||||
|
} else if (data.header) { |
||||
|
config.header = Object.assign({}, this.header, data.header); |
||||
|
} else { |
||||
|
config.header = this.header; |
||||
|
} |
||||
|
return config; |
||||
|
} |
||||
|
|
||||
|
//post请求
|
||||
|
post(url = '', data = {}, options = {}) { |
||||
|
return this.request({ |
||||
|
method: "POST", |
||||
|
data: data, |
||||
|
url: url, |
||||
|
...options |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
//get请求
|
||||
|
get(url = '', data = {}, options = {}) { |
||||
|
return this.request({ |
||||
|
method: "GET", |
||||
|
data: data, |
||||
|
url: url, |
||||
|
...options |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
//put请求
|
||||
|
put(url = '', data = {}, options = {}) { |
||||
|
return this.request({ |
||||
|
method: "PUT", |
||||
|
data: data, |
||||
|
url: url, |
||||
|
...options |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
//delete请求
|
||||
|
delete(url = '', data = {}, options = {}) { |
||||
|
return this.request({ |
||||
|
method: "DELETE", |
||||
|
data: data, |
||||
|
url: url, |
||||
|
...options |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
//接口请求方法
|
||||
|
request(data) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
if (!data.url) { |
||||
|
console.log("request缺失数据url"); |
||||
|
reject({ |
||||
|
errMsg: "缺失数据url", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
let requestInfo = this.getDefault(data); |
||||
|
|
||||
|
//请求前回调
|
||||
|
if (this.requestStart) { |
||||
|
let requestStart = this.requestStart(requestInfo); |
||||
|
if (typeof requestStart == "object") { |
||||
|
requestInfo.data = requestStart.data; |
||||
|
requestInfo.header = requestStart.header; |
||||
|
requestInfo.isPrompt = requestStart.isPrompt; |
||||
|
requestInfo.load = requestStart.load; |
||||
|
requestInfo.isFactory = requestStart.isFactory; |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
console.log("url: requestInfo.url》》》》", requestInfo.url) |
||||
|
console.log("url: requestInfo.header》》》》", requestInfo.header) |
||||
|
let requestData = { |
||||
|
url: requestInfo.url, |
||||
|
header: requestInfo.header, //加入请求头
|
||||
|
|
||||
|
success: (res) => { |
||||
|
//请求完成回调
|
||||
|
this.requestEnd && this.requestEnd(requestInfo, res); |
||||
|
//是否用外部的数据处理方法
|
||||
|
if (requestInfo.isFactory && this.dataFactory) { |
||||
|
//数据处理
|
||||
|
this.dataFactory({ |
||||
|
...requestInfo, |
||||
|
response: res, |
||||
|
resolve: resolve, |
||||
|
reject: reject |
||||
|
}); |
||||
|
} else { |
||||
|
resolve(res); |
||||
|
} |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
console.log("err"); |
||||
|
//请求完成回调
|
||||
|
this.requestEnd && this.requestEnd(requestInfo, err); |
||||
|
reject(err); |
||||
|
} |
||||
|
}; |
||||
|
//请求类型
|
||||
|
if (requestInfo.method) { |
||||
|
requestData.method = requestInfo.method; |
||||
|
} |
||||
|
if (requestInfo.data) { |
||||
|
requestData.data = requestInfo.data; |
||||
|
} |
||||
|
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
|
if (requestInfo.timeout) { |
||||
|
requestData.timeout = requestInfo.timeout; |
||||
|
} |
||||
|
// #endif
|
||||
|
if (requestInfo.dataType) { |
||||
|
requestData.dataType = requestInfo.dataType; |
||||
|
} |
||||
|
// #ifndef APP-PLUS || MP-ALIPAY
|
||||
|
if (requestInfo.responseType) { |
||||
|
requestData.responseType = requestInfo.responseType; |
||||
|
} |
||||
|
// #endif
|
||||
|
// #ifdef H5
|
||||
|
if (requestInfo.withCredentials) { |
||||
|
requestData.withCredentials = requestInfo.withCredentials; |
||||
|
} |
||||
|
// #endif
|
||||
|
uni.request(requestData); |
||||
|
}); |
||||
|
} |
||||
|
//jsonp请求(只限于H5使用)
|
||||
|
jsonp(url = '', data = {}, options = {}) { |
||||
|
let requestInfo = this.getDefault({ |
||||
|
method: "JSONP", |
||||
|
data: data, |
||||
|
url: url, |
||||
|
}, options); |
||||
|
let dataStr = ''; |
||||
|
Object.keys(data).forEach(key => { |
||||
|
dataStr += key + '=' + data[key] + '&'; |
||||
|
}); |
||||
|
//匹配最后一个&并去除
|
||||
|
if (dataStr !== '') { |
||||
|
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&')); |
||||
|
} |
||||
|
requestInfo.url = requestInfo.url + '?' + dataStr; |
||||
|
const _this = this; |
||||
|
return new Promise((resolve, reject) => { |
||||
|
let callbackName = "callback" + Math.ceil(Math.random() * 1000000); |
||||
|
if (_this.requestStart) { |
||||
|
requestInfo.data = data; |
||||
|
let requestStart = _this.requestStart(requestInfo); |
||||
|
if (typeof requestStart == "object") { |
||||
|
requestInfo.data = requestStart.data; |
||||
|
requestInfo.header = requestStart.header; |
||||
|
requestInfo.isPrompt = requestStart.isPrompt; |
||||
|
requestInfo.load = requestStart.load; |
||||
|
requestInfo.isFactory = requestStart.isFactory; |
||||
|
} else { |
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
reject({ |
||||
|
errMsg: "请求开始拦截器未通过", |
||||
|
statusCode: 0 |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
// #ifdef H5
|
||||
|
window[callbackName] = function(data) { |
||||
|
resolve(data); |
||||
|
} |
||||
|
let script = document.createElement("script"); |
||||
|
script.src = requestInfo.url + "&callback=" + callbackName; |
||||
|
document.head.appendChild(script); |
||||
|
// 及时删除，防止加载过多的JS
|
||||
|
document.head.removeChild(script); |
||||
|
// #endif
|
||||
|
//请求完成回调
|
||||
|
_this.requestEnd && _this.requestEnd(requestInfo, { |
||||
|
errMsg: "request:ok", |
||||
|
statusCode: 200 |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,229 @@ |
|||||
|
# request请求、配置简单、批量上传图片、超强适应性（很方便的支持多域名请求） |
||||
|
1. 配置简单、源码清晰注释多、适用于一项目多域名请求、第三方请求、七牛云图片上传、本地服务器图片上传等等 |
||||
|
2. 支持请求`get`、`post`、`put`、`delete` |
||||
|
3. 自动显示请求加载动画（可单个接口关闭） |
||||
|
4. 全局`api`数据处理函数，只回调请求正确的数据（可单个接口关闭） |
||||
|
5. 未登录或登录失效自动拦截并调用登录方法（可单个接口关闭） |
||||
|
6. 全局自动提示接口抛出的错误信息（可单个接口关闭） |
||||
|
7. 支持 Promise |
||||
|
8. 支持拦截器 |
||||
|
9. 支持七牛云文件（图片）批量上传 |
||||
|
10. 支持本地服务器文件（图片）批量上传 |
||||
|
11. 支持上传文件拦截过滤 |
||||
|
12. 支持上传文件进度监听 |
||||
|
13. 支持上传文件单张成功回调 |
||||
|
|
||||
|
### QQ交流群(学习干货多多) 607391225 |
||||
|
 |
||||
|
|
||||
|
### 常见问题 |
||||
|
1.接口请求成功了，没有返回数据或者数据是走的catch回调 |
||||
|
|
||||
|
答：`requestConfig.js` 请求配置文件里面，有一个`$http.dataFactory`方法，里面写的只是参考示例，`此方法需要开发者根据各自的接口返回类型修改` |
||||
|
|
||||
|
2.官方的方法有数据，本插件方法请求报错跨域问题 |
||||
|
|
||||
|
答：`requestConfig.js` 请求配置文件里面，`header`请求头设置的`content-type`请求类型需求和后台保持一致 |
||||
|
|
||||
|
3.登录后用户`token`怎么设置？ |
||||
|
|
||||
|
答：`requestConfig.js` 请求配置文件里面，`$http.requestStart`请求开始拦截器里面设置 |
||||
|
|
||||
|
4.怎么判断上传的文件（图片）太大？怎么过滤掉太大的文件（图片）？ |
||||
|
|
||||
|
答：`requestConfig.js` 请求配置文件里面，`$http.requestStart`请求开始拦截器里面设置 |
||||
|
|
||||
|
### 本次更新注意事项 |
||||
|
1. 所有的headers都改成了header（和官方统一） |
||||
|
2. 七牛云的获取token等信息提取到了`requestConfig.js`文件，参考如下 |
||||
|
|
||||
|
``` |
||||
|
// 添加获取七牛云token的方法 |
||||
|
$http.getQnToken = function(callback){ |
||||
|
//该地址需要开发者自行配置（每个后台的接口风格都不一样） |
||||
|
$http.get("api/kemean/aid/qn_upload").then(data => { |
||||
|
/* |
||||
|
*接口返回参数： |
||||
|
*visitPrefix:访问文件的域名 |
||||
|
*token:七牛云上传token |
||||
|
*folderPath:上传的文件夹 |
||||
|
*/ |
||||
|
callback({ |
||||
|
visitPrefix: data.visitPrefix, |
||||
|
token: data.token, |
||||
|
folderPath: data.folderPath |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 文件说明 |
||||
|
1. `request => request.js` 请求方法的源码文件 |
||||
|
2. `request => fileUpload.js` 七牛云上传和服务器上传的源码文件 |
||||
|
3. `request => index.js` 输出方法的文件 |
||||
|
4. `request => qiniuUploader.js` 七牛云官方上传文件 |
||||
|
5. `requestConfig.js` 请求配置文件（具体看代码） |
||||
|
|
||||
|
### 在main.js引入并挂在Vue上 |
||||
|
``` |
||||
|
import $http from '@/zhouWei-request/requestConfig'; |
||||
|
Vue.prototype.$http = $http; |
||||
|
``` |
||||
|
|
||||
|
### 通用请求方法（此方法不支持文件上传和JSONP） |
||||
|
``` |
||||
|
this.$http.request({ |
||||
|
url: 'aid/region', |
||||
|
method: "GET", // POST、GET、PUT、DELETE，具体说明查看官方文档 |
||||
|
data: {pid:0}, |
||||
|
timeout: 30000, // 默认 30000 说明：超时时间，单位 ms，具体说明查看官方文档 |
||||
|
dataType: "json", // 默认 json 说明：如果设为 json，会尝试对返回的数据做一次 JSON.parse，具体说明查看官方文档 |
||||
|
responseType: "text", // 默认 text 说明：设置响应的数据类型。合法值：text、arraybuffer，具体说明查看官方文档 |
||||
|
withCredentials: false, // 默认 false 说明：跨域请求时是否携带凭证（cookies），具体说明查看官方文档 |
||||
|
isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示） |
||||
|
load: true,//（默认 true 说明：本接口是否提示加载动画） |
||||
|
header: { //默认 无 说明：请求头 |
||||
|
'Content-Type': 'application/json' |
||||
|
}, |
||||
|
isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数将失去作用） |
||||
|
}).then(function (response) { |
||||
|
//这里只会在接口是成功状态返回 |
||||
|
}).catch(function (error) { |
||||
|
//这里只会在接口是失败状态返回，不需要去处理错误提示 |
||||
|
console.log(error); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### get请求 正常写法 |
||||
|
``` |
||||
|
this.$http.get('aid/region',{pid:0}). |
||||
|
then(function (response) { |
||||
|
//这里只会在接口是成功状态返回 |
||||
|
}).catch(function (error) { |
||||
|
//这里只会在接口是失败状态返回，不需要去处理错误提示 |
||||
|
console.log(error); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### post请求 async写法 |
||||
|
``` |
||||
|
async request(){ |
||||
|
let data = await this.$http.post('aid/region',{pid:0}); |
||||
|
console.log(data); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### 其他功能配置项 |
||||
|
``` |
||||
|
let data = await this.$http.post( |
||||
|
'http://www.aaa.com/aid/region', //可以直接放链接(将不启用全局定义域名) |
||||
|
{ |
||||
|
pid:0 |
||||
|
}, |
||||
|
{ |
||||
|
isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示） |
||||
|
load: true,//（默认 true 说明：本接口是否提示加载动画） |
||||
|
header: { //默认 无 说明：请求头 |
||||
|
'Content-Type': 'application/json' |
||||
|
}, |
||||
|
isFactory: true //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数将失去作用） |
||||
|
} |
||||
|
); |
||||
|
``` |
||||
|
|
||||
|
### 本地服务器图片上传（支持多张上传） |
||||
|
``` |
||||
|
this.$http.urlImgUpload('flie/upload',{ |
||||
|
name:"后台接受文件key名称", //默认 file |
||||
|
count:"最大选择数",//默认 9 |
||||
|
sizeType:"选择压缩图原图，默认两个都选",//默认 ['original', 'compressed'] |
||||
|
sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera'] |
||||
|
data:"而外参数" //可不填, |
||||
|
onEachUpdate: res => { |
||||
|
console.log("单张上传成功返回：",res); |
||||
|
}, |
||||
|
onProgressUpdate: res => { |
||||
|
console.log("上传进度返回：",res); |
||||
|
} |
||||
|
},{ |
||||
|
isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示） |
||||
|
load: true,//（默认 true 说明：本接口是否提示加载动画） |
||||
|
header: { //默认 无 说明：请求头 |
||||
|
'Content-Type': 'application/json' |
||||
|
}, |
||||
|
isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用） |
||||
|
maxSize: 300000 //（默认 无 说明：上传的文件最大字节数限制，默认不限制） |
||||
|
}).then(res => { |
||||
|
console.log("全部上传完返回结果：",res); |
||||
|
}); |
||||
|
``` |
||||
|
### 本地服务器文件上传（支持多张上传） |
||||
|
``` |
||||
|
this.$http.urlFileUpload("flie/upload",{ |
||||
|
files:[], // 必填 临时文件路径 |
||||
|
data:"向服务器传递的参数", //可不填 |
||||
|
name:"后台接受文件key名称", //默认 file |
||||
|
onEachUpdate: res => { |
||||
|
console.log("单张上传成功返回：",res); |
||||
|
}, |
||||
|
onProgressUpdate: res => { |
||||
|
console.log("上传进度返回：",res); |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示） |
||||
|
load: true,//（默认 true 说明：本接口是否提示加载动画） |
||||
|
header: { //默认 无 说明：请求头 |
||||
|
'Content-Type': 'application/json' |
||||
|
}, |
||||
|
isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用） |
||||
|
maxSize: 300000 //（默认 无 说明：上传的文件最大字节数限制，默认不限制） |
||||
|
}).then(res => { |
||||
|
console.log("全部上传完返回结果：",res); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 七牛云图片上传（支持多张上传） |
||||
|
``` |
||||
|
this.$http.qnImgUpload({ |
||||
|
count:"最大选择数", // 默认 9 |
||||
|
sizeType:"选择压缩图原图，默认两个都选", // 默认 ['original', 'compressed'] |
||||
|
sourceType:"选择相机拍照或相册上传 默认两个都选", // 默认 ['album','camera'] |
||||
|
onEachUpdate: res => { |
||||
|
console.log("单张上传成功返回：",res); |
||||
|
}, |
||||
|
onProgressUpdate: res => { |
||||
|
console.log("上传进度返回：",res); |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
load: true, //（默认 true 说明：本接口是否提示加载动画） |
||||
|
maxSize: 300000 //（默认 无 说明：上传的文件最大字节数限制，默认不限制） |
||||
|
}).then(res => { |
||||
|
console.log("全部上传完返回结果：",res); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
### 七牛云文件上传（支持多张上传） |
||||
|
``` |
||||
|
this.$http.qnFileUpload( |
||||
|
{ |
||||
|
files:[], // 必填 临时文件路径 |
||||
|
onEachUpdate: res => { |
||||
|
console.log("单张上传成功返回：",res); |
||||
|
}, |
||||
|
onProgressUpdate: res => { |
||||
|
console.log("上传进度返回：",res); |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
load: true, //（默认 true 说明：本接口是否提示加载动画） |
||||
|
maxSize: 300000 //（默认 无 说明：上传的文件最大字节数限制，默认不限制） |
||||
|
}).then(res => { |
||||
|
console.log("全部上传完返回结果：",res); |
||||
|
}); |
||||
|
``` |
||||
|
### jsonp 跨域请求（只支持H5） |
||||
|
``` |
||||
|
let data = await this.$http.jsonp('http://www.aaa.com/aid/region',{pid:0}); |
||||
|
``` |
||||
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 31 KiB |
Loading…
Reference in new issue