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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/259577.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker安装Mysql数据库

1. 前言 XXXXX 2. Docker中安装MySQL服务 以下以mysql8.2版本为例&#xff0c;mysql5.7的步骤也是一样的 2.1. 查看可用的MySQL版本 # 搜索镜像 docker search mysql2.2. 拉取MySQL镜像 # 拉取镜像 docker pull mysql# 或者 docker pull mysql:latest2.3. 查看本地镜像 …

关于IDEA中maven的作用以及如何配置MAVEN

关于IDEA中maven的作用以及如何配置MAVEN 1、Maven是什么2、Idea中对于Maven的配置3、下载依赖时&#xff0c;Idea下方的显示3.1、Maven中央仓库的下载显示界面3.2、阿里云仓库的下载显示界面 4、Maven在Idea中的使用4.1、clean4.2、validate4.3、compile4.4、test&#xff08;…

数据结构-线性表的链式存储结构

术语&#xff1a; 1.结点&#xff1a;数据元素的存储映像。有数据域和指针域两部分组成。 2.链表&#xff1a;n个结点由指针组成一个链表 3.结点只有一个指针域的链表&#xff0c;成为单链表或线性链表。 4.结点有两个指针域的链表&#xff0c;成为双链表。 5.首尾相接的链…

8 个顶级的 PDF 转 Word 转换器

PDF 是跨不同平台分发信息而不影响内容格式的好方法。但这种安全级别确实有其缺点。没有直接的方法来编辑 PDF 上的文本或内容。编辑 PDF 文档的唯一方法是将其转换为 Word 文档或其他可以编辑的文件类型。将 PDF 转换为 Word 是根据需要编辑 PDF 内容的最快方法。有许多免费的…

Python中的深拷贝和浅拷贝的区别

目录 一、深拷贝和浅拷贝的概念 二、Python中的深拷贝和浅拷贝实现 三、深拷贝和浅拷贝的区别及适用场景 四、如何选择深拷贝和浅拷贝 五、总结 在Python中&#xff0c;深拷贝和浅拷贝是非常重要的概念&#xff0c;它们在处理对象和数据结构时有着截然不同的行为。理解深拷…

MN316 OpenCPU丨HTTP使用介绍

HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;即超文本传输协议&#xff0c;是一个简单的请求-响应协议&#xff0c;通常运行在TCP之上&#xff0c;它指定了客户端可能发送给服务器消息类型以及得到什么类型响应。HTTPS&#xff08;Hyper Text Transfer Protoc…

Windows 系统,TortoiseSVN 无法修改 Log 信息解决方法

使用SVN提交版本信息时&#xff0c;注释内容写的不全。通过右键TortoiseSVN的Show log看到提交的的注释&#xff0c;右键看到Edit log message的选项&#xff0c;然而提交后却给出错误提示&#xff1a; Repository has not been enabled to accept revision propchanges; ask …

炫酷不止一面:探索JavaScript动画的奇妙世界(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

wps word中图片 一保存失真变糊

在wps中依次点击 文件-文字偏好设置-常规与保存 勾选不压缩文件中的图像 并 将默认目标输出设置为220ppi 即可

c# 中间件简说

一、什么是中间件 中间件是一种装配到应用管道以处理请求和响应的软件。是介于request与response处理过程之间的一个插件(一道处理过程)&#xff0c;相对比较轻量级&#xff0c;并且在全局上会影响到request对象和response对象的属性。因为改变的是全局&#xff0c;所以需要谨…

log4j(日志的配置)

日志一般配置在resources的config下面的&#xff0c;并且Util当中的initLogRecord中的initLog&#xff08;&#xff09;方法就是加载这个log4j.properties的. 首先先看log4j.properties的配置文件 log4j.rootLoggerdebug, stdout, Rlog4j.appender.stdoutorg.apache.log4j.Co…

数据可视化:解锁企业经营的智慧之道

在现代企业管理中&#xff0c;数据可视化已经成为了一项重要的工具。它不仅仅是简单地展示数据&#xff0c;更是提供了深入理解数据、做出更明智决策的方法。作为一名可视化设计从业人员&#xff0c;我经手过一些企业自用的数据可视化项目&#xff0c;今天就来和大家聊聊数据可…