记录微信小程序迁移到字节跳动小程序踩坑｜ 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，得到平常干货推送。

踩坑篇未完待续~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~