❶ 微信小程序開發中遇到的坑及解決辦法
taro單獨為某個項目切換taro版本環境
單獨為某一個項目升級#這樣做的好處是全局的 Taro 版本還是 1.x 的,多個項目間的依賴不沖突,其餘項目依然可以用舊版本開發。 如果你的項目里沒有安裝 Taro CLI,你需要先裝一個:
# 如果你使用 NPM
$ npm install --save-dev @tarojs/[email protected]
# 如果你使用 Yarn
$ yarn add -D @tarojs/[email protected]
echarts在小程序中滑動卡頓
由於微信小程序中,echarts的層級最高,無論設置多大層級也無法遮住echarts。而且小程序中好像只能用echarts吧。所以為了解決這個bug,我只能委屈求全了。打開ec-canvas.wxml文件,將touchStart、touchMove和touchEnd去掉了,直接刪除就好啦。這三個事件應該是做縮放的吧,我們也沒有這個縮放的需求。所以就去掉了。雖然暫時滿足的需求,還是沒有真正的解決問題。
原:
bindinit="init"
bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"
bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"
bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"
現:
bindinit="init"
echarts在小程序中無法跟隨頁面滑動
在卡頓問題中能與echarts交互少的,可以直接使用圖片代替cannvas,即在echarts渲染完畢後將它替換為一張圖片。
如果我更新了數據,那麼就重新放出echarts,等它渲染完畢後,再次替換為一張圖片。
chart.on('finished', () => {
getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({
success: res => {
console.log('res.tempFilePath====',res.tempFilePath)
this.setState({
echartImgSrc: res.tempFilePath
})
},
fail: res =>console.log('轉換圖片失敗', res)
});
})
render:
this.state.echartImgSrc =='' ?
ref={this.refChart}
id={this.state.id}
canvas-id="mychart-area"
force-use-old-canvas="true"
ec={this.state.ec}
/>
:
<CoverImage src={this.state.echartImgSrc}></CoverImage>