CabloyJS一站式助力微信、企业微信、钉钉开发 - 微信篇

前言

现在软件开发不仅要面对前端碎片化，还要面对后端碎片化。针对前端碎片化，CabloyJS提供了pc=mobile+pad的跨端自适应方案，参见：自适应布局：pc = mobile + pad

在这里，咱们重点要解决的是后端碎片化。比如要开发一个业务系统，既需要与微信、企业微信整合，又需要与钉钉整合，该如何设计整个架构呢？

其实，不论是微信、企业微信，还是钉钉，面向实际业务层面的API都不复杂，复杂的是各自独立的账号体系如何与业务系统打通的问题。当账号接口对接完成，后续的业务开发就很顺畅了

CabloyJS设计了一套用户系统与身份认证系统完全分离的机制，从而可以实现一个用户可以绑定多种登录方式。而且，这些不同的登录方式都是通过Provider的组件方式动态插入系统的。所以，剩下的工作就是按照Provider的方式来分别对接微信、企业微信和钉钉了

相关文章参考

• Cabloy-通用的身份认证机制
• Cabloy-微信
• Cabloy-企业微信
• Cabloy-钉钉

Cabloy-微信是什么

Cabloy-微信是基于CabloyJS全栈业务开发框架开发的微信接口模块，当前整合了微信公众号、微信Web登录和微信小程序的接口，达到开箱即用的使用效果。在Cabloy-微信的基础上，可以很方便的开发各类微信业务系统

核心目标

微信开发最复杂的就是账号体系对接，比如：

1. 在消息推送系统中，对新用户进行注册
2. 通过网页登录，对新用户进行注册
3. 通过微信小程序登录，对新用户进行注册
4. 如果启用微信开放平台，如何通过unionid关联同一用户
5. 如果系统已经运行一段时间，再启用unionid机制，如果关联旧账号

一旦完成了这些场景下的账号体系对接，真正的业务开发就很简单了

因此，Cabloy-微信模块的核心目标，就是自动完成这些场景下的账号体系对接，我们所需要做的就是提供一些配置参数，然后就可以愉快的开启业务逻辑的开发了

特性

基于CabloyJS全栈框架提供的便利性和灵活性，Cabloy-微信主要有如下特性:

1. 一站式整合

当前整合了微信公众号、微信Web登录和微信小程序的接口，具体如下：

场景	名称	说明
微信公众号	消息推送系统	自动完成接口对接，并自动进行用户注册
微信公众号	网页登录	自动跳转微信登录，并自动进行用户注册
微信公众号	网页JSSDK	自动注入JSSDK，并自动完成配置
微信Web登录	只需提供appID和appSecret，即可自动完成登录接口对接
微信小程序	客服系统	自动完成接口对接
微信小程序	后台登录接口	自动完成接口对接，并自动进行用户注册
微信小程序	前端SDK	提供SDK，便于微信小程序前端直接访问CabloyJS后端API
微信开放平台	unionid	自动匹配账户，自动聚敛

2. 开箱即用

只需配置好微信账号参数，所有接口自动完成对接

3. 自动聚敛

我们知道，通过微信开放平台提供的unionid机制，可以为微信公众号和微信小程序提供同一身份。但是在实际场景中，往往先开发并部署了微信公众号和微信小程序。这时候，二者的用户账户是独立的。那么当我们配置好了微信开放平台的unionid机制后，以前独立的用户账户会自动进行合并。这种机制，我们称之为自动聚敛

4. 多小程序支持

微信公众号可以关联多个微信小程序，因此，模块也提供了多小程序支持。如果启用了unionid机制，这些小程序同样也可以实现统一身份的打通

5. 多租户/多站点支持

通过CabloyJS提供的多实例特性，可以实现多租户/多站点支持，比如为不同的企业提供微信服务。请参见：EggBornJS：多实例

新建CabloyJS项目

在进行后续模块的安装之前，您必须先创建一个CabloyJS项目

请务必参照文档步骤配置MySQL数据库连接参数、Redis连接参数

请参见：指南：快速开始

安装微信模块

安装微信模块a-wechat

$ npm i egg-born-module-a-wechat

安装微信测试模块（可选）

微信测试模块用于演示如何在模块a-wechat的基础上进行具体的业务开发（同时包含微信小程序的demo程序）。有两种方式来使用微信测试模块：

1. 安装到node_modules

如果仅仅是预览效果，可以直接安装到{project}/node_modules

$ npm i egg-born-module-test-wechat

2. 安装到src/module

可以将测试模块安装到{projecct}/src/module，然后在此模块的基础上进行自定义开发

$ mv {project}/node_modules/egg-born-module-test-wechat src/module/test-wechat

配置微信参数

直接在项目配置文件中配置微信公众号、Web微信登录和微信小程序的参数

src/backend/config/config.default.js

// modules
config.modules = {
  'a-wechat': {
    account: {
      // 微信公众号
      public: {
        appID: 'wxf27f7550a33caaaa',
        appSecret: 'bbbb6a3addddbccccc200f973e91aaaa',
        token: 'CabloyJS',
        encodingAESKey: 'qHvLnaaaabufbbbbIbkRBcccctxUIBGddddCo5aeeee',
        message: {
          reply: {
            // 默认回复
            default: 'You are welcome!',
            // 当关注公众号时的回复
            subscribe: 'You are subscribed!',
          },
        },
      },
      // web登录
      web: {
        appID: '',
        appSecret: '',
      },
      // 微信小程序
      minis: {
        default: {
          appID: 'wx823df04764b9bbbb',
          appSecret: 'c2eaaaada3bbbbe4073cccc381bbdddd',
          token: 'CabloyJS',
          encodingAESKey: 'kakPaaaa48mbubbbbRe0w0ccccGbj1v0rWowctVdddd',
        },
      },
    },
  },
};

• account.public: 微信公众号
• account.web: 支持微信登录Web网站，需要事先通过微信开放平台申请网站应用，获得appID和appSecret
• account.minis: 支持多个微信小程序。为了实际开发上的便利，我们默认提供一个default小程序。如果需要开发其他微信小程序，直接在minis添加新的配置即可

运行

启动后端服务

$ npm run dev:backend

启动前端服务

$ npm run dev:front

nginx配置

由于微信应用一定要绑定域名。为了支持开发调试，可以有不同的策略。如果我们想在服务器上配置开发环境，然后通过nginx把前端服务和后端服务反向代理给前端，请参见：nginx配置

如何访问系统

1. 进入后台管理页面

• 网址：http://yourdomain.com/
• 用户名：root
• 密码：123456

2. 微信公众号网页

在微信中或微信开发者工具中直接访问首页，系统会自动进行微信登录

• 首页：http://yourdomain.com/

3. 微信Web登录

在浏览器中直接访问首页，登录页面会自动显示微信登录按钮，点击按钮，即可显示二微信，通过手机微信扫描，自动完成登录

• 首页：http://yourdomain.com/

微信小程序开发

测试模块test-wechat已经包含了一个微信小程序的demo程序，使用步骤如下：

1. 在微信开发者工具中直接导入demo程序，目录路径：{project}/src/module/test-wechat/front/demo/miniprogram

2. 修改小程序中的appid，文件路径：{project}/src/module/test-wechat/front/demo/miniprogram/project.config.json

3. 修改初始化参数：

{project}/src/module/test-wechat/front/demo/miniprogram/app.js

// 初始化cabloy
const cabloyOptions = {
  base: {
    scene: 'default',
    locale: 'en-us',
  },
  api: {
    baseURL: 'http://yourdomain.com',
  },
};
this.cabloy = Cabloy(this, cabloyOptions);

默认对应的是default小程序，如果要开发其他小程序，只需修改如下参数

名称	说明
base.scene	小程序场景名，默认为default
base.locale	前端默认使用的语言
api.baseURL	后端服务的API地址

相关链接

• 官网: https://cabloy.com/
• GitHub: https://github.com/zhennann/cabloy