封面
前言
從2018年9月到現(xiàn)在，已經(jīng)做了兩個小程序并且都上線，其中的框架是用到wepy，為什么選擇這個wepy呢，第一，小程序原生語言沒有組件化的特性，當(dāng)時(shí)我們的項(xiàng)目類似的功能比較多，用這個原生語言，不僅增加開發(fā)的成本時(shí)間，還增加包的大小。第二，鑒于有些同事有wepy開發(fā)的經(jīng)驗(yàn)，當(dāng)時(shí)要求要馬上上手，節(jié)省學(xué)習(xí)的成本時(shí)間，就直接用wepy。就這么開始入wepy的坑...接下來將介紹我是怎么樣爬出坑，也給開發(fā)小程序的童鞋作為參考，避免入坑，減少不必要的精力和時(shí)間～
如何打怪
- 如果用wepy框架開發(fā)，打包(npm run build)時(shí)一定要關(guān)掉“上傳代碼時(shí)樣式自動補(bǔ)全”，“代碼壓縮上傳”，不然組件的功能出問題。
- wx.request用async/await請求，返回空的
原因：沒開啟promise，async/await
解決方案：在app.wpy里的constructor添加this.use(‘promisify’);
constructor () {
super()
this.use('requestfix')
this.use('promisify')
}
- 請求時(shí)返回[[PromiseValue]]格式
解決方案：加async await即可，或者用promise
第一種：
async 函數(shù)名(){
let res=await api.get_message(params); //請求接口
}
第二種：
函數(shù)名(){
let res=api.get_message(params); //先請求接口
//然后用promise來獲取結(jié)果的值
Promise.resolve(res).then(result=>{
console.log(result);
}).catch(err=>{
//錯誤
})
}
- 請求圖形驗(yàn)證碼的接口，返回亂碼的問題
原因：這個是base64格式，需要支持
解決方案：
//在image組件上設(shè)置base64格式
<image src="data:image/png;base64,{{imgUrl}}"/>
//然后賦值時(shí)要轉(zhuǎn)化base64字符串
this.imgUrl=wx.arrayBufferToBase64(res.data);//res.data是請求接口返回的數(shù)據(jù)
- 安卓上正常顯示日期“2018-11-19 13:45:00”，而ios不正常，返回NaN
原因：ios不支持“-” ，轉(zhuǎn)換時(shí)間戳的時(shí)候就返回NaN
解決方案：
//轉(zhuǎn)換時(shí)間戳的時(shí)候，要先把“-”轉(zhuǎn)化為“/”
let date="2018-11-19 13:45:00";
date.replace(/-/g, '/')
- 跳轉(zhuǎn)新的頁面時(shí)帶數(shù)組的參數(shù)，在新的頁面獲取卻是object
解決方案：需要先轉(zhuǎn)換json格式，然后獲取到了就換成原來的格式
//帶參數(shù)跳轉(zhuǎn)新的頁面
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
- 上傳圖片時(shí)圖片過大，影響服務(wù)器的資源
解決方案：先建立canvas，但這個不可顯示的，選擇圖片時(shí)，就在可見的頁面后面壓縮。
//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);
}
})
})
}
})
}
}
})
}
