写一个微信小程序记事本
时间: 2023-07-01 07:05:20 浏览: 310
基于uniapp、uviewUI、colorUI实现的记事本,适用于微信小程序。后端基于node.js,已放置在云服务器上。
5星 · 资源好评率100%
好的,下面是一个简单的微信小程序记事本的实现步骤:
1. 在微信开发者工具中创建一个新的小程序项目。
2. 在 app.json 中配置页面,创建两个页面,一个是首页,一个是笔记详情页。
3. 在首页中使用 wx.request() 方法获取所有笔记列表,并渲染到页面中,同时提供添加笔记按钮。
4. 点击添加笔记按钮,跳转到笔记详情页。
5. 在笔记详情页中,用户可以编辑笔记内容,并保存到本地缓存中。
6. 返回首页时,重新获取所有笔记列表并渲染到页面中。
具体的代码实现请参考以下示例:
app.json:
```json
{
"pages": [
"pages/index/index",
"pages/note/note"
],
"window": {
"navigationBarTitleText": "记事本",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
```
index.wxml:
```html
<view class="container">
<view class="list">
<block wx:for="{{notes}}" wx:key="{{item.id}}">
<navigator url="/pages/note/note?id={{item.id}}">
<view class="item">{{item.title}}</view>
</navigator>
</block>
</view>
<button class="add-btn" bindtap="addNote">添加笔记</button>
</view>
```
index.js:
```javascript
Page({
data: {
notes: []
},
onLoad: function (options) {
this.getNotes()
},
getNotes: function () {
var notes = wx.getStorageSync('notes') || []
this.setData({ notes: notes })
},
addNote: function () {
wx.navigateTo({
url: '/pages/note/note'
})
}
})
```
note.wxml:
```html
<view class="container">
<textarea class="textarea" value="{{content}}" bindinput="onInput"></textarea>
<button class="save-btn" bindtap="saveNote">保存</button>
</view>
```
note.js:
```javascript
Page({
data: {
id: '',
content: ''
},
onLoad: function (options) {
if (options.id) {
this.setData({ id: options.id })
this.loadNote()
}
},
loadNote: function () {
var notes = wx.getStorageSync('notes') || []
var note = notes.find(note => note.id === this.data.id)
if (note) {
this.setData({ content: note.content })
}
},
onInput: function (e) {
this.setData({ content: e.detail.value })
},
saveNote: function () {
var notes = wx.getStorageSync('notes') || []
var note = notes.find(note => note.id === this.data.id)
if (note) {
note.content = this.data.content
} else {
var id = Date.now().toString()
notes.push({ id: id, title: '笔记' + id.slice(-6), content: this.data.content })
}
wx.setStorageSync('notes', notes)
wx.navigateBack()
}
})
```
以上代码实现了一个简单的微信小程序记事本,用户可以在首页中查看所有笔记,并添加新的笔记。点击某个笔记可以进入笔记详情页进行编辑,并保存到本地缓存中。
阅读全文