一.封装接口
/**
* 请求头
*/
var header = {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': "Bearer " + wx.getStorageSync("token"),
'os': 'android',
'version': '1.0.0',
'device_token': 'ebc9f523e570ef14',
}
/**
* 供外部post请求调用
*/
function post(url, params, onSuccess, onFailed) {
console.log("请求方式:", "POST")
request(url, params, "POST", onSuccess, onFailed);
}
/**
* 供外部get请求调用
*/
function get(url, params, onSuccess, onFailed) {
console.log("请求方式:", "GET")
request(url, params, "GET", onSuccess, onFailed);
}
/**
* function: 封装网络请求
* @url URL地址
* @params 请求参数
* @method 请求方式:GET/POST
* @onSuccess 成功回调
* @onFailed 失败回调
*/
function request(url, params, method, onSuccess, onFailed) {
console.log('请求url:' + url);
wx.showLoading({
title: "正在加载中...",
})
console.log("请求头:", header)
wx.request({
url: url,
data: dealParams(params),
method: method,
header: header,
success: function(res) {
wx.hideLoading();
console.log('响应:', res.data);
if (res.data) {
/** start 根据需求 接口的返回状态码进行处理 */
if (res.statusCode == 200) {
onSuccess(res.data); //request success
} else {
onFailed(res.data.message); //request failed
}
/** end 处理结束*/
}
},
fail: function(error) {
onFailed(""); //failure for other reasons
}
})
}
/**
* function: 根据需求处理请求参数:添加固定参数配置等
* @params 请求参数
*/
function dealParams(params) {
console.log("请求参数:", params)
return params;
}
// 1.通过module.exports方式提供给外部调用
module.exports = {
postRequest: post,
getRequest: get,
}
二.上传图片 并压缩图片
1.wxml
<canvas style="width: {{cw0}}px; height: {{ch0}}px;position: absolute; z-index: -1; left: -10000rpx;; top: -10000rpx;" canvas-id="myCanvas0"></canvas>
2.wxjs
cw0: '',
ch0: '',
scale:0.1,
compress: function (e) {
let that = this;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
success(res) {
let path = res.tempFilePaths[0];
let size = res.tempFiles[0].size / 1024;
if (size > 1000) { //大于100k压缩
wx.getImageInfo({
src: path,
success(res) {
//console.log('获得原始图片大小',res.width)
let originWidth, originHeight;
originHeight = res.height;
originWidth = res.width;
//压缩比例
// 最大尺寸限制
let maxWidth = originWidth * that.data.scale,
maxHeight = originHeight * that.data.scale;
// 目标尺寸
let targetWidth = originWidth,
targetHeight = originHeight;
//等比例压缩,如果宽度大于高度,则宽度优先,否则高度优先
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 要求宽度*(原生图片比例)=新图片尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
//更新canvas大小
that.setData({
cw0: targetWidth,
ch0: targetHeight
});
let id = "myCanvas0";
//尝试压缩文件,创建 canvas
let ctx = wx.createCanvasContext(id);
ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(path, 0, 0, targetWidth, targetHeight);
ctx.draw();
wx.showLoading({
title: "压缩中..."
})
//保存图片
setTimeout(function () {
wx.canvasToTempFilePath({
fileType: "jpg",
canvasId: id,
success: (res) => {
//写入图片数组
let uploadFile = res.tempFilePath;
that.uploadImg(uploadFile);
},
fail: (err) => {
console.error(err)
}
}, this)
}, 500);
}
})
} else {
wx.showLoading({
title: "保存中..."
})
that.uploadImg(path);
}
}
})
},
uploadImg: function (imgPath) {
this.setData({
imags: imgPath
})
let that = this
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
wx.uploadFile({
url: httpname.domainName + api.UploadPic, // 仅为示例,非真实的接口地址
filePath: imgPath,
// sizeType: 'compressed',
header: {
'content-type': 'application/x-www-form-urlencoded',
token: wx.getStorageSync('usertoke').token
},
name: 'img',
formData: {
uid: wx.getStorageSync('usertoke').uid,
flag: 5
},
success(res) {
wx.hideLoading()
let data = JSON.parse(res.data)
let list = that.data.fileList
list.push(data.result.url)
that.setData({ fileList: list });
// 上传完成需要更新 fileList
},
});
},
三.预览图片
wx.previewImage({
urls: ["http://122.114.165.96:9994/c4272ff126757a788a05144c0f115943.png"]
})
四.微信小程序生成二维码
onShow: function() {
2
3 4
5 let _this = this;
6 wx.request({
7 url: 'https://api.weixin.qq.com/cgi-bin/token',
8 data: {
9 grant_type: 'client_credential',
10 appid: '填写appid', //不能缺少
11 secret: '填写app秘钥' //不能缺少
12 },
13 success: function(res) {
14
15 wx.request({
16 url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,
17 data: {
18 // "path": "pages/index/index", 默认跳转到主页:pages/index/index,可指定
19 "width": 430,
20 "scene": wx.getStorageSync('uid')
21 },
22 responseType: 'arraybuffer', // 这行很重要,转为二进制数组
23 header: {
24 'content-type': 'application/json;charset=utf-8'
25 },
26 method: 'POST',
27 success(res) {
28 //转为base64
29 let bin64 = wx.arrayBufferToBase64(res.data);
30
31 _this.setData({
32 //base 64设置到页面上
33 img: "data:image/png;base64," + bin64
34 });
35 }
36 })
37 }
38 })
39 },
五.base64格式的小程序码通过canvas画出来无效(转本地路径)
// 把小程序码写入本地
export const writeFile = (base64Str => {
return new Promise((resolve,reject)=>{
// 后台返回的base64格式数据的回车换行换为空字符''
let base64Image = base64Str.split(',')[1].replace(/[\r\n]/g, '');
// 文件管理器
const fsm = wx.getFileSystemManager();
// 文件名
const FILE_BASE_NAME = 'tmp_base64src';
// 文件后缀
const format = 'png';
// 获取当前时间戳用于区分小程序码,防止多次写进的小程序码图片都一样,建议通过不同的列表ID来区分不同的小程序码
const timestamp = (new Date()).getTime();
// base转二进制
const buffer = wx.base64ToArrayBuffer(base64Image),
// 文件名
filePath = `${wx.env.USER_DATA_PATH}/${timestamp}share.${format}`;
// 写文件
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success(res) {
// 读取图片
wx.getImageInfo({
src: filePath,
success: function(res) {
let img = res.path;
// 把需要画出来的图片的临时url暴露出去
resolve(img);
reject();
},
fail(e){
console.log('读取图片报错');
console.log(e);
},
error(res) {
console.log(res)
}
})
},
fail(e){
console.log(e);
}
})
}).catch((e) => {
console.log(e);
})
});
// 删除存储的垃圾数据
export const removeSave = () =>{
return new Promise((resolve)=>{
// 文件管理器
const fsm = wx.getFileSystemManager();
// 获取文件列表
fsm.readdir({
dirPath: wx.env.USER_DATA_PATH, // 当时写入的文件夹
success(res){
res.files.forEach((el) => { // 遍历文件列表里的数据
// 删除存储的垃圾数据
if (el !== 'miniprogramLog') { // 过滤掉miniprogramLog
fsm.unlink({
filePath: `${wx.env.USER_DATA_PATH}/${el}`, // 文件夹也要加上,如果直接文件名会无法找到这个文件
fail(e){
console.log('readdir文件删除失败:', e)
}
});
}
})
resolve()
}
})
})
}
// 在页面调用方法
import { writeFile } from '../../utils/wxFunc'
removeBeforeFiles () {
removeSave().then(() => {
this.getUseCode();
}).catch(e => {
console.log(e);
})
},
getUseCode () {
writeFile(codeUrl).then(img => { // codeUrl为base64格式的小程序码
this.createCanvas(img);
}).catch(e => {
console.log(e);
})