熊掌小程序开荒记 02|正式上手敲代码!真正实现数据增删改查
- 2026-09-25 00:55:20
熊掌小程序开荒记 02|正式上手敲代码!真正实现数据增删改查大家好，欢迎回到熊掌小程序开荒记第 02 篇！ 上一篇我们完成全部前置准备：在微信公众平台注册小程序账号、拿到 AppID、安装开发者工具，成功初始化空白项目。相信不少小伙伴已经搭建好开发环境，等着正式敲代码实战。 很多新手装好开发工具之后，盯着一堆文件无从下手，不知道怎么写页面、怎么存储数据。这一期我们跳过枯燥理论，直接实操：编写首页布局、开通云开发、搭建数据库，最终完成基础的数据增删改查，做出第一个可以正常运行的小程序功能。 打开我们上一期创建好的小程序项目，找到首页核心文件index.wxml和index.wxss。 保存文件，模拟器立刻实时预览效果，你就能看到简易页面和四个功能按钮。 很多同学纠结服务器、后端怎么搭建个人开发者优先选择微信云开发 TCB，无需购买服务器、不用配置域名，开箱即用。 打开index.js，在页面生命周期 onLoad 上方编写数据库操作方法，替换代码： 保存代码，点击模拟器上的按钮测试。点击新增，刷新云开发数据库集合，就能看到我们通过前端写入的数据！到这里，你已经完成小程序最核心的前后端交互。 有不少新手分不清前端页面和数据库如何联动，其实逻辑很简单：页面负责展示与接收用户点击，云开发充当后端，负责数据存储。 下一篇开荒记，我们优化页面展示，把数据库获取到的数据渲染到页面列表，并且封装通用函数，优化代码结构。 如果你跟着操作遇到云开发报错、权限不足、代码运行失败等问题，直接评论区留言，我逐一解答。收藏文章方便实操查阅，转发给一同学习小程序开发的伙伴，我们持续实战！ #小程序开发#微信云开发#零基础小程序实战#编程实训
第一步：首页页面布局，吃透 WXML + WXSS 基础语法
简单回顾一下哈：
WXML：页面结构，相当于网页 HTML，负责摆放文字、按钮、容器等；
WXSS：页面样式，相当于网页 CSS，控制颜色、间距、排版等。
1. 编写基础页面结构 index.wxml
<!--index.wxml --><viewclass="container"><viewclass="title">我的首个小程序页面</view><viewclass="content"><text>云开发数据演示</text></view><buttonbindtap="addData">新增数据</button><buttonbindtap="queryData">查询数据</button><buttonbindtap="updateData">修改数据</button><buttonbindtap="delData">删除数据</button></view>
2. 添加页面样式 index.wxss
/*index.wxss*/.container{padding:30rpx;}.title{font-size:36rpx;font-weight:bold;text-align:center;margin:40rpx 0;}button{margin:20rpx 0;}
💡新手小贴士：小程序统一使用 rpx 单位自适应手机屏幕，不要直接使用 px！
第二步：公众号后台开通云开发 TCB
1.登录小程序后台（mp.weixin.qq.com），侧边栏找到【云开发】;
2.点击开通，选择免费环境
（个人学习完全够用）；
3.设置环境名称，等待环境初始化完成；
4.复制你的环境ID，后续代码需要填写。
需要填写。
！！！重要提醒：开通环境之后，回到微信开发者工具，在项目配置里填写云开发环境 ID，才能正常调用数据库。
第三步：创建云开发数据库集合
进入云开发控制台，选择【数据库】； 点击【+创建集合】，自定义集合名词（示例：demo-one）； 进入集合权限设置，考试阶段可以临时调整权限：所有用户可读，仅创建者客服写；
⚠️正式上线务必收紧权限，避免数据被恶意篡改！
第四步：编写 JS 代码，实现数据增删改查
//index.jsconst db = wx.cloud.database()Page({data:{},//新增数据addData(){db.collection('demo-one').add({data:{name:"第一条测试数据",time:new Date()},success:res=>{wx.showToast({title:"新增成功"})console.log("新增id",res._id)}})},//查询数据queryData(){db.collection('demo-one').get({success:res=>{console.log("查询结果",res.data)wx.showToast({title:"查询完成，查看控制台"})}})},//修改数据updateData(){//把此处_id替换成你数据库真实的数据IDdb.collection('demo-one').doc("填入数据_id").update({data:{name:"修改之后的数据"},success:res=>{wx.showToast({title:"修改成功"})}})},//删除数据delData(){//把此处_id替换成你数据库真实的数据IDdb.collection('demo-one').doc("填入数据_id").remove({success:res=>{wx.showToast({title:"删除成功"})}})}})
！！！给大家分享一个我自己也失误的地方！！！
在app.js必须加上云环境初始化代码
//app.jsApp({onLaunch() {// 填入你自己的云开发环境ID！！wx.cloud.init({env: "你的环境ID",traceUser: true})}})
总结
使用 WXML+WXSS 搭建首页界面，掌握小程序基础页面编写方式； 成功开通微信云开发 TCB，创建数据库集合； 实现数据库基础的新增、查询、修改、删除，打通小程序数据交互。
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
