.
├── app.js                  # 小程序逻辑                   
├── app.json                # 小程序公共配置
├── app.ttss                # 小程序公共样式表
├── project.config.json     # 项目配置
└── pages                   # 页面
   └── pageA                # 页面 A
       ├── pageA.ttss       # 页面 A 样式表
       ├── pageA.js         # 页面 A 逻辑
       ├── pageA.json       # 页面 A 配置
       └── pageA.ttml       # 页面 A 结构

{ 
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "TikTok",
    "navigationBarTextStyle": "black"
  }
}

<view class="container">
  <view class="userinfo">
    <button tt:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
    <block tt:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

<view>{{ msg }}</view> 
<button bindtap="clickMe">点击我</button>

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

{
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "newFeature": true,
    "autoCompile": true
  },
  "appid": "testAppId",
  "projectname": "空白模板",
  "douyinProjectType": "native"
}

{
  "pages": ["pages/index/index"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Mini Program",
    "navigationBarTextStyle": "black"
  }
}

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Mini Program",
    "navigationBarTextStyle":"black"
}

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Todo Demo",
    "navigationBarTextStyle":"black"
}

page {
  flex: 1;
  display: flex;
  background: #E7E7E7;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: #FFF;
  border: none;
  width: 300rpx;
  font-size: 52rpx;
  color: #000000;
  height: 120rpx;
  color: #FFF;
  background-color: #FE2C55;
}

.add-button::after {
  border: none;
}

App({
  // todo list数组，如果storage没有缓存默认读取这个值
  todos: [
    {
      text: "学习 Javascript",
      completed: true,
    },
    {
      text: "学习 ES2016",
      completed: true,
    },
    {
      text: "学习 抖音小程序",
      completed: false,
    },
  ],


  userInfo: null,


  /**
   * @description: 调用tt.getUserProfile获取用户信息，返回一个Promise对象
   * @return {Promise}
   */
  getUserProfile() {
    return new Promise((resolve, reject) => {
      if (this.userInfo) {
        resolve(this.userInfo);
        return;
      }
      tt.getUserProfile({
        success: (res) => {
          console.log(res);
          this.userInfo = res.userInfo;
          resolve(this.userInfo);
        },
        fail: (err) => {
          reject(err);
        },
      });
    });
  },
  onLaunch() {
    try {
      const storage = tt.getStorageSync("todos");
      if (Array.isArray(storage)) {
        this.todos = storage;
      }
    } catch (err) {
      console.log(err);
    }
  },
});

App({
  onLaunch() {
    try {
      const storage = tt.getStorageSync("todos");
      if (Array.isArray(storage)) {
        this.todos = storage;
      }
    } catch (err) {
      console.log(err);
    }
  },
});

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
    })
  },

<view class="page-todos">


  <view class="user">
    <view class="nickname">{{user.nickName && user.nickName + '的' || '我的'}}记事本</view>
    <button tt:if="{{!user}}" class="login-btn" bindtap="getUserProfile">登录</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 color="#FE2C55" class="todo-item-checkbox" value="{{item.text}}" checked="{{item.completed}}" />
        <text class="todo-item-text">{{item.text}}</text>
        <image class="delete" catchtap="deleteItem" data-index="{{index}}" src="../../assets/delete.svg"></image>
      </label>
    </checkbox-group>

  </view>
  <view class="todo-footer">
    <button class="add-button" hover-class="none" bindtap="addTodo">
      <image src="../../assets/add.svg" style="width: 52rpx; height: 52rpx"></image>
    </button>
  </view>

</view>

.page-todos {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100vh;
}

.login-btn {
  margin-top: 40rpx;
  background-color: #FE2C55;
  color: #FFFFFF;
}

.login-btn::after {
  border: none;
}

.user {
  display: flex;
  flex-shrink: 0;
  padding: 30px;
  color: #FFF;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  background-color: #FFF;
  align-self: center;
  margin-top: 40rpx;
}

.nickname {
  /* padding-top: 40rpx; */
  text-align: center;
  font-size: 40rpx;
  font-weight: 100;
  color: #000000;
}

.todo-items {
  flex-grow: 1;
  font-size: 34rpx;
  padding: 50rpx 60rpx;
  /* color: #000000; */
  overflow: auto;
}

.todo-items-group {
  display: flex;
  flex-direction: column;
}

.todo-item {
  position: relative;
  margin-bottom: 38rpx;
  height: 104rpx;
  background-color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.2s;
  display: flex;
  align-items: center;
  font-size: 30rpx;
}

.todo-item:last-child {
  margin-bottom: 0;
}

.todo-item-checkbox {
  /* display: none; */
  margin-left: 32rpx;
  margin-right: 24rpx;
}

.checked .todo-item-text {
  text-decoration: line-through;
  font-size: 30rpx;
}

.checked.todo-item::after {
  opacity: 1;
}

.todo-footer {
  flex-shrink: 0;
  padding: 50rpx 0 100rpx;
  font-size: 48rpx;
  font-weight: 200;
  text-align: center;
}

.todo-item .delete {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  height: 30rpx;
  width: 30rpx;
}

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

.user {
  display: flex;
  flex-shrink: 0;
  padding: 30px;
  color: #fff;
  flex-direction: column;
  align-items: center;
}

// 获取全局 app 实例
const app = getApp();

Page({
  // 声明页面数据
  data: {
    todos: [],
  },
  // 监听生命周期回调 onLoad
  onLoad() {},
  // 监听生命周期回调 onShow
  onShow() {
    // 设置全局数据到当前页面数据
    this.setData({ todos: app.todos });
  },
  // 事件处理函数
  toggleState(e) {
    // 修改全局数据
    const { index } = e.currentTarget.dataset;
    app.todos[index].completed = !app.todos[index].completed;
    this.setData({ todos: app.todos });
    tt.setStorage({
      key: "todos",
      data: app.todos,
    });
  },

  /**
   * @description: 获取用户数据
   * @return {Promise<void>}
   */
  async getUserProfile() {
    try {
      const user = await app.getUserProfile();

      this.setData({
        user,
      });
    } catch (err) {
      console.error(err);
    }
  },

  /**
   * @description: 跳转到添加待办项的页面
   * @return {void}
   */
  addTodo() {
    // 进行页面跳转
    tt.navigateTo({ url: "../add-todo/add-todo" });
  },

  /**
   * @description: 删除一个待办项
   * @param {*} e 点击事件
   * @return {void}
   */
  deleteItem(e) {
    // 获取删除待办项的index索引
    const { index } = e.currentTarget.dataset;
    // 从app.todos中删除index索引对应的item
    app.todos.splice(index, 1);
    // 调用setData重新设置todos
    this.setData({ todos: app.todos });
    // 设置缓存
    tt.setStorage({
      key: "todos",
      data: app.todos,
    });
  },
});

data: {},

onLoad() {
  },

onShow() {
    // 设置全局数据到当前页面数据
    this.setData({ todos: app.todos });
  },

toggleState(e) {
    // 修改全局数据
    const {index} = e.currentTarget.dataset;
    app.todos[index].completed = !app.todos[index].completed;
    this.setData({ todos: app.todos });
    tt.setStorage({
      key: 'todos',
      data: app.todos,
    });
  },

async getUserProfile() {
    // 获取用户信息并存储数据
    try {
      const user = await app.getUserProfile();

      this.setData({
        user,
      });
    } catch(err) {
      console.error(err);
    }
  },

addTodo() {
    // 进行页面跳转
    tt.navigateTo({ url: "../add-todo/add-todo" });
  },

deleteItem(e) {
    // 获取删除待办项的index索引
    const { index } = e.currentTarget.dataset;
    // 从app.todos中删除index索引对应的item
    app.todos.splice(index, 1);
    // 调用setData重新设置todos
    this.setData({ todos: app.todos });
    // 设置缓存
    tt.setStorage({
      key: 'todos',
      data: app.todos,
    });
  },

<view class="page-add-todo">
  <view class="add-todo">
    <input
      class="add-todo-input"
      placeholder="添加待办项"
      onBlur="onBlur"
      value="{{inputValue}}"
    />
  </view>

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

.page-add-todo {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.add-todo {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add-todo-input {
  display: block;
  font-size: 50rpx;
  font-weight: 100;
  padding: 5px 5px;
  background: none;
  border: none;
  border-bottom: 1px solid #dfdfdf;
  color: #0effd6;
  width: 100%;
}

.todo-footer {
  padding: 50rpx 0 100rpx;
  font-size: 48rpx;
  font-weight: 200;
  text-align: center;
}

<view class="add-todo">
  <input
    class="add-todo-input"
    placeholder="添加待办项"
    onBlur="onBlur"
    value="{{inputValue}}"
  />
</view>

.add-todo {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

const app = getApp();

Page({
  data: {
    inputValue: "",
  },

  /**
   * @description: input输入框失焦回调
   * @param {*} e 回调事件
   * @return {void}
   */
  onBlur(e) {
    // 设置输入框中的输入值
    this.setData({
      inputValue: e.detail.value,
    });
  },

  /**
   * @description: 把输入框中的值插入app.todos，同时设置缓存
   * @return {void}
   */
  add() {
    app.todos.push({
      text: this.data.inputValue,
      compeleted: false,
    });
    tt.setStorage({
      key: "todos",
      data: app.todos,
    });

    // 添加完毕，返回上一页
    tt.navigateBack();
  },
});

data: {
    inputValue: '',
  },

onBlur(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },

add() {
    app.todos.push({
      text: this.data.inputValue,
      compeleted: false,
    });
    tt.setStorage({
      key: "todos",
      data: app.todos,
    });

    // 添加完毕，返回上一页
    tt.navigateBack();
  },