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

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

微信小程序要比字節跳動小程序早幾年出品，所以開發文檔、開發工具、基礎庫這些都是相對完善的。愛掏網 - it200.com這里就記錄下我本人踩過的坑了哈哈哈。愛掏網 - it200.com

1. 文件差異

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

2. 組件 & API 差異

因為微信小程序的某些組件或者 API 是字節跳動小程序沒有的或者不支持的，所以轉成字節跳動小程序后可能要重新編寫邏輯跟組件。愛掏網 - it200.com

3. 自定義組件

3.1. 樣式

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

3.2. observer

字節跳動不支持 observers，只能寫在 properties 里面。愛掏網 - it200.com

// 微信小程序
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 時，請求無效。愛掏網 - it200.com需要把 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)
  }
})

總結（求關注）

字節跳動小程序雖然比微信小程序晚發布幾年，但一定會追趕上微信小程序的。愛掏網 - it200.com 最后再次感謝您的閱讀，我是程序猿憨憨

歡迎關注我的公眾號：A綱 Coder，獲得日常干貨推送。愛掏網 - it200.com

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