共计 3635 个字符,预计需要花费 10 分钟才能阅读完成。
近年来,微信小程序的开发热火朝天,很多挪动端利用为了更不便被大家所应用的,都步入了小程序的行列
那么对于低代码平台开发的挪动端利用是否能够和小程序集成呢?这里我以微信小程序为例。为大家介绍如何在
首先,家喻户晓,微信小程序的开发,微信官网有本人的一套规范和开发模式,对于通过低代码开发平台开发的挪动端 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/… 书签:活字格低代码开发平台 – 活字格企业级低代码开发平台 | 通过低代码疾速开发企业级 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 信息
头像 | 文字型 |
---|---|
性别 | 文字型 |
国家 | 文字型 |
省 | 文字型 |
城市 | 文字型 |
语言 | 文字型 |
unionid | 文字型 |
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