V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GrapeCityChina
V2EX  ›  推广

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

  •  
  •   GrapeCityChina · 2023-01-03 16:08:04 +08:00 · 1040 次点击
    这是一个创建于 675 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    首先,众所周知,微信小程序的开发,微信官方有自己的一套标准和开发模式,对于通过低代码开发平台开发的移动端 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/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 和微信开发者工具配置

    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

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2848 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:09 · PVG 21:09 · LAX 05:09 · JFK 08:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.