UniApp 接入微信云开发：从零到一的完整实战指南最近在做小程序项目，需要接入微信云开发。踩了一些坑后总结了一套完整的

最近在做小程序项目，需要接入微信云开发。踩了一些坑后总结了一套完整的接入流程，分享给大家参考。

一、为什么用 UniApp + 微信云开发？

UniApp

一套代码能跑多个平台，小程序、H5、App 都能用。Vue 语法，开发起来也快。

微信云开发

不用自己搭服务器，微信官方提供数据库、存储、云函数这些功能。小流量基本免费，成本可控。

两者结合起来挺合适的，尤其适合做小程序的快速开发和上线。

二、准备工作

1. 开通云开发

登录小程序后台，找到「云开发」，开通基础版（免费）。创建一个云环境，记住环境ID，后面要用到。

2. 创建项目

用 HBuilderX 创建 UniApp 项目，选默认模板就行。

3. 配置环境ID

在项目根目录建个 cloud-env-config.js：

const cloudEnv = {
  devId: 'your-env-id'  // 这里换成你的环境ID
}

const currentEnv = cloudEnv.devId

export { currentEnv }

4. project.config.json 配置

"cloudfunctionTemplateRoot": "cloudfunctionTemplate",
"cloudfunctionRoot": "cloudfunctions/",
"cloudbaseRoot": "cloudbase/",

4. 配置云函数同步

根目录建个 vite.config.js：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import fs from 'fs-extra'
import path from 'path'

const plugins = [uni()]

if (process.env.UNI_PLATFORM === 'mp-weixin') {
  plugins.push({
    name: 'copy-cloudfunctions',
    buildStart() {
      fs.copySync(
        path.join(process.env.UNI_INPUT_DIR, 'cloudfunctions'),
        path.join(process.env.UNI_OUTPUT_DIR, 'cloudfunctions')
      )
    },
  })
}

export default defineConfig({
  plugins,
})

这个配置会把云函数目录自动复制到微信开发者工具。

三、云开发初始化

在 App.vue 里初始化云开发：

import { currentEnv } from '@/cloud-env-config.js'

export default {
  onLaunch: function() {
    this.initCloud()
  },
  methods: {
    initCloud() {
      if (wx.cloud && currentEnv) {
        wx.cloud.init({
          env: currentEnv
        })
        console.log('云开发初始化成功')
      } else {
        console.warn('环境ID未配置')
      }
    }
  }
}

四、用户登录

登录云函数

建个 cloudfunctions/login/index.js：

'use strict';

const cloud = require('wx-server-sdk');

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
const db = cloud.database();

exports.main = async (event, context) => {
  try {
    const wxContext = cloud.getWXContext();
    const openid = wxContext.OPENID;

    const userQuery = await db.collection('users').where({
      _openid: openid
    }).get();

    if (userQuery.data.length === 0) {
      // 新用户
      await db.collection('users').add({
        data: {
          _openid: openid,
          nickName: '游客',
          avatarUrl: '/static/default-avatar.png',
          createTime: new Date()
        }
      });
      console.log('新用户创建成功');
    } else {
      // 老用户更新登录时间
      await db.collection('users').doc(userQuery.data[0]._id).update({
        data: { updateTime: new Date() }
      });
    }

    return {
      success: true,
      data: {
        openid,
        nickName: '游客',
        avatarUrl: '/static/default-avatar.png'
      }
    };
  } catch (error) {
    console.error('登录失败：', error);
    return {
      success: false,
      message: '登录失败'
    };
  }
};

配置文件 cloudfunctions/login/package.json：

{
  "name": "login",
  "dependencies": {
    "wx-server-sdk": "~2.6.3"
  }
}

App.vue 里调用

export default {
  onLaunch: function() {
    this.initCloud()
    this.userLogin()
  },
  
  async userLogin() {
    try {
      const res = await wx.cloud.callFunction({
        name: 'login'
      })
      
      if (res.result.success) {
        uni.setStorageSync('userInfo', res.result.data)
        console.log('登录成功')
      }
    } catch (error) {
      console.error('登录失败：', error)
    }
  }
}

五、更新用户信息

建个 cloudfunctions/updateUser/index.js：

'use strict';

const cloud = require('wx-server-sdk');
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });
const db = cloud.database();

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  const openid = wxContext.OPENID;
  const { nickName, avatarUrl } = event;

  const updateData = { updateTime: new Date() };
  if (nickName) updateData.nickName = nickName;
  if (avatarUrl) updateData.avatarUrl = avatarUrl;

  await db.collection('users')
    .where({ _openid: openid })
    .update({ data: updateData });

  return { success: true };
};

六、数据库

users 集合的结构很简单：

{
  _openid: "微信OpenID",
  nickName: "昵称",
  avatarUrl: "头像URL",
  createTime: Date
}

_openid 是微信自动生成的，作为用户的唯一标识。

七、上传头像

wx.cloud.uploadFile({
  cloudPath: `avatars/${Date.now()}.jpg`,
  filePath: tempFilePath,
  success: (res) => {
    console.log('上传成功：', res.fileID)
  }
})

八、部署云函数

在微信开发者工具里找到 cloudfunctions 目录
右键云函数文件夹，选择「上传并部署：云端安装依赖」
等待部署完成
在云开发控制台查看云函数状态

九、常见问题

云函数调用失败

检查环境ID是否正确
确认云函数已部署

上传文件失败

检查云存储空间
确认文件大小不超过 20MB

OpenID 获取失败

在真机或真机调试模式下运行
确认云开发已开通

十、参考文档

如果这篇文章对你有帮助，欢迎点赞收藏转发！