当前位置:   article > 正文

uniapp 结合 微信云开发 如何结合使用_uniapp使用微信云开发

uniapp使用微信云开发

用的是vue2

步骤一: 注册账号

不能是测试账号,测试账号是不能选择云开发的

步骤二: uniapp上创建项目    test-project

步骤三:前期的配置

1. 填写微信小程序APPID

2. 源码视图中,说明后面会放所有加上云函数文件的目录名称

在"mp-weixin"中加上这行代码

"cloudfunctionRoot": "cloudfunctions/"

3. 在项目中创建目录  cloudfunctions

注意:必须跟第二步的名字一致哦

 小小注意:cloudfunctions目录里面不能为空,不然不会被复制成功

4.  安装 copy-webpack-plugin,复制文件

说明:在uniapp上点击运行微信小程序,会发现微信小程序中根本没有cloudfunctions目录,所以我们需要接住复制文件的包,把cloudfunctions目录所有文件复制在dist文件中

先初始化,在安装   安装命令  node16

npm install copy-webpack-plugin@5.1.1  --dev

 新建js文件   vue.config.js   固定的,复制固定代码

 复制代码到vue.config.js 中

  1. const path = require('path')
  2. const CopyWebpackPlugin = require('copy-webpack-plugin')
  3. module.exports = {
  4. configureWebpack: {
  5. plugins: [
  6. new CopyWebpackPlugin([
  7. {
  8. from: path.join(__dirname, 'cloudfunctions'),
  9. to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'development' ? 'dev' : 'build', process.env.UNI_PLATFORM, 'cloudfunctions')
  10. }
  11. ])
  12. ]
  13. }
  14. }

 步骤四 运行到微信小程序

这时,我们会发现出现一个 unpackage打包后的文件,我们从这里就可以检查cloudfunctions目录是否有被复制进去,微信开发者工具中也有这个文件了。

 

 

步骤五 点击云开发 开通自己的云开发环境,选择运行环境

步骤六 点击新建node.js云函数abc

里面有3个文件,在uniapp中去创建一模一样的目录和文件 

 步骤七 在App.js文件中初始连接一下云开发环境

  1. wx.cloud.init({
  2. env: '这里填你开通的云开发ID',
  3. traceUser: true,
  4. })

 在云开发中查看复制

步骤八  找个页面,执行云函数

  1. wx.cloud.callFunction({ name:'abc'}).then(res=>{
  2. console.log('res',res)
  3. })

 发现结果被打印在控制台了,至此我们就可以开始自己做自己想要的功能了。

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/859013
推荐阅读
相关标签
  

闽ICP备14008679号