How to use a small WeChat notepad program from scratch (1)

1. taBar

First, design the tabar at the bottom, which is the navigation bar at the bottom. WeChat’s tabar page supports up to five, and only three are needed here. They are homepage, + (add new record), and group.

Probably the following

need to add tabar to app.json

//运行请去掉注释
"tabBar": {
    
    
    "backgroundColor": "#ffffff", //背景色
    "selectedColor": "#fec22d", //字体选中颜色
    "list": [
      {
    
    
        "pagePath": "pages/index/index", //页面路径
        "text": "首页", //名称
        "iconPath": "/images/note.png", //未选中icon样式
        "selectedIconPath": "/images/noted.png" //选中icon样式
      }, //第一个页面
      {
    
    
        "pagePath": "pages/addnote/addnote",
        "text": "",
        "iconPath": "/images/add.png",
        "selectedIconPath": "/images/add.png"
      }, // 第二个页面
      {
    
    
        "pagePath": "pages/files/files",
        "text": "分组",
        "iconPath": "/images/file.png",
        "selectedIconPath": "/images/filed.png"
      } //第三个页面
    ]
  },

2. Homepage design

The home page should arrange all the records vertically, showing the title, group ID, modification time (or creation time), and summary of the record. It should also allow free choice to sort by creation time or modification time

It looks like this:

3. Finally

Ah, I forgot to add the time. The date should be displayed below the summary. Looking back, it is probably like the demo, which is a bit Eligent.

Guess you like

Origin blog.csdn.net/Bob_ganxin/article/details/114276229