uniapp 记事本代码

uni-app 是一个跨平台的框架，可以一次编写代码，同时发布到多个平台，包括iOS、Android、H5等。下面是一个简单的 uni-app 记事本代码示例：

<template>
  <view class="container">
    <view class="header">
      <input v-model="newNote" placeholder="请输入笔记" />
      <button @click="addNote">添加</button>
    </view>
    <view class="note-list">
      <view v-for="(note, index) in notes" :key="index" class="note-item">
        <text>{{ note }}</text>
        <button @click="deleteNote(index)">删除</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newNote: '',
      notes: []
    };
  },
  methods: {
    addNote() {
      if (this.newNote) {
        this.notes.push(this.newNote);
        this.newNote = '';
      } else {
        uni.showToast({
          title: '请先输入笔记内容',
          duration: 2000
        });
      }
    },
    deleteNote(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除吗？',
        success: (res) => {
          if (res.confirm) {
            this.notes.splice(index, 1);
          }
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.note-list {
  text-align: left;
}
.note-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
</style>

以上代码实现了一个简单的记事本功能，包括添加笔记和删除笔记的功能。通过 uni-app 的跨平台特性，可以轻松地将这个记事本应用发布到多个平台上，让用户在不同设备上都能方便地记录和管理笔记。