介绍

微信公众号接口对接,主要涉及以下几个方面:

  1. 模块Config
  2. 消息推送
  3. 网页登录
  4. 网页前端JSSDK
  5. 微信网页布局
  6. 微信API调用

1. 模块Config

CabloyJS提供了两种方式来配置Config参数:

  1. 后台管理页面:页面路径为系统应用/基础管理/认证管理

  2. 项目配置:直接在项目配置文件中覆盖模块Config中的参数,从而配置与微信公众号有关的信息

关于如何覆盖模块Config,请参见:Config

a-wechat/backend/src/config/config.js

  1. 1 // account.wechat
  2. 2 config.account.wechat = {
  3. 3 client: 'wechat',
  4. 4 scope: 'snsapi_userinfo',
  5. 5 appID: '',
  6. 6 appSecret: '',
  7. 7 message: {
  8. 8 token: appInfo.name,
  9. 9 encodingAESKey: '',
  10. 10 reply: {
  11. 11 default: 'You are welcome!',
  12. 12 subscribe: 'You are subscribed!',
  13. 13 },
  14. 14 },
  15. 15 jssdk: {
  16. 16 // debug: true,
  17. 17 debug: false,
  18. 18 jsApiList,
  19. 19 },
  20. 20 };

2. 消息推送

模块a-wechat已经对消息推送的通讯机制进行了封装,并且通过event机制进行扩展。如果我们要对用户发送的消息进行定制化的回复,可以这样操作:

关于event机制,请参见:后端事件

2.0 消息推送配置

名称 说明
服务器地址(URL) https://xxx.yyy.com/api/a/wechat/message/wechat/index
令牌(Token) 随机值
消息加解密密钥(EncodingAESKey) 随机值
消息加解密方式 安全模式(推荐)

2.1 meta

test-wechat/backend/src/meta.js

  1. 1event: {
  2. 2 implementations: {
  3. 3 'a-wechat:wechatMessage': 'wechatMessage',
  4. 4 },
  5. 5},
名称 说明
a-wechat:wechatMessage 模块名称:事件名称
wechatMessage 响应事件的Bean组件

2.2 定义Bean组件

在本示例中,响应事件a-wechat:wechatMessage,回复用户发送的消息

src/module/test-wechat/backend/src/bean/event.wechatMessage.js

  1. 1module.exports = ctx => {
  2. 2 // const moduleInfo = ctx.app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3 class eventBean {
  4. 4
  5. 5 async execute(context, next) {
  6. 6 const data = context.data;
  7. 7 const message = data.message;
  8. 8 if (message.MsgType === 'text') {
  9. 9 context.result = {
  10. 10 ToUserName: message.FromUserName,
  11. 11 FromUserName: message.ToUserName,
  12. 12 CreateTime: new Date().getTime(),
  13. 13 MsgType: 'text',
  14. 14 Content: `${ctx.text.locale('zh-cn', 'Reply')}: ${message.Content}`,
  15. 15 };
  16. 16 // break
  17. 17 return;
  18. 18 }
  19. 19 // next
  20. 20 await next();
  21. 21 }
  22. 22
  23. 23 }
  24. 24
  25. 25 return eventBean;
  26. 26};
名称 说明
context.data 外部传入的参数
next event采用洋葱圈模型,调用next从而允许其他事件实现的执行

2.3 注册Bean组件

src/module/test-wechat/backend/src/beans.js

  1. 1const eventWechatMessage = require('./bean/event.wechatMessage.js');
  2. 2
  3. 3module.exports = app => {
  4. 4 const beans = {
  5. 5 // event
  6. 6 'event.wechatMessage': {
  7. 7 mode: 'ctx',
  8. 8 bean: eventWechatMessage,
  9. 9 },
  10. 10 };
  11. 11 return beans;
  12. 12};
注册名称 场景 所属模块 global beanFullName
wechatMessage event test-wechat false test-wechat.event.wechatMessage

3. 网页登录

模块a-wechat自动判断,如果当前网页处于微信app中,会自动转向微信登录,然后自动进行微信用户注册

4. 网页前端JSSDK

模块a-wechat提供了便捷的组件,可以自动注入微信JSSDK,并且自动进行config配置

测试模块test-wechat演示了如何调用微信的二维码扫描操作:

test-wechat/front/src/pages/test/index.vue

  1. 1 created() {
  2. 2 const action = {
  3. 3 actionModule: 'a-wechat',
  4. 4 actionComponent: 'jssdk',
  5. 5 name: 'config',
  6. 6 };
  7. 7 this.$meta.util.performAction({ ctx: this, action }).then(res => {
  8. 8 this.wx = res && res.wx;
  9. 9 }).catch(e => {
  10. 10 this.$view.toast.show({ text: e.errMsg });
  11. 11 })
  12. 12 },
  13. 13 methods: {
  14. 14 onPerformScanQRCode() {
  15. 15 this.wx.scanQRCode({
  16. 16 needResult: 1,
  17. 17 scanType: ['qrCode', 'barCode'],
  18. 18 success: (res) => {
  19. 19 this.$view.toast.show({ text: res.resultStr });
  20. 20 }
  21. 21 });
  22. 22 }
  23. 23 }
  1. 先通过this.$meta.util.performAction调用模块a-wechat提供的组件,返回wx对象
  2. 调用wx对象执行扫描二维码的微信接口

5. 微信网页布局

CabloyJS可以创建App应用,一个App应用是菜单页面+主页+用户页面组合。我么可以专门针对微信公众号场景定义一个专属的App应用

测试模块test-wechat演示了如何定制微信公号场景下的App应用:

  • App应用配置:src/suite/test-party/modules/test-wechat/backend/src/config/static/app/appTest.js

  • App菜单页面配置:src/suite/test-party/modules/test-wechat/backend/src/config/static/layout/layoutAppMenuTest.js

6. 微信API调用

模块a-wechat提供了全局Bean组件wechat,用于调用所有微信API

微信API基于node-webot/co-wechat-api。为了便于更灵活的添加新API,CabloyJS对主仓库发起了一个新分支,详细的API清单请参见:co-wechat-api

6.1 API: 微信公众号

通过ctx.bean.wechat.app访问微信公众号API

src/module-system/a-wechat/backend/src/service/jssdk.js

  1. 1module.exports = app => {
  2. 2 const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3 class JSSDK extends app.Service {
  4. 4 async jsconfig({ url }) {
  5. 5 ...
  6. 6 return await this.ctx.bean.wechat.app.getJsConfig(params);
  7. 7 }
  8. 8 }
  9. 9
  10. 10 return JSSDK;
  11. 11};

6.2 API: 微信小程序

通过ctx.bean.wechat.mini.{providerScene}访问微信小程序API

providerScene:是小程序的场景名,缺省为default

src/module-system/a-wechat/backend/src/service/authMini.js

  1. 1// mini
  2. 2const apiMini = this.ctx.bean.wechat.mini[providerScene];
  3. 3const res = await apiMini.code2Session(code);

6.3 API: util

通过ctx.bean.wechat.util访问相关的工具函数

7. 如何判断是否在微信公众号

由于CabloyJS后端架构的普适性,我们有时候需要判断调用后端API的前端环境是否是微信公众号,从而做出相应的处理

7.1 通过中间件判断

可以通过中间件inWechat来判断该api接口是否被微信公众号调用,如果不是则自动阻止后续逻辑的执行

src/module/test-wechat/backend/src/routes.js

  1. 1 {
  2. 2 method: 'post',
  3. 3 path: 'test/getOpenid',
  4. 4 controller: 'test',
  5. 5 middlewares: 'inWechat',
  6. 6 meta: {
  7. 7 inWechat: {
  8. 8 providerName: 'wechat',
  9. 9 providerScene: null,
  10. 10 },
  11. 11 },
  12. 12 },
名称 说明
meta.inWechat 中间件inWechat的参数
providerName 认证提供者名称,如果指定wechat,表示该api只能被微信公众号调用
providerScene 如果认证提供者支持多个场景,这里可以指定场景名

7.2 通过代码判断

可以直接通过代码进行判断

  1. 1ctx.bean.wechat.util.in({ providerName, providerScene })