微信小程序wepy--打怪记

封面

前言

从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);
                                }
                            })
                        })
                    }
                })
            }
          }
        })     
    }