記錄開發小程序過程當中的一些代碼及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，
我使用的解決方法也是上網找了一番才找到的，

使用wx.getImageInfoAPI把後臺傳的圖片轉換爲本地圖片，而後再放到canvas裏邊，這樣就能夠在真機上展現了。

問題二

長按海報出現操做列表，這裏的操做列表我是自定義的，使用系統自帶的不知道什麼狀況，可是吧...目前小程序中的canvasAPI權重最高，自定義的列表根本覆蓋不了canvas... 定位什麼的也無論用，並且canvas的固定定位不起做用和絕對定位同樣，總之bug不少...摸索一番才解決了這個嚴重的問題

在海報顯示以前把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和很差實現的功能，說不定之後遇到了還能看一看 (:зゝ∠)