记录开发小程序过程当中的一些代码及bug

小程序和前端在开发方面仍是有一些区别的,记录一下过程当中的坑

生成分享的海报

小程序中想要把页面生成图片,只能使用canvas的API

wx.canvasToTempFilePath

首先把海报的布局使用canvas画出来,前端

ctx.setFillStyle('#ffffff');
ctx.rect(0, 0, phoneW, phoneH);
ctx.fill();
ctx.drawImage("图片", 0, 0, phoneW, phoneH * 0.65)
ctx.setFillStyle('#000000');
ctx.setFontSize(16);
ctx.fillText('快来助我一臂之力吧', phoneW * 0.3, phoneH * 0.7);
ctx.draw(true, function () {
  //保存临时图片
  wx.canvasToTempFilePath({
    canvasId: 'poster',
    success: function (res) {
      that.setData({ 
        path: res.tempFilePath   //这个就是生成的canvas图片
      })
    },
    fail: function (res) {
      console.log(res)
    }
  })
})

问题一

后台的图片数据是不能展现在canvas上的,在虚拟机能够展现,真机上不显示图片,
这个也是官方公布的bug,
我使用的解决方法也是上网找了一番才找到的,web

使用wx.getImageInfoAPI把后台传的图片转换为本地图片,而后再放到canvas里边,这样就能够在真机上展现了。

问题二

长按海报出现操做列表,这里的操做列表我是自定义的,使用系统自带的不知道什么状况,可是吧...目前小程序中的canvasAPI权重最高,自定义的列表根本覆盖不了canvas... 定位什么的也无论用,并且canvas的固定定位不起做用和绝对定位同样,总之bug不少...摸索一番才解决了这个严重的问题canvas

在海报显示以前把canvas替换为image,路径就是canvas生成的图片,而且隐藏canvas,这样页面上用户看到的东西并无发生改变,也解决了bug

倒计时

一个适用于多方面的倒计时模块

page({
        data:{
              dayMillisecond:2592000  //倒计时30天的毫秒数
        },
        onLoad:function(){
            // 倒计时调用
            setTimeout(function () {
              that.timer();
            }, 10)
        },
        // 渲染倒计时
      timer: function () {
        let promise = new Promise((resolve, reject) => {
          let setTimer = setInterval(
            () => {
              this.setData({
                dayClock: app.dateformat1(this.data.dayMillisecond1--),
                //把dayClock加到页面中便可
              })
            }, 1000)
        })
        promise.then((setTimer) => {
          clearInterval(setTimer)
        })
      },
    })
 //app.dateformat1
  dateformat1:function(second) {
      var day=Math.floor(second/3600/24),
      hr = Math.floor(second/3600%24),
      min = Math.floor(second/60%60),
      sec = (second%60);
      return day; //根据实际开发需求返回相应的值
  },

隐藏scroll-view的滚动条

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

本人只是一个刚入门的小白,若是哪里有问题,欢迎各位大神指出,文章也会不定时更新,记录开发过程当中遇到一些的怪bug和很差实现的功能,说不定之后遇到了还能看一看 (:зゝ∠)

相关文章
相关标签/搜索