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
  }