微信小程序云开发模板源码 微信小程序云开发模板源码怎么用
微信小程序云开发是一种微信官方提供的小程序开发模式,它提供了云函数、数据库、存储等后端服务,使用云开发,开发者无需自己搭建服务器,就可以轻松实现小程序的后端功能,下面是一个简单的微信小程序云开发模板源码,包括前端和云函数部分。
前端代码(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
包含content
和createTime
两个字段,分别用于存储数据内容和创建时间。
The End
还没有评论,来说两句吧...