设计记事本微信小程序代码

好的，下面是一个简单的记事本微信小程序代码：

1. 首先，在 app.json 中配置页面路径：

{
  "pages": [
    "pages/index/index",
    "pages/edit/edit"
  ],
  "window": {
    "navigationBarTitleText": "记事本"
  }
}

2. 在 index 页面中显示所有的记事本条目，并添加一个“添加”按钮：

<view class="container">
  <view class="list">
    <view class="list-item" wx:for="{{notes}}" wx:key="{{index}}" bindtap="onNoteTap">
      <view class="list-item-title">{{item.title}}</view>
      <view class="list-item-time">{{item.time}}</view>
    </view>
  </view>
  <view class="add-btn" bindtap="onAddTap">添加</view>
</view>

3. 在 index 页面中，定义一个 notes 数组，并从本地存储中读取所有的记事本条目：

Page({
  data: {
    notes: []
  },
  onLoad: function () {
    var notes = wx.getStorageSync('notes') || []
    this.setData({
      notes: notes
    })
  },
  onAddTap: function () {
    wx.navigateTo({
      url: '/pages/edit/edit'
    })
  },
  onNoteTap: function (event) {
    var index = event.currentTarget.dataset.index
    wx.navigateTo({
      url: '/pages/edit/edit?index=' + index
    })
  }
})

4. 在 edit 页面中，显示一个文本框和一个保存按钮：

<view class="container">
  <textarea class="input" placeholder="请输入内容" value="{{note.content}}" bindinput="onInput"></textarea>
  <view class="save-btn" bindtap="onSaveTap">保存</view>
</view>

5. 在 edit 页面中，定义一个 note 对象，并根据传入的 index 参数从 notes 数组中获取对应的记事本条目：

Page({
  data: {
    note: {}
  },
  onLoad: function (options) {
    var index = options.index
    var notes = wx.getStorageSync('notes') || []
    var note = index === undefined ? { content: '' } : notes[index]
    this.setData({
      note: note
    })
  },
  onInput: function (event) {
    var value = event.detail.value
    this.setData({
      'note.content': value
    })
  },
  onSaveTap: function () {
    var note = this.data.note
    note.time = new Date().toLocaleString()
    var notes = wx.getStorageSync('notes') || []
    if (note.id === undefined) {
      note.id = notes.length
      notes.push(note)
    } else {
      notes[note.id] = note
    }
    wx.setStorageSync('notes', notes)
    wx.navigateBack()
  }
})

6. 在 app.wxss 中定义样式：

.container {
  padding: 20rpx;
}
.list {
  margin-bottom: 20rpx;
}
.list-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.list-item-title {
  font-size: 32rpx;
}
.list-item-time {
  color: #999;
  font-size: 24rpx;
}
.add-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80rpx;
  background-color: #4caf50;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
}
.input {
  width: 100%;
  height: 600rpx;
  font-size: 32rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
}
.save-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80rpx;
  background-color: #4caf50;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
}

以上是一个简单的记事本微信小程序代码，希望能帮助到你。