hbuilder + uniapp +vue3 开发微信云小程序

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

相关推荐

  1. 3 程序

    2023-12-09 05:52:02       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-09 05:52:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-09 05:52:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-09 05:52:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-09 05:52:02       18 阅读

热门阅读

  1. MongoDB SASL 鉴权方式 SCRAM-SHA-1步骤

    2023-12-09 05:52:02       29 阅读
  2. 前端常用设计模式详细解析

    2023-12-09 05:52:02       33 阅读
  3. 跟着GPT学设计模式之建造者模式

    2023-12-09 05:52:02       42 阅读
  4. A类中创建posix线程,线程间如何通信

    2023-12-09 05:52:02       35 阅读
  5. centos7做gitlab数据灾备项目地址指向问题

    2023-12-09 05:52:02       34 阅读
  6. C#反射加载程序集并使用

    2023-12-09 05:52:02       41 阅读
  7. 蓝桥杯:货物摆放

    2023-12-09 05:52:02       32 阅读
  8. react的sass模块化引入

    2023-12-09 05:52:02       40 阅读
  9. 更新 Node.js 和 npm 使用 nvm

    2023-12-09 05:52:02       39 阅读