万物皆可集成系列：低代码对接微信小程序

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 698 天前的主题，其中的信息可能已经有所发展或是发生改变。

近年来，微信小程序的开发如火如荼，很多移动端应用为了更方便被大家所使用的，都步入了小程序的行列

那么对于低代码平台开发的移动端应用是否可以和小程序集成呢？这里我以微信小程序为例。为大家介绍如何在

首先，众所周知，微信小程序的开发，微信官方有自己的一套标准和开发模式，对于通过低代码开发平台开发的移动端 H5 页面，如何嵌入微信小程序中，这个在网上有很多的教程，单纯的页面级集成依靠小程序提供的 web-view 组件就可以实现，但是在实际的开发过程中，第三方在和微信小程序集成时，除了页面级集成外，还需要集成用户，数据等等。

微信登录流程

如何将微信的用户同步到第三方，小程序授权登录后自动跳转第三方页面，是所有第三方平台集成微信小程序的问题，具体，以小程序的登录流程为例：

上图中，开发者服务器就是第三方的平台服务，这里我以企业级低代码平台活字格（下文均以活字格代替）作为第三方的平台，具体的流程步骤如下：

通过开发微信小程序首页，点击按钮执行授权登录逻辑（微信小程序自身不支持 onLoad 方法中直接去获取用户授权信息），登录成功后返回 code 信息。
匿名调用活字格提供的 GetRequestToken 服务端命令（可视化逻辑），实现 OAuth 授权认证，获取 Authorization 信息，具有权限的服务端命令在被调用时，必须将 Authorization 作为 Header ，否则会请求失败。
调用活字格提供的 Code2Session 服务端命令，在 Code2Seesion 服务端命令中，可视化的调用微信的接口服务 API ，传递 appid ，appsecret ，code 等参数，获取微信小程序用户的 openid （当前小程序的统一身份信息）和 unionid （微信开放平台的统一身份信息）。
将微信小程序用户的 openid 作为活字格的唯一身份信息，调用活字格的提供的 AddUserAndLogin 服务端命令，在活字格的服务端命令逻辑中，校验活字格用户管理中是否存在以微信小程序 openid 为用户名的活字格用户，如果存在，调用 GetSSOToken 服务端命令，实现单点登录；如果用户不存在，执行添加用户逻辑，再实现单点登录。
GetSSOToken 服务端命令会返回带有 token 的活字格应用地址。
通过微信小程序的 navigateTo 方法，跳转一个新的小程序页面，在小程序页面中嵌入 web-view ，打开 GetSSOToken 返回的 url 地址即可。
单点登录完成后，将当前用户的 openid 存入微信小程序的 storage 中，以便下次访问时，实现自动登录。
二次访问时，获取微信小程序的 storage 的 openid 信息，如果存在，重复第 5 ，6 ，7 步；如果不存在，从 1 步重新运行。

通过上述的流程步骤，活字格集成微信小程序的步骤大家也有了一定的了解，那具体我们该如何做呢？

操作步骤：

准备环境

1.微信小程序（ AppID ，AppSecret ）

2.云主机+外网备案域名（或者直接使用活字格云）

3.活字格设计器+活字格服务器（可从官网下载）

https://www.grapecity.com.cn/solutions/huozige 书签：活字格低代码开发平台 - 活字格企业级低代码开发平台|通过低代码快速开发企业级 Web 应用 - 葡萄城官网

4.HBuilder X （为了统一小程序开发逻辑，使用 uni-app 开发微信小程序。）

https://uniapp.dcloud.net.cn/书签：[uni-app 官网]( https://uniapp.dcloud.net.cn/)

5.微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 书签：微信开发者工具下载地址与更新日志 | 微信开放文档

环境配置

1.申请微信开放平台以及微信小程序并配置环境

a)设置中，注册微信开放平台账号并绑定微信小程序（未绑定公众平台的小程序无法获取 unionid ）

b)开发管理中，获取开发者 ID

c)开发管理中，获取小程序代码上传密钥（发行小程序时需要上传）以及将当前机器外网 IP 上传至 IP 白名单（发行小程序时会校验，可在发布时根据 IP 报错进行设置）

d)开发管理中，设置服务器域名以及业务域名，按照微信官方文档进行校验

2.活字格配置

打开附件中活字格的工程文件（.fgcc 文件），除了应用功能外，活字格工程文件中还提供了 2 个 config 数据表和 5 个服务端命令

附件地址：

https://gitee.com/grape-city-software/hzg-wechat-mini-program-source-code/tree/master/resource 书签：https://gitee.com/grape-city-software/hzg-wechat-mini-program-source-code/tree/master/resource

Config 配置

MiniWechatConfig：用于存储微信小程序的 AppID 和 AppSecret ，供服务端命令使用

ForguncyConfig：用于存储活字格 OAuth 鉴权参数（ client_id ，client_secret ，scope ，grant_type ），供服务端命令使用，参数获取参考下方链接

https://gcdn.grapecity.com.cn/showtopic-87565-1-13.html 书签：活字格 7.0 新功能解密：二十八，支持 OAuth 2.0 认证 - 活字格专区 - 专题教程 - 葡萄城产品技术社区

服务端命令配置

GetRequestToken （匿名调用）：活字格鉴权请求，被微信小程序调用，鉴权成功后，更新 access_token ，token_due_time ，token_type 至 ForguncyConfig 表中（ access_token 有效期内不重复请求），返回 Authorization 给接口请求方。