介绍
微信公众号接口对接,主要涉及以下几个方面:
- 模块Config
- 消息推送
- 网页登录
- 网页前端JSSDK
- 微信网页布局
- 微信API调用
1. 模块Config
CabloyJS提供了两种方式来配置Config参数:
-
后台管理页面
:页面路径为系统应用/基础管理/认证管理
-
项目配置
:直接在项目配置文件中覆盖模块Config中的参数,从而配置与微信公众号有关的信息
关于如何
覆盖模块Config
,请参见:Config
a-wechat/backend/src/config/config.js
- 1 // account.wechat
- 2 config.account.wechat = {
- 3 client: 'wechat',
- 4 scope: 'snsapi_userinfo',
- 5 appID: '',
- 6 appSecret: '',
- 7 message: {
- 8 token: appInfo.name,
- 9 encodingAESKey: '',
- 10 reply: {
- 11 default: 'You are welcome!',
- 12 subscribe: 'You are subscribed!',
- 13 },
- 14 },
- 15 jssdk: {
- 16 // debug: true,
- 17 debug: false,
- 18 jsApiList,
- 19 },
- 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
- 1event: {
- 2 implementations: {
- 3 'a-wechat:wechatMessage': 'wechatMessage',
- 4 },
- 5},
名称 | 说明 |
---|---|
a-wechat:wechatMessage | 模块名称:事件名称 |
wechatMessage | 响应事件的Bean组件 |
2.2 定义Bean组件
在本示例中,响应事件a-wechat:wechatMessage
,回复用户发送的消息
src/suite-vendor/test-party/modules/test-wechat/backend/src/bean/event.wechatMessage.js
- 1module.exports = ctx => {
- 2 // const moduleInfo = ctx.app.meta.mockUtil.parseInfoFromPackage(__dirname);
- 3 class eventBean {
- 4
- 5 async execute(context, next) {
- 6 const data = context.data;
- 7 const message = data.message;
- 8 if (message.MsgType === 'text') {
- 9 context.result = {
- 10 ToUserName: message.FromUserName,
- 11 FromUserName: message.ToUserName,
- 12 CreateTime: new Date().getTime(),
- 13 MsgType: 'text',
- 14 Content: `${ctx.text.locale('zh-cn', 'Reply')}: ${message.Content}`,
- 15 };
- 16 // break
- 17 return;
- 18 }
- 19 // next
- 20 await next();
- 21 }
- 22
- 23 }
- 24
- 25 return eventBean;
- 26};
名称 | 说明 |
---|---|
context.data | 外部传入的参数 |
next | event采用洋葱圈 模型,调用next 从而允许其他事件实现 的执行 |
2.3 注册Bean组件
src/suite-vendor/test-party/modules/test-wechat/backend/src/beans.js
- 1const eventWechatMessage = require('./bean/event.wechatMessage.js');
- 2
- 3module.exports = app => {
- 4 const beans = {
- 5 // event
- 6 'event.wechatMessage': {
- 7 mode: 'ctx',
- 8 bean: eventWechatMessage,
- 9 },
- 10 };
- 11 return beans;
- 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 created() {
- 2 const action = {
- 3 actionModule: 'a-wechat',
- 4 actionComponent: 'jssdk',
- 5 name: 'config',
- 6 };
- 7 this.$meta.util.performAction({ ctx: this, action }).then(res => {
- 8 this.wx = res && res.wx;
- 9 }).catch(e => {
- 10 this.$view.toast.show({ text: e.errMsg });
- 11 })
- 12 },
- 13 methods: {
- 14 onPerformScanQRCode() {
- 15 this.wx.scanQRCode({
- 16 needResult: 1,
- 17 scanType: ['qrCode', 'barCode'],
- 18 success: (res) => {
- 19 this.$view.toast.show({ text: res.resultStr });
- 20 }
- 21 });
- 22 }
- 23 }
- 先通过
this.$meta.util.performAction
调用模块a-wechat
提供的组件,返回wx
对象 - 调用
wx
对象执行扫描二维码的微信接口
5. 微信网页布局
CabloyJS可以创建App应用
,一个App应用是菜单页面+主页+用户页面
组合。我么可以专门针对微信公众号场景定义一个专属的App应用
测试模块test-wechat
演示了如何定制微信公号场景下的App应用:
-
App应用配置:
src/suite-vendor/test-party/modules/test-wechat/backend/src/config/static/app/appTest.js
-
App菜单页面配置:
src/suite-vendor/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
- 1module.exports = app => {
- 2 const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
- 3 class JSSDK extends app.Service {
- 4 async jsconfig({ url }) {
- 5 ...
- 6 return await this.ctx.bean.wechat.app.getJsConfig(params);
- 7 }
- 8 }
- 9
- 10 return JSSDK;
- 11};
6.2 API: 微信小程序
通过ctx.bean.wechat.mini.{providerScene}
访问微信小程序API
providerScene
:是小程序的场景名,缺省为default
src/module-system/a-wechat/backend/src/service/authMini.js
- 1// mini
- 2const apiMini = this.ctx.bean.wechat.mini[providerScene];
- 3const res = await apiMini.code2Session(code);
6.3 API: util
通过ctx.bean.wechat.util
访问相关的工具函数
7. 如何判断是否在微信公众号
中
由于CabloyJS后端架构的普适性,我们有时候需要判断调用后端API的前端环境是否是微信公众号,从而做出相应的处理
7.1 通过中间件判断
可以通过中间件inWechat
来判断该api接口是否被微信公众号
调用,如果不是则自动阻止后续逻辑的执行
src/suite-vendor/test-party/modules/test-wechat/backend/src/routes.js
- 1 {
- 2 method: 'post',
- 3 path: 'test/getOpenid',
- 4 controller: 'test',
- 5 middlewares: 'inWechat',
- 6 meta: {
- 7 inWechat: {
- 8 providerName: 'wechat',
- 9 providerScene: null,
- 10 },
- 11 },
- 12 },
名称 | 说明 |
---|---|
meta.inWechat | 中间件inWechat 的参数 |
providerName | 认证提供者名称,如果指定wechat ,表示该api只能被微信公众号 调用 |
providerScene | 如果认证提供者支持多个场景,这里可以指定场景名 |
7.2 通过代码判断
可以直接通过代码进行判断
- 1ctx.bean.wechat.util.in({ providerName, providerScene })
评论: