小程序云开发从入门到上线看这一篇就够了(1)

本文详细介绍了如何下载并安装微信开发者工具,新建小程序项目,配置云开发,开通云服务,以及如何在前端和云函数中操作数据库。还提供了登录代码示例和云函数调用方法,帮助开发者更好地进行小程序开发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

下载并安装微信开发者工具

打开并登录微信开发者工具,新建小程序项目,填入 AppID,后端服务选择“小程序·云开发”:

创建云开发项目

Step 3: 开通云开发

在使用云开发能力之前,需要先开通云开发。

在开发者工具的工具栏左侧,点击 “云开发” 按钮即可打开云控制台,根据提示开通云开发

开通云开发

Step 4: 新建环境

注意事项:指定环境名称,且后面 不可更改,只能建 2 个【环境 ID 是根据环境名称自动生成的】

创建云开发环境

Step 5: 修改 app.js 初始化【数据库环境 ID】

App({

onLaunch: function () {

if (!wx.cloud) {

console.error(“请使用 2.2.3 或以上的基础库以使用云能力”);

} else {

wx.cloud.init({

env: “xxxx”, // 修改成云开发控制台里复制过来的自己的环境ID,

traceUser: true,

});

}

this.globalData = {};

},

});

2. 项目开发


数据库

官方文档(云开发 - 数据库)

打开云开发之后创建数据库,就可以操作数据库,建议不要减少直接操作数据库,选择用前端或者云函数操作数据库。

创建数据库

前端操作数据库

onAdd: function () {

const db = wx.cloud.database()

db.collection(‘counters’).add({

data: {

count: 1

},

success: res => {},

fail: err => {}

})

},

云函数

官方文档(云开发 - 云函数)

相较于前端直接操作数据库,我更建议使用云函数操作数据库,使得前端的代码更为纯粹。

登录代码

const cloud = require(“wx-server-sdk”);

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });

const db = cloud.database();

const collection = db.collection(“users”);

const addUser = (OPENID, userInfo) => {

return new Promise((resolve, reject) => {

collection

.doc(OPENID)

.set({ data: userInfo })

.then(() => {

resolve();

})

.catch((err) => {

reject(err);

});

});

};

exports.main = async (event, context) => {

const { userInfo } = event.data;

const { OPENID, APPID, UNIONID } = cloud.getWXContext();

try {

await addUser(OPENID, userInfo);

return {

code: 200,

msg: “登陆成功”,

data: { userId: OPENID, …userInfo },

};

} catch (err) {

return { code: 500, msg: “服务器错误!”, err };

}

};

小程序端调用云函数

fetch({

name: “login”,

data: { userInfo: e.detail.userInfo },

}).then((res) => {

if (res.code != 200) {

app.toast(res.msg);

return;

}

wx.setStorageSync(“userInfo”, res.data);

this.setData({ userInfo: res.data });

this.getData(res.data.userId);

});

封装的 fetch 函数

export function fetch(params) {

return new Promise((resolve, reject) => {

const { name, data } = params;

wx.cloud.callFunction({

name,

data: { data },

success: (res) => {

resolve(res.result);

},

fail: (err) => {

reject(err);

},

});

});

}

增改

const cloud = require(“wx-server-sdk”);

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });

const db = cloud.database();

const collection = db.collection(“punchGoal”);

const createPunchGoal = (data) => {

return new Promise((resolve, reject) => {

collection

.add({ data: { …data, count: 0 } })

.then(() => {

resolve();

})

.catch((err) => {

reject(err);

});

});

};

const updatePunchGoal = (data) => {

const id = data._id;

delete data._id;

return new Promise((resolve, reject) => {

collection

.doc(id)

.update({ data: { …data } })

.then(() => {

resolve();

})

.catch((err) => {

reject(err);

});

});

};

exports.main = async (event, context) => {

// 数据校验

const params = [“goalName”, “iconName”, “punchTimes”, “startTime”];

if (

!params.every(

(item) =>

event.data[item] !== “” &&

event.data[item] !== null &&

event.data[item] !== undefined

)

) {

return { code: 500, msg: “参数错误!” };

}

event.data.userId = cloud.getWXContext().OPENID;

// 时间格式化

event.data.date = new Date();

for (const item of [“startTime”, “endTime”]) {

event.data[item] = event.data[item] ? new Date(event.data[item]) : null;

}

try {

if (event.data._id) {

await updatePunchGoal(event.data);

return { code: 200, msg: “修改成功” };

} else {

await createPunchGoal(event.data);

return { code: 200, msg: “新增成功” };

}

} catch (err) {

return { code: 500, msg: “服务器错误!”, err };

}

};

const cloud = require(“wx-server-sdk”);

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });

const db = cloud.database();

const collection = db.collection(“punchGoal”);

const getPunchGoalList = (data) => {

const { userId } = data;

return new Promise(async (resolve, reject) => {

collection

.where({ userId })

.get()

.then((res) => {

resolve(res.data);

})

.catch((err) => {

reject(err);

});

});

};

exports.main = async (event, context) => {

if (!event.data.userId) {

return { code: 500, msg: “参数错误!” };

文末

逆水行舟不进则退,所以大家要有危机意识。

同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值