Record wechat applet migration to Bytedance applet tram pit | August more text challenge

This period of time to the company to the micro channel small program migration to bytedance small program, here to record some pit, for later query

Wechat applet was produced several years earlier than Bytedance applet, so the development documents, development tools and basic library are relatively complete. Here is a record of the pit I stepped on hahaha.

1. File differences

Wechat applets Bytedance applet
Page structure .wxml .ttml
The page style .wxss .ttss
Scripting language .wxs .sjs

2. Component-api differences

Since some components or apis of wechat applets are not or not supported by Bytedance applets, it may be necessary to rewrite logic and components after converting to Bytedance applets.

3. Customize components

Style of 3.1.

The bytedance applet now does not support styles in the external style class app.ttss. The styles of the page where the component is located are not valid for custom components.

3.2. The observer

Observers do not support observers, and can only be written in properties.

// Wechat applets
Component({

  observers: { // Listen for changes to properties and data
    'numberA, numberB': function(numberA, numberB) {
      this.setData({
        sum: numberA + numberB
      })
    }
  }
  
  properties: {
    myProperty: {
      type: String.value: ' '.observer: function(newVal, oldVal) {
        // Execute when the property value changes}},myProperty2: String}})Copy the code
// Bytedance applet
Component({
  
  properties: {
    myProperty: {
      type: String.value: ' '.observer: function(newVal, oldVal) { // Can only be executed in properties
        // Execute when the property value changes}},myProperty2: String}})Copy the code

4. The API (request)

The bytedance applet uses request to pass data with type object, but the request is invalid. The data argument needs to be converted to a JSON string

// Wechat applets
wx.request({
  url: 'example.php'.data: {
    x: ' '.y: ' '
  },
  success (res) {
    console.log(res.data)
  }
})
Copy the code
// Bytedance applet
tt.request({
  url: 'example.php'.data: JSON.stringify({
    x: ' '.y: ' '
  }),
  success (res) {
    console.log(res.data)
  }
})
Copy the code

Summary (seeking attention)

Bytedance applet was released a few years later than wechat applet, but it will catch up with wechat applet. Thank you again for reading. I’m Han the Programming Monkey

Welcome to follow my official account: Class A Coder and get daily dry goods push.

Step pit to be continued ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~