小程序的一些總結：畫canvas和內嵌webview
發布時間：2019-01-03 08:58 所屬欄目：小程序開發教程
做了一些小程序項目，著重記錄一下小程序內嵌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。
