编辑器vscode + uniapp vue-cli创建的微信小程序使用原生云函数

218 阅读2分钟

当前项目是使用的uniapp vue-cli创建的,然后想试一试云函数,发现文档及网络上的文章基本都是推荐的原生使用方法或uniapp使用uniCloud的文章。所以记录一下我各种野路子实现的方案。

首先 创建项目这个步骤就不说了,在uniapp文档中有说明,参照走下去即可。

遇到的问题: 1、在根目录创建cloudfunction文件夹存放云函数之后调用时一直进不去函数中,console.log的res一直都是传入的参数,也一直没有报错。 2、经过摸索,使用原生需要在微信开发者工具编辑器中的根目录创建,并同步云函数,但是在vscode中执行npm run dev:mp-wexin之后,云函数文件夹在dist中就没了。 3、好不容易使用vite copyFile方式实现了保留云函数文件夹。但是一直报 -504002的错误和找不到wx-server-sdk模块。

解决及实现方案 1、在根目录的project.config.json中配置

"cloudfunctionRoot": "cloudfunctions/", // cloudfunctions这个文件夹是自己定义的名称,与实际文件名匹配即可
// 现在cloudfunctions文件夹中创建user/index.js // 函数名对应

// 在pages页面中调用代码
 wx.cloud.callFunction({
    // 云函数名称
    name: 'user',
    // 传给云函数的参数
    data: {
      a: 2,
      b: 3,
    }
  }).then(res => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  })

2、在vite.config.ts文件夹中添加。

function copyFile() {
  // copy云函数文件夹至打包后的文件夹中
  console.log(process.env.UNI_PLATFORM)
  return {
    enforce: 'post',
    async writeBundle() {
      await fs.copy(
	path.resolve(__dirname, 'cloudfunctions'),
	path.join(__dirname, './dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM || 'mp-weixin', 'cloudfunctions'));
	},
    };
}

export default defineConfig({
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  },
  plugins: [uni(), copyFile()],
  // transpileDependencies: ['uview-plus']
});

3、在保留云函数文件夹之后,还需要在对应云函数文件夹下创建package.json,执行

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

最后的效果大概是这样的

image.png

4、不足 需要每次修改都执行npm run dev:mp-weixin 5、然后在微信开发者工具中执行

image.png