近年来,微信小程序的开发如火如荼,很多移动端应用为了更方便被大家所使用的,都步入了小程序的行列
那么对于低代码平台开发的移动端应用是否可以和小程序集成呢?这里我以微信小程序为例。为大家介绍如何在
首先,众所周知,微信小程序的开发,微信官方有自己的一套标准和开发模式,对于通过低代码开发平台开发的移动端 H5 页面,如何嵌入微信小程序中,这个在网上有很多的教程,单纯的页面级集成依靠小程序提供的 web-view 组件就可以实现,但是在实际的开发过程中,第三方在和微信小程序集成时,除了页面级集成外,还需要集成用户,数据等等。
如何将微信的用户同步到第三方,小程序授权登录后自动跳转第三方页面,是所有第三方平台集成微信小程序的问题,具体,以小程序的登录流程为例:
上图中,开发者服务器就是第三方的平台服务,这里我以企业级低代码平台活字格(下文均以活字格代替)作为第三方的平台,具体的流程步骤如下:
通过上述的流程步骤,活字格集成微信小程序的步骤大家也有了一定的了解,那具体我们该如何做呢?
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 给接口请求方。
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/pages/viewpage.action?pageId=72363687 书签:第三十六章 单点登录 - 活字格 V8 帮助手册 - 葡萄城产品文档中心
GetMiniWechatConfig (私有服务端命令):被 Code2SessionID 服务端命令调用,获取微信小程序的配置信息。
用户管理
开发时用户管理和管理控制台中的用户需要手动添加自定义属性,用于存储注册用户的微信 UserInfo 信息
头像 | 文字型 |
---|---|
性别 | 文字型 |
国家 | 文字型 |
省 | 文字型 |
城市 | 文字型 |
语言 | 文字型 |
unionid | 文字型 |
https://help.grapecity.com.cn/pages/viewpage.action?pageId=72356598#id-创建用户-4.用户自定义属性书签:[创建用户 - 活字格 V8 帮助手册 - 葡萄城产品文档中心]( https://help.grapecity.com.cn/pages/viewpage.action?pageId=72356598#id-创建用户-4.用户自定义属性)
应用发布
使用普通认证进行应用发布(必须是具有外部备案域名的云主机),获取活字格应用访问地址
HBuilderX 创建微信小程序(可参考 uni-app 快速上手教程,创建教程相对繁琐,推荐直接在 HBuilderX 中打开下载源文件打开即可)
https://uniapp.dcloud.net.cn/quickstart-hx.html 书签: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