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

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

首先,家喻户晓,微信小程序的开发,微信官网有本人的一套规范和开发模式,对于通过低代码开发平台开发的挪动端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信息

头像文字型
性别文字型
国家文字型
文字型
城市文字型
语言文字型
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