抖音小程序不对个人开发者开放，实在可惜，不过这不妨碍我们来学习它的设计思想！

最近开始看都抖音小程序的文档，大家如果有兴趣可以查看官方文档，抖音开放平台传送门：https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/quick-start/overview

运行环境

抖音小程序运行在小程序 SDK 上，但是由于 SDK 嵌入的宿主不同，小程序 SDK 提供的能力集合可能会根据宿主的不同而变化。

• 在 iOS 中，小程序的逻辑层 JavaScript 代码运行在 JavaScriptCore 中，视图层由 WKWebView 进行渲染。
• 在 Android 中，小程序的逻辑层 JavaScript 代码运行在 V8 中，视图层由 Mobile Chrome 进行渲染。

由于小程序在不同的操作系统/宿主下，能力与样式的支持并不完全相同，所以在开发者工具中完成开发之后，需要在不同环境下对自己的小程序进行验证，验证无问题后再上传。

下面让我们来看下它的基本代码

文件结构

• 全局配置文件 todos .json
• 全局样式文件 todos .ttss
• 逻辑文件 todos .js
• 页面结构 todos.ttml

以下摘录一些代码

todos.ttss

...
.todo-item {
  position: relative;
  margin-bottom: 50rpx;
  padding-left: 80rpx;
  line-height: 70rpx;
  height: 80rpx;
  box-sizing: border-box;
  border: 2px solid rgb(14, 255, 214);
  border-radius: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space:nowrap; */

  transition: border 0.2s;
}
...

todos.js

const app = getApp()

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },

  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },

todos.ttml

<view class="page-todos">
  <view class="user">
    <view class="nickname"
      >{{user.nickName && user.nickName + '的' || '我的'}}记事本</view
    >
    <button tt:if="{{!user}}" class="login-btn" bindtap="getUserInfo">
      登录
    </button>
    <image
      tt:else
      class="avatar"
      src="{{user.avatarUrl || '../../assets/logo.svg'}}"
      background-size="cover"
    ></image>
  </view>

  <view class="todo-items">
    <checkbox-group class="todo-items-group">
      <label
        data-index="{{index}}"
        bindtap="toggleState"
        tt:for="{{todos}}"
        tt:for-item="item"
        class="todo-item {{item.completed ? 'checked' : ''}}"
        tt:key="{{index}}"
      >
        <checkbox
          class="todo-item-checkbox"
          value="{{item.text}}"
          checked="{{item.completed}}"
        />
        <text class="todo-item-text">{{item.text}}</text>
        <view class="delete" catchtap="deleteItem" data-index="{{index}}"
          >×</view
        >
      </label>
    </checkbox-group>
  </view>

  <view class="todo-footer">
    <button class="add-button" hover-class="none" bindtap="addTodo">
      <text class="add-icon">+</text>
    </button>
  </view>
</view>

总结

从上面可以看出，抖音小程序的设计思维基于很普世化MVVM思想，也就的语法标签无需开发者过多的学习成本，对于微信小程序等开发者来说非常友好。