【微信小程序】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);
                                }
                            })
                        })
                    }
                })
            }
          }
        })     
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的...
    dufebin阅读 4,117评论 0 19
  • wepy文档:https://tencent.github.io/wepy/ 全局安装wepy: npm i -g...
    闲余幽梦阅读 7,891评论 2 19
  • 在这光怪陆离的世界,我们对很多事变得急躁,不能静下来心。可是我们明明知道急是没有用的,我想大概是我们不够强大,不够...
    Aa土豆阅读 429评论 3 3
  • 一、《观察洋葱表皮》教学思考(6.2班) 本节课重难点:制作并观察洋葱表皮临时装片 (一)学生在实际操作中易出现的...
    Vickey琪阅读 8,718评论 10 3
  • 我常常想,一棵树要长得高大挺拔,需要怎样的养分呢? 应该是需要两方面的养分吧。一方面,阳光遍撒,温暖和煦,时而有微...
    暖树_6538阅读 623评论 4 38