一个微信小程序表白功能的简化代码示例

前路.漫漫.

已于 2025-01-08 15:58:50 修改

阅读量929

点赞数 4

文章标签：微信小程序小程序

于 2025-01-08 15:53:47 首次发布

本文链接：https://blog.csdn.net/abcdefgdjdjdj/article/details/145011221

版权

这个示例将包括表白墙和我的表白两个主要功能模块。由于微信小程序的开发涉及前端页面、逻辑处理以及后端数据存储等多个方面,这里主要展示前端页面和逻辑处理的部分代码,后端数据存储部分将使用微信云开发进行简化处理.

一、项目结构

        project
        ├── pages
        │ ├── index
        │ │ ├── index.js
        │ │ ├── index.json
        │ │ ├── index.wxml
        │ │ └── index.wxss
        │ └── myConfessions
        │ ├── myConfessions.js
        │ ├── myConfessions.json
        │ ├── myConfessions.wxml
        │ └── myConfessions.wxss
        ├── app.js
        ├── app.json
        ├── app.wxss
        └── utils
          └── util.js

二、代码示例

1. app.js

App({
  onLaunch: function () {
    // 小程序启动时执行的代码
    console.log('小程序启动');
  },
  globalData: {
    // 全局数据
    userInfo: null,
    confessions: []
  }
});

2. pages/index/index.js (表白墙页面逻辑)

Page({
  data: {
    confessions: [], // 存储表白内容
    inputContent: '' // 输入框内容
  },
  onLoad: function() {
    this.getConfessions();
  },
  // 获取表白内容
  getConfessions: function() {
    const db = wx.cloud.database();
    db.collection('confessions').get({
      success: res => {
        this.setData({
          confessions: res.data
        });
      },
      fail: err => {
        console.error(err);
      }
    });
  },
  // 提交表白内容
  submitConfession: function() {
    const db = wx.cloud.database();
    db.collection('confessions').add({
      data: {
        content: this.data.inputContent,
        createTime: db.serverDate(),
        likeCount: 0,
        comments: []
      },
      success: res => {
        this.getConfessions();
        this.setData({
          inputContent: ''
        });
        wx.showToast({
          title: '提交成功',
          icon: 'success'
        });
      },
      fail: err => {
        console.error(err);
      }
    });
  },
  // 输入框内容变化
  inputChange: function(e) {
    this.setData({
      inputContent: e.detail.value
    });
  }
});