Taro 小程序 踩坑记录

• taro2.x、3.x不支持commonJS写法（自测3.0.16版本以上支持），类似于下面这种写法，渲染不出来图片

  <Image src={require('../../images/icon.png')} />  // require commonJS写法

  可参考：https://blog.csdn.net/qq_44114279/article/details/107359920

•  运行时使用yarn dev:weapp，当生成的包大小大于2048kb时真机无法预览或者调试，建议运行命令为NODE_ENV=production taro build --type weapp --watch （ NODE_ENV 为 production 可以开启压缩）

• 如果你的设计稿不是750、640、828三种尺寸之一（假如设计稿尺寸为375），config/index.js文件下的designWidth要配置为375，同时要在DEVICE_RATIO中添加换算规则，官方文档提供的是2/1（taro 3.x 1/2正常）

• 如果你的设计稿尺寸不是750、640、828三种尺寸之一（假如设计稿尺寸为375），但是组件库taro-ui的使用的尺寸是750，此时使用taro-ui里的组件，显示的效果是不对的，解决办法安装postcss-px-scale插件，并在config/index.js中配置

   

  {
  mini: {
   postcss: {
    "postcss-px-scale": {
      "enable": true,
      "config": {
        "scale": 0.5, // 缩放为 375/750
        "units": "rpx",
        "includes": ["taro-ui"]
      }
    },
    ......
  

   

•  已经发布的小程序调试打开方法：体验版或者开发版打开调试，再进入发布版小程序就好，或者通过代码打开关闭调试开关

  // 打开调试
  Taro.setEnableDebug({
  enableDebug: true
  })
  // 关闭调试
  Taro.setEnableDebug({
  enableDebug: false
  })
  

   

•  webview网页跳小程序传值不建议使用.postMessage（向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件）

        具体使用 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

• Taro.showToast添加image属性时，图片不显示bug，原因是Taro.showToast中引用了图片，但该图片无法被打包到微信小程序中，解决方法是在文件config/index.js里进行下面处理

  copy: {
      patterns: [
          { from: 'src/imgs/', to: 'dist/imgs' } // 指定需要copy的文件
      ]
  }
  // 使用时image路径
  Taro.showToast({
    title: '上传成功',
    image: '/imgs/success.png',
    duration: 2000
  })
  

   

• VirtualList 在3.0.5 ios上滑动时抖动严重，版本升级到3.0.17 正常

• 自定义分享朋友或者朋友圈时（图片、标题、路径），onShareAppMessage 和 onShareTimeline这两个处理函数必须跟生命周期函数同级（属于兄弟关系），且必须在页面（page）里定义，不可以定义在组件中，同时在根目录下的global.d.ts文件下定义页面配置，增加以下代码

  declare module '@tarojs/taro' {
    interface PageConfig {
      /**
       * 是否启用分享给好友。
       *
       * @default false
       */
      enableShareAppMessage?: boolean
      /**
       * 是否启用分享到朋友圈。
       *
       * @default false
       */
      enableShareTimeline?: boolean
    }
  }
  

  在需要转发的配置页面增加

  export default {
    enableShareAppMessage: true,
    enableShareTimeline: true
  }