前言
做了一些小程式專案，著重記錄一下小程式內嵌webview以及小程式畫canvas遇到的一些坑。
小程式畫canvas的坑
第一個坑，canvas無法畫base64格式的二維碼。
需求：前端將一些動態資料，以及動態生成的小程式二維碼圖片用canvas畫出來，最後生成且可儲存的一張圖片。
前端顯示二維碼圖片一般有兩種方法：
1.後端呼叫微信api，直接返回的二進位制資料到前端會亂碼，一般後端先將二進位制資料轉為base64格式資料，然後返回到前端。若是當普通的圖片顯示只需要設定圖片：
<image src="data:image/png;base64,圖片base64資料"></image>
2.後臺在伺服器上將二進位制資料儲存為一張圖片，然後返回給前端一個二維碼的絕對路徑。
若後臺因為各種原因不好實現第2種，且第1種方法微信官方的回覆是：真機上小程式的canvas無法繪製base64格式的圖片，難道就無法在canvas裡繪製二維碼了？
此時還有第3種方法就是利用小程式的檔案系統FileSystemManager.writeFile()Api，將base64資料的圖片寫入到本地，之後去操作這個本地的圖片。
第一步建立寫入檔案的資料夾
mkdir() {
return new Promise((resolve, reject) => {
this.fs.access({ // 先判斷有沒有resource目錄
path: `${wx.env.USER_DATA_PATH}/resource`, // wx.env.USER_DATA_PATH獲取本地檔案路徑，開發者工具是:"http://usr",真機是:"wxfile://usr"
success: (res) => {
console.log(`access:`,res)
resolve(res)
},
fail: (err) => {
console.error(`access:`,err)
// 不存在，建立一個資料夾
this.fs.mkdir({
dirPath: `${wx.env.USER_DATA_PATH}/resource`,
success: (res) => {
console.log(`mkdir:`, res)
resolve(res)
},
fail: (err) => {
console.error(err)
reject(res)
}
})
}
})
})
}
複製程式碼第二步將base64圖片寫入建立的資料夾
writeBase64Image() {
return this.mkdir().then(() => {
return new Promise((resolve, reject) => {
this.fs.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/resource/${this.openId}.png`, // 可以用openId來命名此圖片
data: this.base64Code, //後臺返回的base64編碼的圖片，不需要加`data:image/png;base64,`
encoding: `base64`, // 存的檔案型別的選擇base64
success:(res) => {
console.log(`writeFile:`, res)
resolve(res)
},
fail:(err) => {
console.error(`writeFile:`,err)
reject(err)
}
})
})
})
}
複製程式碼第三步獲得圖片的快取臨時地址
如果是絕對路徑的網路圖片，繪製圖片前需要將圖片快取到本地，如果是寫入的本地檔案則可以直接繪製。
getImageSrc(src) {
return new Promise((resolve, reject) => {
// 如果是本地圖片則直接返回;如果是網路路徑的圖片，則先快取到本地，wx.getImageInfo或者wx.downloadFile獲得本地臨時路徑
!src.includes(`https`) ? resolve(src) :
wx.getImageInfo({
src,
success(res) {
resolve(res) // res.path:返回的臨時路徑
},
fail(err) {
reject(err)
}
})
})
},
複製程式碼之後通過獲得臨時檔案路徑用canvas繪製圖片。
以前遇到這個問題，絕對大多數的開發者都是採用後端返回圖片絕對路徑給前端，而第3種則可以前端去做儲存圖片的事，減少很多後端伺服器的操作。
第二個坑，一些android機生成的canvas圖片，文字樣式混亂
尤其是華為P20，哈哈真真是bug神機了。
小程式的canvas元件是原生元件，原生元件脫離在 WebView 渲染流程外，對於頻繁繪製而機型又繪製較慢時，就很容易樣式錯亂，解決方法就是生成圖片時給一定時間的延遲。
// 在繪製canvas的回撥裡，匯出生成的圖片，如果是andriod則延遲500ms生成。如果500ms還會有樣式問題，那就增加延遲時間。
ctx.draw(() => {
// some code
isAndroid && setTimeout(() => {
wx.canvasToTempFilePath({
// some code
})
},500)
// some code
})
複製程式碼第三個坑，在ios上只能繪製顯示的canvas元素，若設定wx:if或hidden，在初始化時必須是顯示的。
如果你想繪製一個隱藏的canvas元素(hidden=true)，將這個canvas轉為圖片儲存，android下正常，ios下則不會繪製canvas。
其他的一些問題
用css3的旋轉動畫，在真機上沒效果，最好使用wx.createAnimation代替；
canvas元素不能新增css動畫，會非常的卡，即使使用wx.createAnimation代替，也是很卡。這個官方文件也有提到。
小程式內嵌webview的一些坑
第一個坑，判斷是否在小程式環境內
如果app的首頁以及一些其他頁面是服務端渲染，那麼官方的提供的方法，並不一定能判斷準確，尤其在android下。
如果想通過，navigator.userAgent裡的miniprogram字串判斷小程式，我勸你還是放棄吧….，真機下miniprogram字串時有時無，官方的回覆永遠都是這是最近出現的bug，會在後續版本修復……
// 在服務端渲染的頁面下，下面的方法無法保證準確的判斷，尤其在andriod下
function ready() {
console.log(window.__wxjs_environment === `miniprogram`) // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
document.addEventListener(`WeixinJSBridgeReady`, ready, false)
} else {
ready()
}
// 或者
wx.miniProgram.getEnv(function (res) {
console.log(res.miniprogram) // true
})
複製程式碼解決：1.將小程式標識拼在web-view的src屬性上
<web-view src="https://XXXX.com?isMiniProgram=1"></web-view>
複製程式碼第二個坑，微信瀏覽器和小程式會共用localStorage
微信瀏覽器內訪問的是正常的H5，小程式內訪問的是內嵌的webview下的H5，很多時候需要這倆個環境各有不同的資料快取，區分功能。
而微信在某次更新後就開始共用微信瀏覽器和小程式的storage了，也是哭哭啊。。。。
解決：如果只是一個頁面開啟的後續頁面間互相傳遞資料，那麼可以使用sessionStorage去臨時快取資料而不用localStorage。