• 最近因公司需要，開發抖音的小程式。下面我總結一下我自己的一些體會，會隨時更新。
• 位元組跳動小程式官方文件 https://microapp.bytedance.com/homepage
• 可在抖音最上方的搜尋頁面，通過掃一掃掃描之後進入小程式

1. 抖音小程式編輯器（位元組跳動開發者工具）

編輯器功能尚不完善，沒有搜尋功能；
編譯過程較慢；    
至今不知道怎麼查詢小程式的ID，我用的都是別人幫忙找的；

位元組跳動開發者工具檔案的字尾是.ttml，如果直接把微信小程式搬過來也可以用，但是還是建議將字尾名
更改為正確的格式

2. 相容方面：

1. 抖音小程式對自定義頂部導航的相容性不是很好；
    案例：之前開發小程式，需要隱藏系統自帶頂部導航，自定義導航樣式（這個功能在我的部落格中有詳解），
    但是在安卓上不會將最頂部的手機資訊隱藏掉，所以頂部導航會向下排布，IOS上沒有這個問題；
    所以建議還是用系統自帶的頂部導航吧；
    對iPhoneX的底部橫線的相容是沒有問題的；

2. 抖音小程式的 ‘swiper’ 元件設定前後邊距樣式（previous-margin/next-margin），需將單位改為px

3. 小程式的video元件層級最高，且無法覆蓋，編輯器沒有問題，但是在手機上會有問題，所以慎用video元件

 

• 以下是抖音小程式功能元件：

資料繫結

<view> {{message}} </view>
// page.js
Page({
  data: {
    message: ‘Hello World!‘
  }
})
### 列表渲染

<!--ttml-->
<view tt:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
<!--ttml-->

條件渲染

<!--ttml-->
<view tt:if="{{view == ‘A‘}}"> A </view>
<view tt:elif="{{view == ‘B‘}}"> B </view>
<view tt:else="{{view == ‘C‘}}"> C </view>
// page.js
Page({
  data: {
    view: ‘A‘
  }
})
 

模板

<!--ttml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: ‘大林‘, lastName: ‘斯‘},
    staffB: {firstName: ‘吉爾‘, lastName: ‘丘‘},
    staffC: {firstName: ‘福‘, lastName: ‘羅思‘}
  }
})

 

事件

<!--ttml-->
<view bindtap="add"> {{count}} </view>
// page.js
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})