uni-app对微信小程序云函数的适配

引言

熟悉uni-app的人应该都知道,uni-app并未对微信小程序云函数(本文统称云函数)进行相应的适配。但是,如果我们在某些业务场景的下需要使用云函数呢?我们知道,云函数可以复制到微信开发者工具,这样的话我们不得不每次编译一次就手动复制一次,不得不说麻烦至极。本文就问题做出以下解决方案。

本文环境

  1. Hbuilder X

Hbuilder X版本

  1. 微信开发者工具

微信开发者工具版本

创建云函数目录

首先,我们需要在uni-app项目文件夹下,创建一个云函数目录,路径随意,我这里是functions。然后先随便在里面放一些文件,这里以new_file.css为例。

修改manifest.json

在uni-app根目录下,修改manifest.json中的微信小程序项,结构如下


"mp-weixin" : {

        /* 小程序特有相关 */

        "appid" : "wxd7de467f6e6cf741",

        "cloudfunctionRoot": "./functions/", // 这一行就是标记云函数目录的字段

        "setting" : {

            "urlCheck" : false

        },

        "usingComponents" : true

    }

编写vue.config.js

  1. 我们在项目根目录创建vue.config.js文件

  2. 写入以下内容(如路径不一样请做相应适配)


const path = require('path')

const CopyWebpackPlugin = require('copy-webpack-plugin')



module.exports = {

	configureWebpack: {

		plugins: [

			new CopyWebpackPlugin([{

				from: path.join(__dirname, 'cloudFunctions'),

				to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env

					.UNI_PLATFORM, 'cloudFunctions')

			}])

		]

	}

}
  1. 编译运行

发现提示如下内容

提示内容

说明未安装copy-webpack-plugin插件,我们手动安装一下。


npm install -save copy-webpack-plugin

TIPS: 截至2020.6.4, uni-app暂不支持copy-webpack-plugin 6.0版,请安装5.0版

📅 2021-05-16