uni-app中彻底打通微信小程序云函数

分手后的思念是犯贱 2023-03-13 05:08 59阅读 0赞

### uni-app中打通微信小程序云函数 ###

*  前言
 *  工具
 *  方法
 *   *   *  导入查看项目
         *  快速获取云函数模板
         *  部署云函数
         *  运行云函数

# 前言 #

uni-app未对微信小程序云做兼容适配，所以选择了uni-app框架又想用小程序云的小朋友通常是在微信开发者工具单独开一个云项目，这种分开发的模式。

而我选择的方式是在uni-app项目中新建一个 /cloudfunctions 文件夹作为云函数根目录，在其中编写云函数代码。

> 云函数根目录配置的具体方法参考前文：  
> [uni-app实现微信小程序云开发][uni-app]

此文就是关于如何在 uni-app 写有效的云函数

# 工具 #

1.  Hbuilder X
2.  微信开发者工具

# 方法 #

### 导入查看项目 ###

前文通过HBulider 运行项目后已在 ***/unpackage/dist/dev*** 生成了小程序代码，我们将其导入到微信开发者工具  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70]

> 可以看到 */cloudfunctions* 已经作为云函数目录，右键可以切换运行环境，这里我们选择dev

### 快速获取云函数模板 ###

如果对云函数特别熟悉可以直接在HBulider快乐的敲代码了，这里我们偷个懒在微信开发者工具中随便新建个云函数获取其模板

![在这里插入图片描述][20200511103307129.png]

> 对着 */cloudfunctions* 右键选择 “新建Node.js云函数”，我们新建一个叫aaa的云函数

这里就快速获取到了云函数模板：

*  index.js
 *  package.json

将它们复制到ani-app项目中对应新建的云函数，这里我新建了一个叫loginCheck的云函数  
![在这里插入图片描述][20200511103854509.png]

> 记住将 package.json 的name由 aaa 改为云函数名字 loginCheck

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 1]

微信开发者工具中，loginCheck已被同步过来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 2]

### 部署云函数 ###

小程序云函数是运行在小程序云服务器上，等于说微信在自己服务器上为我们搭建了一个node后台。所以我们要运行云函数就需先把云函数上传部署到云端：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 3]

### 运行云函数 ###

> 如果对小程序云开发不熟悉的建议先看[官方教程][Link 1]

我们先看一下云函数 index.js 的代码在做些什么：

// 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    // 云函数入口函数
    exports.main = async (event, context) => { 
      const wxContext = cloud.getWXContext()
    
      return { 
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
      }
    }

> 默认返回的是一些id

我们试下在 ***/pages*** 的 **index.vue** 调用云函数获取这些id：

onLoad: function() { 
    	  wx.cloud.callFunction({ 
    	    name: 'loginCheck'
    	  }).then((res) => { 
    		  console.log(res)
    	  })
    }

微信开发者工具运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 4]  
**成功获取到了返回结果！至此小程序云已彻底打通，去按照自己的想法开发吧！！**

[uni-app]: https://blog.csdn.net/YNEWA/article/details/106019518
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70]: /images/20230312/20a54a51dceb48368a9db2d4200cb588.png
[20200511103307129.png]: /images/20230312/ca84b7918dd64bf49acdbaf047d921e7.png
[20200511103854509.png]: /images/20230312/f0377c7f958b465b8fdb1395b0a8d2ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 1]: /images/20230312/dd2b41f17d1f4af0af2c543df731d842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 2]: /images/20230312/ca0ba3735c674258992836a2e9467029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 3]: /images/20230312/021a3ecc8394492197ef65893c6cafb6.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lORVdB_size_16_color_FFFFFF_t_70 4]: /images/20230312/6172d6737423426985e23b59c90cbd53.png