微信小程序入门——一个简单的记事本

原创

dandelion1990

发布于 2024-01-18 00:30:08

3000

发布于 2024-01-18 00:30:08

文章被收录于专栏：dandelion1990的专栏

准备工作

注册一个邮箱
用邮箱和微信账号绑定一个小程序：微信公众平台
下载 Wechat Devtools
创建一个项目，模板选择 "TDesign - 组件库模板"

然后在这个模板的基础上开发，方便引用组件，后面不需要的页面和组件在删掉就行

项目结构

小程序官方文档 - 目录结构

项目配置文件

app.json：项目配置，包括页面列表、使用组件、导航栏、背景颜色等，详见小程序官方文档 - 全局配置
app.js：小程序逻辑入口
app.wxss：公共样式

新建页面

页面放在 pages 文件夹，在里面新建一个文件夹例如 pages/note

一个页面包含 4 个文件

note.json：页面配置，包括页面名称、使用组件、背景颜色等，详见小程序官方文档 - 页面配置
note.js：页面逻辑
note.wxml：页面结构
note.wxss：样式

页面设计

页面设计包括两个部分，上部分的笔记列表，使用 TDesign 的 collapse 组件组成，下部分为输入区域，由一个文本输入框和提交按钮组成，其中文本输入框用 textarea 组件，按钮用 button 组件。

官方组件文档见小程序官方文档 - 组件，TDesign 组件文档见TDesign - 组件概览

用户可以在文本框内输入文字，点击提交按钮后会将文件展示在上方列表，并清空文本框

代码

note.json 文件主要引入使用到的组件

{
  "usingComponents": {
    "t-collapse": "tdesign-miniprogram/collapse/collapse",
    "t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel",
    "t-textarea": "tdesign-miniprogram/textarea/textarea",
    "t-button": "tdesign-miniprogram/button/button"
  }
}

note.wxml 定义上述页面结构，其中的 t-textarea 通过 bind:change 绑定内容，按钮 t-button 通过 bind:tap 绑定点击动作

<view class="demo">
  <view class="demo-title">Note</view>
  <scroll-view 	scroll-y class="list-area">
    <view wx:for="{{notes}}" wx:key="index">
      <t-collapse>
        <t-collapse-panel header="{{item.header}}" value="{{item.isCollapsed}}" expandIcon>
          {{item.content}}
        </t-collapse-panel>
      </t-collapse>
    </view>
  </scroll-view>
  <view class="input-area">
    <view style="flex: 8;">
      <t-textarea t-class="textarea" placeholder="请输入文字" disableDefaultPadding="{{true}}" bind:change="onTextAreaChange" value="{{inputValue}}" />
    </view>
    <view style="flex: 2;">
      <t-button theme="primary" class="button" style="height: 100%" bind:tap="onSubmit">提交</t-button>
    </view>
  </view>
</view>

note.wxss 定义样式，其中 list-area 和 input-area 通过固定高度定位和实现 scroll-view 的滚动效果，而同一行的输入框和提交按钮通过 flex 布局

.list-area {
  width: 100%;
  height: 950rpx;
}
.input-area {
  display: flex;
  height: 100rpx;
  bottom:0;
  width:100%;
}
.textarea {
  height: 100%;
}
.button {
  margin: 0 16rpx;
  height: 1000%;
}

note.js 定义页面逻辑，输入内容后提取标题，创建新的 note 对象并加入 this.data.notes 列表中

const HEADER_MAX_LENGTH = 18

Page({
  data: {
    inputValue: "",
    notes: [],
    cnt: 0,
  },
  onTextAreaChange(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },
  onSubmit() {
    if (this.data.inputValue) {
      const cnt  = this.data.cnt + 1
      const note = {
        header: cnt + '. ' + this.data.inputValue.substring(0, HEADER_MAX_LENGTH),
        content: this.data.inputValue,
        isCollapsed: true
      } 
      this.setData({
        notes: [...this.data.notes, note],
        inputValue: '',
        cnt: cnt
      });
    }
  },
});

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序

登录后参与评论

0 条评论

热度