当前位置：首页 > news >正文

记录一次微信小程序使用云能力开发的过程

news 来源：原创 2025/6/7 11:37:48

对于开发微信小程序云开发不知从何起的同学们，可以当作一次参考。虽说官方有文档，有模板示例，但是这些都是片段或者完整的结果展示。对于初学或者开发经验较少的同学们，可能不知先从那里入手进行第一步的开发。下面解析下构建微信小程序云开发的初始步骤，让大家能够一步步创建起自己的小程序。

一、创建小程序

1、创建小程序：选择了不使用模板（会自动默认选中不使用云服务），因为选择了示例，里面的目录内容结构太多太复杂了，示例里的（组件，扩展等）我们也不会全部用到，会让自己的小程序雍肿。

2、开通自己的云开发服务（其实就是开通云服务器，赠有限的免费使用云服务器时间），安装步骤开启就可以了，因为我的已经开启了）。记住此处中出现的环境ID

二、赋予云开发能力，使用云函数

1、与开发能力：首先再我们的项目目录中创建云函数存放的文件目录 cloudfunctions，如下图：

鼠标选中编译器中的：资源管理器窗口-选中其中的文件然后按 shift+alt+R 键可打开项目目录，再进行目录创建

2、在项目根目录找到 `project.config.json` 文件，新增 `cloudfunctionRoot` 字段，指定本地已存在的目录作为云开发的本地根目录

保存后或者手动编译 cloudfunctions文件夹会有云朵的标识。

3、创建云函数，且需要安装云服务扩展（ wx-server-sdk ）

1、鼠标移到如果图（急于赶工拍了一张）：右键云开发目录选中新建Node.js云函数。

创建了一个login云函数（名称根据自己的需求写）。云函数的文件函数逻辑处理也根据自己的需求修改，图下是默认的示例：

2、安装扩展

wx-server-sdk扩展不是再主目录中安装的。

是在cloudfunctions 目录下安装：

npm install --save wx-server-sdk@latest

如图操作：

4、初始化云服务

创建完云函数，还得再项目中初始化。

先在根目录创建个config.js 配置文件用于定义某些常量的配置：内容如下

const config = {// 云开发环境 IDenvId: 'xxx-xxxxx',
}
module.exports = config

然后打开项目中的 app.js，并引用及初始化云服务：

// app.js
const config = require('./config')
App({//每次进入应用执行，只执行一次onLaunch() {//初始化云服务if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({env: config.envId,traceUser: true,})}}})

配置完成，下面如何使用云函数：

5、云函数使用

在wxml页面中绑定一个点击事件clickLogin ，如图：

然后再在 js文件中配置：

// index.js
Page({data:{},//获取信息clickLogin(){// console.log("信息");wx.cloud.callFunction({name:"login",//云函数名称data:{a:1,b:2,},//传给云函数的参数}).then(res=>{console.log(res,"结果");}).catch(console.error);},})

结果如下：获取到了用户的 openid unionid等信息

即成功请求了云函数，可以着手进行自己微信小程序的云开发了。某些过程还未详细介绍，比如编译器中开启云开发过程，和安装云服务扩展（ wx-server-sdk ）这里有些需要注意的，就是根目录还未进行 npm初始化或者安装，则node_modules 则会安装到了 cloudfunction下的，这个需要注意。

以上时个人操作的见解，仅供参考，如不足请补充！

附上demo资源链接-码云

一、创建小程序

二、赋予云开发能力 ，使用云函数

1、与开发能力：首先 再我们的项目目录中创建 云函数存放的文件目录 cloudfunctions，如下图：

2、 在项目根目录找到 project.config.json 文件，新增 cloudfunctionRoot 字段，指定本地已存在的目录作为云开发的本地根目录