当前位置:   article > 正文

微信小程序云开发-云函数篇_微信小程序云函数

微信小程序云函数

一、小程序原生-云函数

1、在项目根目录下新建云函数存放的文件夹目录: "functions/",并在 project.config.json 中加入配置

2、右击 functions 文件夹选择当前环境,环境选择好后,再右击选择:新建Node.js云函数

    

3、云函数代码编写

4、安装依赖 Node.js + wx-server-sdk包(云开发的node包文件)

  4.1) 安装wx-server-sdk包: cnpm install wx-server-sdk --save(npm 有时会漏包)  
  4.2) 验证:node index.js 如果没有报错就说明环境安装没问题  
  4.3) 右击 add 云函数,选择【上传并部署:所有文件】  

5、云函数调用

参考备注: 如何进行小程序云函数开发  云函数上传文件或图片 base64

二、uni-app框架-云函数

1、在项目根目录下新建云函数存放的文件夹目录: "functions"【文件夹不能为空,否则会影响webpack的拷贝,先随便加个xx.js】,并在 manifest.json 中配置云函数路径

2、安装 copy-webpack-plugin 复制插件【functions不是uni-app的默认目录,不会被打包进/unpackage/dist/dev/mp-weixin】,安装完后新建 vue.config.js 文件进行配置

  1. // copy-webpack-plugin 6.1.1版本的官方配置方法有改动,不适合后续 vue.config.js 的配置,所以用5.5.5版本
  2. cnpm install copy-webpack-plugin@5.1.1 --save
  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, 'functions'),
  9. to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'development' ? 'dev' : 'build', process.env.UNI_PLATFORM, 'functions')
  10. }
  11. ])
  12. ]
  13. }
  14. }

3、运行小程序开发工具,出现云函数文件夹即表示配置成功,配置成功后就可以快乐的玩耍了!!!

4、在App.vue 中进行云函数初始化,可以在 /pages 的 index.vue 调用云函数

  1. // App.vue 初始化云函数
  2. <script>
  3. export default {
  4. onLaunch: function() {
  5. console.log('App Launch');
  6. wx.cloud.init({
  7. env: 'xxxx', // 云函数环境ID
  8. traceUser: true
  9. });
  10. }
  11. };
  12. </script>
  13. // 云函数调用
  14. <script>
  15. export default {
  16. onLoad: function() {
  17. wx.cloud.callFunction({
  18. name: 'getUnionid'
  19. }).then((res) => {
  20. console.log(res)
  21. })
  22. }
  23. }
  24. </script>

参考备注:uni-app实现微信小程序云开发  uni-app中彻底打通微信小程序云函数

 

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

闽ICP备14008679号