微信小程序云开发模板源码 微信小程序云开发模板源码怎么用

小编 11-02 18

微信小程序云开发是一种微信官方提供的小程序开发模式,它提供了云函数、数据库、存储等后端服务,使用云开发,开发者无需自己搭建服务器,就可以轻松实现小程序的后端功能,下面是一个简单的微信小程序云开发模板源码,包括前端和云函数部分。

微信小程序云开发模板源码 微信小程序云开发模板源码怎么用

前端代码(index.wxml)

<view class="container">
  <view class="title">微信小程序云开发模板</view>
  <button bindtap="addData">添加数据</button>
  <view class="list">
    <block wx:for="{{dataList}}" wx:key="unique">
      <view class="item">{{item.content}}</view>
    </block>
  </view>
</view>

前端代码(index.wxss)

.container {
  padding: 20px;
}
.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.list {
  margin-top: 20px;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

前端代码(index.js)

Page({
  data: {
    dataList: []
  },
  onLoad: function () {
    this.getDatabaseData();
  },
  getDatabaseData: function () {
    const db = wx.cloud.database();
    db.collection('data').orderBy('createTime', 'desc').get({
      success: res => {
        this.setData({
          dataList: res.data
        });
      },
      fail: err => {
        console.error(err);
      }
    });
  },
  addData: function () {
    const db = wx.cloud.database();
    db.collection('data').add({
      data: {
        content: '这是一条新数据',
        createTime: new Date()
      },
      success: res => {
        console.log('添加成功', res);
        wx.showToast({
          title: '添加成功',
          icon: 'success'
        });
        this.getDatabaseData();
      },
      fail: err => {
        console.error(err);
      }
    });
  }
});

云函数代码(index.js)

// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init({
  // 云函数入口函数
  env: cloud.DYNAMIC_CURRENT_ENV
});
// 云函数入口函数
exports.main = async (event, context) => {
  const db = cloud.database();
  switch (event.action) {
    case 'addData':
      return await db.collection('data').add({
        data: {
          content: event.content,
          createTime: new Date()
        }
      });
    default:
      return { success: false, message: '无效的请求' };
  }
};

数据库集合规则(collection/data)

在微信小程序云开发数据库中创建一个名为data的集合,并设置其规则如下:

{
  "permission": {
    "read": true,
    "write": true
  },
  "fields": [
    {
      "field": "content",
      "type": "string"
    },
    {
      "field": "createTime",
      "type": "timestamp"
    }
  ]
}

这个模板包含了一个简单的数据列表页面,用户可以点击按钮添加数据到数据库,前端页面通过wx.cloud.database()访问云开发数据库,云函数用于处理添加数据的逻辑,数据库集合data包含contentcreateTime两个字段,分别用于存储数据内容和创建时间。

The End
微信