从零开始写微信小程序--写一个备忘录【二】

最新推荐文章于 2025-12-05 15:09:40 发布

原创最新推荐文章于 2025-12-05 15:09:40 发布 · 3.4k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序

本文介绍如何从零开始构建一个微信小程序备忘录应用。主要包括：主页面展示备忘录记录，右下角有新建按钮，底部有TabBar实现页面切换。新建笔记页面包含输入框和编辑/删除功能。在代码实现上，涉及cells组件的引入，WXML布局，JS文件读取缓存数据，以及在app.json中配置TabBar。

接着上次的文章，开始这个项目需要简单构思一下有什么页面，每个页面有些什么。这个小程序是这样的：

主页面有一条条的备忘录记录，右下角有个新建笔记的按钮，主界面下方有toBar，可以进行页面的切换。

进入新建笔记的页面后有一个输入框，上方有个Editor的按钮，点击可以隐藏或者显示。右上方有个删除的按钮，可以删除该条笔记。

第一步是首页的代码，因为是使用cells组件，我们需要引入index.json中引入组件。

{
  "usingComponents": {
        "mp-slideview": "/components/slideview/slideview",
        "mp-cells": "/components/cells/cells",
        "mp-cell": "/components/cell/cell"
  }
}

然后在wxml中使用

<!--index.wxml-->
<view class="wrapper">
 <mp-cells ext-class="my-cells" title="备忘录">
    <mp-slideview  wx:for="{{noteList}}" wx:key="{{index}}" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap" data-id="{{item.id}}">
        <mp-cell data-id="{{item.id}}" bindtap="toNote" value="{{item.title}}" footer="{{item.time}}"></mp-cell>
    </mp-slideview>
</mp-cells>
  <view>
    <navigator url="/pages/note/editor" class="navigator">
    <button class="add-note">
      <image class="add-note-img" bindtap="addNote" src="/images/add-note.png"></image>
    </button>
    </navigator>
  </view>
</view>

最后是index.js文件，主要是在页面加载后读取缓存中的备忘录信息。

// pages/home/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    'noteList': []
  },

  slideButtonTap(e) {
    console.log(e.detail)
  },
  toNote(e) {
    let id = e.currentTarget.dataset['id'];
    wx.navigateTo({
      url: '/pages/note/editor?id=' + id
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    /**读取缓存 */
    var that = this;
    wx.getStorage({
      key: 'noteList',
      success(res) {
        that.setData({
          "noteList": res.data
        })
      }
    })
  }
})

最后，在app.json中添加一个ToBar，作为主页和关于页的导航。

 "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/index",
        "iconPath": "images/tabbar/note1.png",
        "selectedIconPath": "images/tabbar/note2.png",
        "text": "笔记"
      },
      {
        "pagePath": "pages/about/index",
        "iconPath": "images/tabbar/about1.png",
        "selectedIconPath": "images/tabbar/about2.png",
        "text": "关于"
      }
    ]
  },

本篇结束。