PS:關于小程序的文章想寫很久了，但是由于小程序一直在開發的原因，一拖再拖，趁現在有點時間起個頭先。

本遇坑指南不會過多介紹小程序內的一些功能怎么用，因為如果想知道功能的話可以去隔壁小程序官方文檔（https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html），里面的文檔寫的非常完整易懂。這里主要是一些文檔沒有告訴你的東西，我在實際開發中遇到的坑，以及對應的解決方案，希望能幫助到正在踩坑的人。

一、Button樣式問題
有時候我們需要用到表單組件來收集formID，跳轉到客服頁面，但是button原生的組件會比較不符合設計的需求，所以需要替換掉button自帶的樣式，然后再進行樣式的更改，代碼如下

wxml:

  <form bindsubmit="subForm" report-submit="{{true}}">
    <button type="primary" hover-class="none" class="out-btn" formType="submit">
      <view class="sub-btn">提交</view>
    </button>
  </form>
  
wxss:

button{
  background-color:transparent;
  padding:0;
  margin:0;
  display:block;
  border:0;
  border-radius:0;
  z-index: 10;
}
button::after{
  content:'';
  width:0;
  height:0;
  -webkit-transform:scale(1);
  transform:scale(1);
  display:none;
  background-color:transparent;
}

二、canvas畫圖的坑
在有些場景下可能會有前端小程序畫圖的需要，比如說要生成如下訂制版分享的二維碼圖片并保存到相冊

案例圖片

這是我在輕芒上找的一個例子，這種生成分享圖的需求還是很常見的。紅線畫出來的區域是是一些圖片的資源，這樣要畫上去的話就需要用到一個canvas的API,
ctx.drawImage（注意：ctx就是官方文檔中的canvasContext，canvas上下文），這個API接受的第一個參數就是圖片的資源。
劃重點了，這個圖片的資源一定得是本地圖片才能畫在畫布上，例如（'../../static/images/qrcode.png'），如果是網絡圖片鏈接就會在畫布上出現黑色的一塊什么都沒有，所以在調用這個API之前得對網絡圖片進行一步下載處理

  getDrawImage: function (picUrl) {
    return new Promise(resolve=>{
      wx.downloadFile({
        url: picUrl,
        success: (res) => {
          let picLocal = res.tempFilePath;
          resolve(picLocal);     
        }
      })
    })
  },

我在這里封裝了一個函數專門來在調用網絡圖片前使用，因為下載是異步的，所以用到了promise。

在畫圖，畫文字都畫完后就是轉換canvas畫布成圖片了，在這一步也遇到了一個坑，是API調用的問題，話不多說貼代碼：

  saveImg() {
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 10000
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 375,    //這里必填
      height: 543,    //這里必填
      destWidth: 750,
      destHeight: 1086,
      canvasId: 'myCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            wx.hideToast();
            wx.showToast({
              title: '保存成功！',
              icon: 'success',
              duration: 1500,
              mask: true
            })
          }
        })
      }
    })
  }

代碼中注釋的地方在官方文檔中是不需要必填的選項，但是如果真的不填的畫，畫出來的也會出問題（附文檔地址：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html）。

未完待續。。。