介绍

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

  1. 消息系统
  2. 网页登录
  3. 网页前端JSSDK
  4. 微信网页布局
  5. 微信API调用

1. 消息系统

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

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

1.1 meta

test-wechat/backend/src/meta.js

event: {
      implementations: {
        'a-wechat:wechatMessage': 'event/wechatMessage',
    },

1.2 路由

test-wechat/backend/src/routes.js

{ method: 'post', path: 'event/wechatMessage', controller: event, middlewares: 'inner', meta: { auth: { enable: false } } },

1.3 Controller

test-wechat/backend/src/controller/event.js

    async wechatMessage() {
      const res = await this.service.event.wechatMessage({
        event: this.ctx.request.body.event,
        data: this.ctx.request.body.data,
      });
      this.ctx.success(res);
    }

1.4 Service

test-wechat/backend/src/service/event.js

    async wechatMessage({ event, data }) {
      const message = data.message;
      if (message.MsgType === 'text') {
        event.break = true;
        return {
          ToUserName: message.FromUserName,
          FromUserName: message.ToUserName,
          CreateTime: new Date().getTime(),
          MsgType: 'text',
          Content: `${this.ctx.text.locale('zh-cn', 'Reply')}: ${message.Content}`,
        };
      }
    }

event.break=true

  • 由于同一个事件可以有多个模块进行订阅,并提供自定义的逻辑。如果想阻止后续的订阅响应,可以通过event.break=true进行终止

2. 网页登录

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

3. 网页前端JSSDK

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

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

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

  created() {
    const action = {
      actionModule: 'a-wechat',
      actionComponent: 'jssdk',
      name: 'config',
    };
    this.$meta.util.performAction({ ctx: this, action }).then(res => {
      this.wx = res && res.wx;
    }).catch(e => {
      this.$view.toast.show({ text: e.errMsg });
    })
  },
  methods: {
    onPerformScanQRCode() {
      this.wx.scanQRCode({
        needResult: 1,
        scanType: ['qrCode', 'barCode'],
        success: (res) => {
          this.$view.toast.show({ text: res.resultStr });
        }
      });
    }
  }
  1. 先通过this.$meta.util.performAction调用模块a-wechat提供的组件,返回wx对象
  2. 调用wx对象执行扫描二维码的微信接口

4. 微信网页布局

CabloyJS可以一站式开发PC端和移动端的网页,此外,CabloyJS通过event机制可以灵活定制不同场景下前端页面的布局组合

测试模块test-wechat演示了如何定制微信公号场景下的前端布局:

4.1 meta

test-wechat/backend/src/meta.js

event: {
      implementations: {
        'a-base:loginInfo': 'event/loginInfo',
    },

4.2 路由

test-wechat/backend/src/routes.js

{ method: 'post', path: 'event/loginInfo', controller: event, middlewares: 'inner', meta: { auth: { enable: false } } },

4.3 Controller

test-wechat/backend/src/controller/event.js

    async loginInfo() {
      const res = await this.service.event.loginInfo({
        event: this.ctx.request.body.event,
        data: this.ctx.request.body.data,
      });
      this.ctx.success(res);
    }

4.4 Service

test-wechat/backend/src/service/event.js

    async loginInfo({ /* event,*/ data }) {
      const info = data.info;
      const provider = info.user && info.user.provider;
      if (provider && provider.module === 'a-wechat' && provider.providerName === 'wechat') {
        info.config = extend(true, info.config, {
          modules: {
            'a-layoutmobile': {
              layout: {
                login: '/a/login/login',
                loginOnStart: true,
                toolbar: {
                  tabbar: true, labels: true, bottomMd: true,
                },
                tabs: [
                  { name: 'Test', tabLinkActive: true, iconMaterial: 'group_work', url: '/test/wechat/test/index' },
                  { name: 'Home', tabLinkActive: false, iconMaterial: 'home', url: '/a/base/menu/list' },
                  { name: 'Mine', tabLinkActive: false, iconMaterial: 'person', url: '/a/user/user/mine' },
                ],
              },
            },
          },
        });
      }
    }

判断info.user.provider,如果是通过微信公众号登录的账户,就提供自定义的前端布局参数

5. 微信API调用

模块a-wechat通过中间件机制提供了一个中间件wechat,如果要在后端API接口中访问微信API,只需要在API接口路由中指定中间件wechat即可

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

下面以JSSDK Config为例:

5.1 路由

a-wechat/backend/src/routes.js

{ method: 'post', path: 'jssdk/jsconfig', controller: jssdk, middlewares: 'wechat' },

5.2 Controller

a-wechat/backend/src/controller/jssdk.js

    async jsconfig() {
      const res = await this.service.jssdk.jsconfig({
        url: this.ctx.request.body.url,
      });
      this.ctx.success(res);
    }

5.3 Service

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

    async jsconfig({ url }) {
      // config
      const config = this.ctx.config.account.public;
      // params
      const params = {
        debug: config.jssdk.debug,
        jsApiList: config.jssdk.jsApiList,
        url,
      };
      return await this.ctx.meta.wechat.getJsConfig(params);
    }

直接通过this.ctx.meta.wechat访问相应的微信API