【对接方案】微信小程序中嵌入活字格

微信小程序，相信大家都用过，那么用活字格做的应用或系统能否也放在微信小程序中供用户访问使用呢？


答案是，当然可以~

活字格如今作为一款如此强大的专业低代码开发工具，嵌入小程序当然也是洒洒水啦。

那今天就为大家带来活字格嵌入微信小程序的解决方案~~~

一、前期准备

我们都知道，不打无准备之仗，所以，在开始之前我们要先进行一些准备工作。

需要准备的如下：

• 活字格设计器
• 活字格服务管理器
• 可供外网访问的服务器
• 备案后的公网域名
• 微信开发者工具
• 微信小程序
• 测试手机
• 代码编辑器（可选）
  

OK，接下来详细说明下以上需要准备的内容：

1、活字格设计器，当前测试使用的活字格设计器版本为9.0.4.0；
2、活字格服务管理器，和设计器版本保持一致，版本为9.0.4.0；
3、可供外网访问的服务器，为了测试方便，我使用的是活字格云，即自带部署的域名及服务器环境；
4、备案后的公网域名，需要自行在域名服务商中购买并进行备案，一般推荐在阿里云、腾讯云或华为云上购买域名服务，并进行正规备案后和服务器进行DNS解析绑定即可，这里用做测试使用了活字格云，所以这一步省略；
5、微信开发者工具，用于调试微信小程序，可在微信官方下载安装：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)；
6、微信小程序，需要提前在微信小程序官网进行注册，这里会有一些微信官方的限制，后面会在对接过程中具体进行说明；
7、测试手机，建议IOS系统和安卓系统手机各准备一部用于真机测试；
8、代码编辑器（可选），微信开发者工具本身提供代码书写能力，如不符合个人编码习惯，可借助其他专业代码编辑器，如VS code、IDEA等。

二、微信小程序注册

大家准备好以上所需要的环境后，接下来就和大家说明一下微信小程序的注册及相关注意事项。

来到微信小程序的注册地址：微信小程序

填写对应的注册信息，并进行注册，这里需要注意的是：

微信小程序一定要注册为非个人小程序，微信针对此有限制：如果为个人小程序，则web-view在个人类型小程序中无法使用，具体可以参考微信文档：web-view | 微信开放文档 (qq.com)

账号注册完成后，在左侧菜单中选择《开发》---《开发管理》---《开发设置》中，拿到AppID（小程序ID）和AppSecret（小程序密钥）。

接着在下面《服务器域名》中配置request合法域名，这里的request合法域名需要填写的是上面准备活字格应用发布后的备案合法域名。

除此以外，还要配置对应的《业务域名》，这里的域名还是配置为已备案的https域名。

配置这个域名时，需要下载一个txt的校验文件，然后把这个文件放在域名根目录下，微信验证后就可以了。

三、活字格配置

活字格对接的工程文件下载请戳  -------->>>    微信小程序对接示例工程demo.7z (18.51 MB, 下载次数: 560)

2023-6-29 10:24 上传

点击文件名下载附件

注册并拿到微信小程序的AppID（小程序ID）和AppSecret（小程序密钥）后，此时我们可以来到我们的活字格设计器及服务管理器中进行配置。

设计器：
打开自己的工程，将下面示例工程中的数据表文件夹《MiniProgramConfig》和服务端命令文件夹《微信小程序配置服务端命令》导入到自己的工程中：

导入后，打开表《MiniWechatConfig》，将刚才注册微信小程序时拿到的AppKey和AppSecret替换；

服务管理器：
然后来到我们的活字格服务管理器，在左侧菜单栏《设置》---《安全设置》---《第三方授权》中，添加客户端授权；

保存后拿到《客户端标识符》、《客户端密钥》后，回到设计器工程中，在表《ForguncyConfig》中，替换对应的client_id，client_secret。

字段	值
client_id	<客户端标识符>
client_secret	<客户端密钥>
scope	FGC_AllAppsServerCommands
grant_type	client_credentials

ok，至此将工程中两个表所需要的值填写完成后，继续进行下一步~

四、微信小程序对接

接下来，从以下github仓库中下载微信小程序代码：葡萄城/活字格低代码平台对接微信小程序 (gitee.com)

然后在微信开发者工具中打开此项目，在：

pages
|---confirm_login
      |---user_login.js

文件中，填写baseURL、serverURL、client_ID、ssoPassword，如下表：

参数名	值
baseURL	填写活字格发布后带对应应用名的地址
serverURL	填写活字格服务器备案域名地址
client_ID	活字格服务管理器中的客户端标识符
ssoPassword	活字格设计器中配置的单点登录密码

配置完成后，这里说明一下活字格应用单点登录微信小程序的流程图，可以参考下图：

五、发布与部署

完成以上工作后，到此，你已经距离对接微信小程序成功了一半~~~！！！

发布活字格工程，如果是已发布的工程，记得选择《半覆盖发布》或《全覆盖发布》；

具体的对接步骤可以参看下面的这个视频：

视频中详细了微信小程序工程代码的大致组成以及发布及部署方法。

上传代码，微信小程序审核通过后发布，并在微信小程序中正常发布后，就可以在微信中搜索小程序并访问了。

演示视频请看：

小程序体验环境可以扫码：

谢谢大家的耐心阅读~~~