微信小程序wepy--打怪记
2019-04-06 本文已影响1人
Fernweh_Nancy
封面
前言
从2018年9月到现在，已经做了两个小程序并且都上线，其中的框架是用到wepy，为什么选择这个wepy呢，第一，小程序原生语言没有组件化的特性，当时我们的项目类似的功能比较多，用这个原生语言，不仅增加开发的成本时间，还增加包的大小。第二，鉴于有些同事有wepy开发的经验，当时要求要马上上手，节省学习的成本时间，就直接用wepy。就这么开始入wepy的坑...接下来将介绍我是怎么样爬出坑，也给开发小程序的童鞋作为参考，避免入坑，减少不必要的精力和时间～
如何打怪
- 如果用wepy框架开发，打包(npm run build)时一定要关掉“上传代码时样式自动补全”，“代码压缩上传”，不然组件的功能出问题。
- wx.request用async/await请求，返回空的
原因：没开启promise，async/await
解决方案：在app.wpy里的constructor添加this.use(‘promisify’);
constructor () {
super()
this.use('requestfix')
this.use('promisify')
}
- 请求时返回[[PromiseValue]]格式
解决方案：加async await即可，或者用promise
第一种：
async 函数名(){
let res=await api.get_message(params); //请求接口
}
第二种：
函数名(){
let res=api.get_message(params); //先请求接口
//然后用promise来获取结果的值
Promise.resolve(res).then(result=>{
console.log(result);
}).catch(err=>{
//错误
})
}
- 请求图形验证码的接口，返回乱码的问题
原因：这个是base64格式，需要支持
解决方案：
//在image组件上设置base64格式
<image src="data:image/png;base64,{{imgUrl}}"/>
//然后赋值时要转化base64字符串
this.imgUrl=wx.arrayBufferToBase64(res.data);//res.data是请求接口返回的数据
- 安卓上正常显示日期“2018-11-19 13:45:00”，而ios不正常，返回NaN
原因：ios不支持“-” ，转换时间戳的时候就返回NaN
解决方案：
//转换时间戳的时候，要先把“-”转化为“/”
let date="2018-11-19 13:45:00";
date.replace(/-/g, '/')
- 跳转新的页面时带数组的参数，在新的页面获取却是object
解决方案：需要先转换json格式，然后获取到了就换成原来的格式
//带参数跳转新的页面
let arr=['1','2'];
let a=JSON.stringify(arr);
wx.navigateTo({
url:'../index/index?val='+a,
})
//index页面中
onLoad(params){
let aa=JSON.parse(params.val);
}
- 遮罩层滚动穿透问题
解决方案：
catchtouchmove=true
- 上传图片时图片过大，影响服务器的资源
解决方案：先建立canvas，但这个不可显示的，选择图片时，就在可见的页面后面压缩。
//wxml
<canvas canvas-id="contraction" style="width: {{conWidth}}px;height:{{conHeight}}px;position: fixed;left:-{{width+300}}px;z-index: -1;"></canvas>
//js
data={
conHeight:350,
conWidth:350,
}
//选择图片
chooseImage1(e){
let that=this;
wx.chooseImage({
count:1,
sizeType:['original'],
sourceType:['album','camera'],
success:res=>{
let urls=res.tempFilePaths.slice(0);
this.downUpImg(urls,data=>{
that.add_pic1=data;
});
}
})
},
//压缩图片
downUpImg(img,cb){
let imgSize=0;
//获取原图的信息
wx.getFileInfo({
filePath:img,
success:res=>{
imgSize=res.size;
if((Number(imgSize)/1024)<200){
//如果小于200kb,则直接赋值
cb(img);
}else{
let ctx=wx.createCanvasContext('contraction');
wx.getImageInfo({
src:img,
success:res=>{
// console.log('开始压缩');
// console.log('原图的大小:');
// console.log(res);
let picW=0,picH=0;
if(res.width>res.height){
picW=this.conWidth;
picH=parseInt(picW*res.height/res.width);
this.conHeight=picH;
}else{
picH=this.conHeight;
picW=parseInt(picH*res.width/res.height);
this.conWidth=picW;
}
this.$apply();
ctx.drawImage(img,0,0,picW,picH);
ctx.draw(false,()=>{
wx.canvasToTempFilePath({
x:0,
y:0,
width:this.conWidth,
height:picH,
destWidth:this.conWidth,
destHeight:picH,
canvasId:'contraction',
success:res=>{
let imgUrl=res.tempFilePath;
cb(imgUrl);
}
})
})
}
})
}
}
})
}
