微信小程序开发中遇到的坑及解决办法

Posted 2023-03-09

参考技术A taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1.x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

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>