什么叫做底层思维,短视频的底层逻辑，抖音小程序开发入门

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

最近开始看都抖音小程序的文档，大家如果有兴趣可以查看官方文档，抖音开放平台传送门：
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>