关于前端:万物皆可集成系列低代码对接微信小程序

近年来，微信小程序的开发热火朝天，很多挪动端利用为了更不便被大家所应用的，都步入了小程序的行列

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

首先，家喻户晓，微信小程序的开发，微信官网有本人的一套规范和开发模式，对于通过低代码开发平台开发的挪动端 H5 页面，如何嵌入微信小程序中，这个在网上有很多的教程，单纯的页面级集成依附小程序提供的 web-view 组件就能够实现，然而在理论的开发过程中，第三方在和微信小程序集成时，除了页面级集成外，还须要集成用户，数据等等。

微信登录流程

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

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

1. 通过开发微信小程序首页，点击按钮执行受权登录逻辑（微信小程序本身不反对 onLoad 办法中间接去获取用户受权信息），登录胜利后返回 code 信息。
2. 匿名调用活字格提供的 GetRequestToken 服务端命令（可视化逻辑），实现 OAuth 受权认证，获取 Authorization 信息，具备权限的服务端命令在被调用时，必须将 Authorization 作为 Header，否则会申请失败。
3. 调用活字格提供的 Code2Session 服务端命令，在 Code2Seesion 服务端命令中，可视化的调用微信的接口服务 API，传递 appid，appsecret，code 等参数，获取微信小程序用户的 openid（以后小程序的对立身份信息）和 unionid（微信开放平台的对立身份信息）。
4. 将微信小程序用户的 openid 作为活字格的惟一身份信息，调用活字格的提供的 AddUserAndLogin 服务端命令，在活字格的服务端命令逻辑中，校验活字格用户治理中是否存在以微信小程序 openid 为用户名的活字格用户，如果存在，调用 GetSSOToken 服务端命令，实现单点登录；如果用户不存在，执行增加用户逻辑，再实现单点登录。
5. GetSSOToken 服务端命令会返回带有 token 的活字格利用地址。
6. 通过微信小程序的 navigateTo 办法，跳转一个新的小程序页面，在小程序页面中嵌入 web-view，关上 GetSSOToken 返回的 url 地址即可。
7. 单点登录实现后，将以后用户的 openid 存入微信小程序的 storage 中，以便下次访问时，实现主动登录。
8. 二次拜访时，获取微信小程序的 storage 的 openid 信息，如果存在，反复第 5，6，7 步；如果不存在，从 1 步从新运行。

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

操作步骤：

筹备环境

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

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

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

https://www.grapecity.com.cn/… 书签：活字格低代码开发平台 – 活字格企业级低代码开发平台 | 通过低代码疾速开发企业级 Web 利用 – 葡萄城官网

4.HBuilder X（为了对立小程序开发逻辑，应用 uni-app 开发微信小程序。）

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

5. 微信开发者工具

https://developers.weixin.qq…. 书签：微信开发者工具下载地址与更新日志 | 微信凋谢文档

环境配置

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

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

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

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

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

2. 活字格配置

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

附件地址：

https://gitee.com/grape-city-… 书签：https://gitee.com/grape-city-…

Config 配置

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

ForguncyConfig：用于存储活字格 OAuth 鉴权参数（client\_id，client\_secret，scope，grant\_type），供服务端命令应用，参数获取参考下方链接

https://gcdn.grapecity.com.cn… 书签：活字格 7.0 新性能解密：二十八，反对 OAuth 2.0 认证 – 活字格专区 – 专题教程 – 葡萄城产品技术社区

服务端命令配置

GetRequestToken（匿名调用）：活字格鉴权申请，被微信小程序调用，鉴权胜利后，更新 access\_token，token\_due\_time，token\_type 至 ForguncyConfig 表中（access\_token 有效期内不反复申请），返回 Authorization 给接口申请方。

Code2SessionID（需鉴权调用）：通过微信小程序登录用户 code 调用微信接口，换取用户 openid 和 unionid，被微信小程序调用，返回 openid 和 unionid 给接口申请方。

AddUserAndLogin（需鉴权调用）：通过微信小程序用户 UserInfo 信息，openid 和 unionid，校验活字格中用户是否存在，创立用户并调用单点登录逻辑，返回 openid 和 redirectURL（活字格利用已受权 URL 地址）

GetSSOToken（需鉴权调用）：通过用户名（openid）和活字格利用 URL 地址，调用活字格 SSO 单点登录接口实现单点登录（单点登录明码从活字格设计器中获取，教程下方链接），返回 openid 和 redirectURL（活字格利用已受权 URL 地址）

https://help.grapecity.com.cn… 书签：第三十六章 单点登录 – 活字格 V8 帮忙手册 – 葡萄城产品文档核心

GetMiniWechatConfig（公有服务端命令）：被 Code2SessionID 服务端命令调用，获取微信小程序的配置信息。

用户治理

开发时用户治理和治理控制台中的用户须要手动增加自定义属性，用于存储注册用户的微信 UserInfo 信息

https://help.grapecity.com.cn… 创立用户 -4. 用户自定义属性书签：创立用户 – 活字格 V8 帮忙手册 – 葡萄城产品文档核心

利用公布

应用一般认证进行利用公布（必须是具备内部备案域名的云主机），获取活字格利用拜访地址

HBuilderX 和微信开发者工具配置

HBuilderX 创立微信小程序（可参考 uni-app 疾速上手教程，创立教程绝对繁琐，举荐间接在 HBuilderX 中关上下载源文件关上即可）

https://uniapp.dcloud.net.cn/… 书签：uni-app 官网

抉择默认模板，Vue 版本抉择为 3 即可

关上 uni-app 工程文件

1. 批改 manifest.json，配置微信小程序 AppID

2. 批改微信小程序首页 index.vue，配置本人的活字格利用 URL 地址，活字格服务器 URL 地址，以及活字格 OAuth 鉴权 client\_id，其余代码不须要批改，当然，如果对首页有 UI 方面的调整，可自行进行代码编写。

活字格利用 URL 地址：http(s):// 域名: 端口号 / 利用名

活字格服务器 URL 地址：http(s):// 域名:22345

3. 首页背景图如果想要调整，能够替换 static 文件下的 background.png（代码查看时要求图片大小不能超过 20K，请自行压缩）

4. 能够在 HBuilderX 中模仿运行微信小程序，第一次应用须要配置小程序安装文件夹，如果启动失败，请查看微信开发者工具的设置中是否开启了服务端口，同时，集体微信账号须要增加到微信开发者治理中，否则无奈应用微信开发者工具调试。

5. 调试时因为须要获取 UserInfo 信息，请在微信开发者工具详情中，增加微信小程序 AppID

6. 发行微信小程序

发行胜利后，能够在微信小程序中查看到开发版本，提交审核即可

此时能够通过体验版在手机端体验，审核通过后，能够在小程序中搜寻拜访

该块临时无奈转换。

拓展浏览

万物皆可集成系列：低代码对接企企云实现数据集成
万物皆可集成系列：低代码如何不成为数据孤岛
万物皆可集成系列：活字格对接泛微 e -cology