記錄微信小程序遷移到字節跳動小程序踩坑｜ 8月更文挑戰

記錄微信小程序遷移到字節跳動小程序踩坑｜ 8月更文挑戰

這段時間公司要把微信小程序遷移到字節跳動小程序,在這裏記錄下一些些坑,以備之後查詢

微信小程序要比字節跳動小程序早幾年出品，因此開發文檔、開發工具、基礎庫這些都是相對完善的。這裏就記錄下我本人踩過的坑了哈哈哈。

1. 文件差別

	微信小程序	字節跳動小程序
頁面結構	.wxml	.ttml
頁面樣式	.wxss	.ttss
腳本語言	.wxs	.sjs

2. 組件 & API 差別

由於微信小程序的某些組件或者 API 是字節跳動小程序沒有的或者不支持的，因此轉成字節跳動小程序後可能要從新編寫邏輯跟組件。

3. 自定義組件

3.1. 樣式

字節跳動小程序如今不支持外部樣式類 app.ttss 中的樣式、組件所在頁面的的樣式對自定義組件無效（小編使用的最新開發者工具v3.1.1以及基礎庫2.14.0在app.ttss中是能夠支持修改自定義組件的樣式的）

3.2. observer

字節跳動不支持 observers，只能寫在 properties 裏面。

// 微信小程序
Component({

  observers: { // 監聽 properties 和 data 的變化
    'numberA, numberB': function(numberA, numberB) {
      this.setData({
        sum: numberA + numberB
      })
    }
  }
  
  properties: {
    myProperty: {
      type: String,
      value: '',
      observer: function(newVal, oldVal) {
        // 屬性值變化時執行
      }
    },
    myProperty2: String
  }

})
複製代碼

// 字節跳動小程序
Component({
  
  properties: {
    myProperty: {
      type: String,
      value: '',
      observer: function(newVal, oldVal) { // 只能在 properties 執行
        // 屬性值變化時執行
      }
    },
    myProperty2: String
  }

})
複製代碼

4. API(request) 差別

字節跳動小程序使用 request 請求傳遞 data 參數類型爲 object 時，請求無效。須要把 data 參數 轉換爲 JSON 字符串

// 微信小程序
wx.request({
  url: 'example.php',
  data: {
    x: '',
    y: ''
  },
  success (res) {
    console.log(res.data)
  }
})
複製代碼

// 字節跳動小程序
tt.request({
  url: 'example.php',
  data: JSON.stringify({
    x: '',
    y: ''
  }),
  success (res) {
    console.log(res.data)
  }
})
複製代碼

總結（求關注）

字節跳動小程序雖然比微信小程序晚發佈幾年，但必定會追遇上微信小程序的。 最後再次感謝您的閱讀，我是程序猿憨憨

歡迎關注個人公衆號：A綱 Coder，得到平常乾貨推送。

踩坑篇未完待續~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~