1、創建項目：

2、創建項目完成的默認目錄結構：

3、在根目錄新建一個文件夾cloudFns（文件名字隨便），存放云函數源碼：

4、修改manifest.json文件：添加 小程序?appid和cloudfunctionRoot，cloudfunctionRoot的value必須和第三步創建目錄的名字保持一致：

5、添加vite.config.js配置文件：

vite.config.js：

import { defineConfig } from 'vite';
import fs from 'fs-extra';
import path from 'path';
import uni from '@dcloudio/vite-plugin-uni';function copyFile() {return {enforce: 'post',async writeBundle() {await fs.copy(path.resolve(__dirname, 'cloudFns'),path.join(__dirname,'unpackage/dist',process.env.NODE_ENV === 'production' ? 'build' : 'dev',process.env.UNI_PLATFORM,'cloudFns'));},};
}export default defineConfig({plugins: [uni(),copyFile()],
});

6、運行到微信開發工具：

7、右鍵云函數目錄，創建云函數：（默認創建獲取openId的云函數）

8、右鍵cloudApis 部署云函數：

9、在微信開發工具點擊云開發就看到云函數了：

（這個時候其實就可以，使用云函數了），問題是下次重新運行項目的，本地的云函數目錄就沒有了，原因是HBuilder重新編譯，這個時候并不會有存在云函數。所以要把cloudApis這個目錄復制到cloudFns目錄下，這樣云函數的源碼在本地才會保留下來，（個人理解）

注：修改云函數本地源碼之后，1、在HBuilder中要重新編譯，2、在微信開發工具重新部署云函數

10、把cloudApis目錄復制到項目源碼的cloudFns目錄下：

11、在App.vue中初始化云環境：

12、使用云函數：

<template><view class="content">openId:[{{openid}}]</view>
</template><script setup>import {ref,onMounted} from 'vue'const openid=ref(undefined)onMounted(getOpenId)async function getOpenId() {const {result} = await wx.cloud.callFunction({name: 'cloudApis',data: {type: "getOpenId"}})	openid.value=result.openid		}	
</script>

13、多運行環境配置：

npm init -y

然后再package.json中添加：

"uni-app": {"scripts": {"dev": {"title": "開發","env": {"UNI_PLATFORM": "mp-weixin","ENV": "dev"}},"test": {"title": "測試版","env": {"UNI_PLATFORM": "mp-weixin","ENV": "test"}},"prod": {"title": "生產版","env": {"UNI_PLATFORM": "mp-weixin","ENV": "prod"}}}}

訪問環境變量：process.env.ENV