微信小程序 - 云开发

痛定思痛。 2022-09-06 00:18 499阅读 0赞

### 文章目录 ###

*  一、云开发介绍
 *   *  1、简介
     *  2、云开发和传统服务器对比
 *  二、数据库的增删改查
 *   *  1、配置云开发
     *  2、创建数据列表
     *  3、初始化云开发
     *  4、查询 get()
     *  5、条件查询 where()
     *  6、查询单条数据doc()
     *  7、添加数据 add()
     *  8、更新数据update()
     *  9、删除数据remove()
 *  三、云函数
 *   *  1、配置环境变量
     *  2、初始化云开发环境id
     *  3、创建云函数
     *  4、编写云函数
     *  5、部署云函数
     *  6、调用云函数
 *  四、内容管理
 *   *  1、内容管理介绍
     *  2、开通内容管理
     *  3、创建项目

> 官方文档：[微信小程序官方文档][Link 1]  
> 参考文档：[微信小程序云开发][Link 2]

# 一、云开发介绍 #

## 1、简介 ##

小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。

开发者无需搭建服务器，可免鉴权直接使用平台提供的API进行业务开发  
小程序

云开发又简称tcb，是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含：云数据库，云函数，云存储，云调用。后面章节会具体给大家讲解这几个。

## 2、云开发和传统服务器对比 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]  
通过上面的对比，我们可以看出，如果你想快速创建一个小程序的后台，用云开发是不错的选择。

# 二、数据库的增删改查 #

## 1、配置云开发 ##

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

在设置里改为 按量计费

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

## 2、创建数据列表 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

数据权限更改

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

## 3、初始化云开发 ##

初始化云开发环境前，先去云开发控制台，拿到云开发环境id，如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]  
拿到环境id以后，就去app.js里做云开发环境初始化，如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

wx.cloud.init({ 
          env: 'xxx'
        })

## 4、查询 get() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]

## 5、条件查询 where() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]

## 6、查询单条数据doc() ##

doc是用来查询单条数据的。比如商品详情页。  
doc里面用到的参数就是我们数据里的\_id字段

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]

## 7、添加数据 add() ##

通过add可以实现数据的添加：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]

## 8、更新数据update() ##

修改数据库里已存在的数据，结合doc进行修改单条数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]

## 9、删除数据remove() ##

删除数据，结合doc删除单条数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]

# 三、云函数 #

## 1、配置环境变量 ##

在app.js里配置环境变量  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]  
这个env环境id需要你去云开发控制台获取  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]

## 2、初始化云开发环境id ##

新建一个和pages平级的目录cloud，用于存放云函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]  
然后在project.config.json里添加cloudfunctionRoot选项。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]

"cloudfunctionRoot": "/cloud",

保存之后，目录会有块“云”  
![在这里插入图片描述][40ea9aa2f9dc442a9e7bac15730e2bb8.png]  
然后对cloud选择当前环境：  
![在这里插入图片描述][bb1cea71286b4994a14cbb23e7a6f741.png]

## 3、创建云函数 ##

右键cloud目录，新建Node.js云函数

![在这里插入图片描述][0f33d6264ebd405ea16175799d22562f.png]  
然后新建一个云函数，名字你可以自定随便定。我这里用updateTw。

## 4、编写云函数 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]

> 需要更改的地方：\_id 和 view

// 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({ 
      env: cloud.DYNAMIC_CURRENT_ENV 
    })
    
    // 云函数入口函数
    exports.main = async (event, context) => { 
      return cloud.database().collection('SoftwareList')
        .where({ 
          _id: event.id
        })
        .update({ 
          data: { 
            view: event.view
          }
        })
    }

## 5、部署云函数 ##

先部署后调用！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 17]

## 6、调用云函数 ##

//浏览量+1
      const newView = this.data.twData.view + 1
      wx.cloud.callFunction({ 
        name: 'updateTw',
        data: { 
          id: options.id,
          view: newView
        }
      }).then(res=>{ 
        console.log(res)
      })

> 注意：这里的 name 要与 云函数的name 一致

调用并修改数据成功：  
![在这里插入图片描述][9b8be58fd7ce427d870ec3729b00edb8.png]

# 四、内容管理 #

## 1、内容管理介绍 ##

官网：[https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/extensions/cms/introduction.html][https_developers.weixin.qq.com_miniprogram_dev_wxcloud_guide_extensions_cms_introduction.html]

内容管理是基于云开发搭建的可视化的内容管理平台，提供了丰富的内容管理功能，开通简单，独立于云控制台，无须编写代码即可使用，支持文本、富文本、Markdown、图片、文件、关联类型等多种类型的可视化编辑，易于二次开发，并与云开发的生态体系紧密结合，助力开发者提升开发效率。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16]

## 2、开通内容管理 ##

1.更新到最新的 Nightly 版本工具，在工具顶部 Tab 栏中，点击「更多」-「内容管理」  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 1]

2.开通，勾选同意协议后，点击确定  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
3.账号密码。内容管理服务可独立于云开发控制台进行内容及权限的管理，请填写管理员账号及密码用于登录内容管理服务平台，填写账密后请妥善保管，点击「确定」完成开通。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_17_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
4.开通完成后，内容管理当前页面可看到内容管理的入口链接和相关信息。点击访问地址，即可在弹出的浏览器窗口中进行内容管理的相关配置。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## 3、创建项目 ##

在开始管理内容数据前，需创建一个项目。内容管理使用项目划分不同类的内容，便于区分内容数据用途，进行权限管理。

首先，我们需要点击新建项目下方的创建新项目按钮，创建一个名为小商店，Id 为 shop 的项目

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 5]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
[Link 2]: https://blog.csdn.net/qiushi_1990/article/details/112391688
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20220829/3828cd9103a04a6da003c3a766a0fe7b.png
[84c04efd76e8409d9cecd2b675393625.png]: /images/20220829/5a3a69934c6547adba5d9cb3e85e31d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20220829/87bd55c2d333474eacde8923d881d7e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20220829/d5b166f92af64e48945a021763f1f7c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20220829/07e50ab3ca16411f86bb29cadbfb89f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20220829/ce6c2315b7c44b5682856c4f8135d530.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20220829/9af549fd7d7a45e69f7363edb0a4a5d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20220829/afd1353992f74404b171825f46afaa02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20220829/97254f3b5fe24c3c933d37a3dfd9d2fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20220829/3599e877732d43fa937e3fd2e15c74b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20220829/79b895aac5194c5795a10664f63aea07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20220829/9d67f1219cd647299766c2f92efef679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20220829/7f662435ce8b4f31bce17cb77a47472e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20220829/2d797d6736074bfab3cf4830e0090a53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]: /images/20220829/8809ba2bba0b42eba1d2cfad35e3ad73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]: /images/20220829/fed387153de646718c20b9b85b78cc43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 15]: /images/20220829/c1c4b4c1bfc94950aa636ecb42d3621e.png
[40ea9aa2f9dc442a9e7bac15730e2bb8.png]: /images/20220829/b8dfe9ad557e4001884ee4d675446b87.png
[bb1cea71286b4994a14cbb23e7a6f741.png]: /images/20220829/4f6cb0e087e94bf4ade109656bd2e9db.png
[0f33d6264ebd405ea16175799d22562f.png]: /images/20220829/5690862e33484b4ca1c9d3d135990a4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 16]: /images/20220829/9da54ea80bb640e1b2b6b3641c6c143d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 17]: /images/20220829/c3764792e936407793a9aaf497c64e28.png
[9b8be58fd7ce427d870ec3729b00edb8.png]: /images/20220829/c34f0162f8a54c39b2b4caafd8ea5aae.png
[https_developers.weixin.qq.com_miniprogram_dev_wxcloud_guide_extensions_cms_introduction.html]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/extensions/cms/introduction.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/28acee89637c4a6da979c21126838621.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/48f7e767f4754764b7d60222371bd335.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/20c996cd12e24ee4b315a4d0c0913a0e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b9543374d32c4dbe89e500312cc74984.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/91bf3b4c1982417d93fdb4fbcbb8c1be.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/c73f6b724bc348c3a03d777dd6da2de8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeC1kcmFnb244ODk5_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/61c2ce79ab1b4026b3d6d71bb4eed87a.png