近年來，微信小程序的開發(fā)如火如荼，很多移動端應用為了更方便被大家所使用的，都步入了小程序的行列

那么對于低代碼平臺開發(fā)的移動端應用是否可以和小程序集成呢？這里我以微信小程序為例。為大家介紹如何在

首先，眾所周知，微信小程序的開發(fā)，微信官方有自己的一套標準和開發(fā)模式，對于通過低代碼開發(fā)平臺開發(fā)的移動端H5頁面，如何嵌入微信小程序中，這個在網(wǎng)上有很多的教程，單純的頁面級集成依靠小程序提供的web-view組件就可以實現(xiàn)，但是在實際的開發(fā)過程中，第三方在和微信小程序集成時，除了頁面級集成外，還需要集成用戶，數(shù)據(jù)等等。

微信登錄流程

如何將微信的用戶同步到第三方，小程序授權登錄后自動跳轉第三方頁面，是所有第三方平臺集成微信小程序的問題，具體，以小程序的登錄流程為例：

上圖中，開發(fā)者服務器就是第三方的平臺服務，這里我以企業(yè)級低代碼平臺活字格（下文均以活字格代替）作為第三方的平臺，具體的流程步驟如下：

通過開發(fā)微信小程序首頁，點擊按鈕執(zhí)行授權登錄邏輯（微信小程序自身不支持onLoad方法中直接去獲取用戶授權信息），登錄成功后返回code信息。

匿名調用活字格提供的GetRequestToken服務端命令（可視化邏輯），實現(xiàn)OAuth授權認證，獲取Authorization信息，具有權限的服務端命令在被調用時，必須將Authorization作為Header，否則會請求失敗。

調用活字格提供的Code2Session 服務端命令，在Code2Seesion 服務端命令中，可視化的調用微信的接口服務API，傳遞appid，appsecret，code等參數(shù)，獲取微信小程序用戶的openid（當前小程序的統(tǒng)一身份信息）和unionid（微信開放平臺的統(tǒng)一身份信息）。

將微信小程序用戶的openid作為活字格的唯一身份信息，調用活字格的提供的AddUserAndLogin服務端命令，在活字格的服務端命令邏輯中，校驗活字格用戶管理中是否存在以微信小程序openid為用戶名的活字格用戶，如果存在，調用GetSSOToken服務端命令，實現(xiàn)單點登錄；如果用戶不存在，執(zhí)行添加用戶邏輯，再實現(xiàn)單點登錄。

GetSSOToken服務端命令會返回帶有token的活字格應用地址。

通過微信小程序的navigateTo方法，跳轉一個新的小程序頁面，在小程序頁面中嵌入web-view，打開GetSSOToken返回的url地址即可。

單點登錄完成后，將當前用戶的openid存入微信小程序的storage中，以便下次訪問時，實現(xiàn)自動登錄。

二次訪問時，獲取微信小程序的storage的openid信息，如果存在，重復第5，6，7步；如果不存在，從1步重新運行。

通過上述的流程步驟，活字格集成微信小程序的步驟大家也有了一定的了解，那具體我們該如何做呢？

操作步驟：

準備環(huán)境

1.微信小程序（AppID，AppSecret）

2.云主機+外網(wǎng)備案域名（或者直接使用活字格云）

3.活字格設計器+活字格服務器（可從官網(wǎng)下載）

https://www.grapecity.com.cn/solutions/huozige書簽：活字格低代碼開發(fā)平臺 - 活字格企業(yè)級低代碼開發(fā)平臺|通過低代碼快速開發(fā)企業(yè)級Web應用 - 葡萄城官網(wǎng)

4.HBuilder X（為了統(tǒng)一小程序開發(fā)邏輯，使用uni-app開發(fā)微信小程序。）

https://uniapp.dcloud.net.cn/書簽：uni-app官網(wǎng)

5.微信開發(fā)者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html書簽：微信開發(fā)者工具下載地址與更新日志 | 微信開放文檔

環(huán)境配置

1.申請微信開放平臺以及微信小程序并配置環(huán)境

a)設置中，注冊微信開放平臺賬號并綁定微信小程序（未綁定公眾平臺的小程序無法獲取unionid）

b)開發(fā)管理中，獲取開發(fā)者ID

c)開發(fā)管理中，獲取小程序代碼上傳密鑰（發(fā)行小程序時需要上傳）以及將當前機器外網(wǎng)IP上傳至IP白名單（發(fā)行小程序時會校驗，可在發(fā)布時根據(jù)IP報錯進行設置）

d)開發(fā)管理中，設置服務器域名以及業(yè)務域名，按照微信官方文檔進行校驗

2.活字格配置

打開附件中活字格的工程文件（.fgcc文件），除了應用功能外，活字格工程文件中還提供了2個config數(shù)據(jù)表和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鑒權參數(shù)（client_id，client_secret，scope，grant_type），供服務端命令使用，參數(shù)獲取參考下方鏈接

https://gcdn.grapecity.com.cn/showtopic-87565-1-13.html書簽：活字格7.0新功能解密：二十八，支持 OAuth 2.0 認證 - 活字格專區(qū) - 專題教程 - 葡萄城產(chǎn)品技術社區(qū)

服務端命令配置

GetRequestToken（匿名調用）：活字格鑒權請求，被微信小程序調用，鑒權成功后，更新access_token，token_due_time，token_type至ForguncyConfig表中（access_token有效期內(nèi)不重復請求），返回Authorization給接口請求方。

Code2SessionID（需鑒權調用）：通過微信小程序登錄用戶code調用微信接口，換取用戶openid和unionid，被微信小程序調用，返回openid和unionid給接口請求方。

AddUserAndLogin（需鑒權調用）：通過微信小程序用戶UserInfo信息，openid和unionid，校驗活字格中用戶是否存在，創(chuàng)建用戶并調用單點登錄邏輯，返回openid和redirectURL（活字格應用已授權URL地址）

GetSSOToken（需鑒權調用）：通過用戶名（openid）和活字格應用URL地址，調用活字格SSO單點登錄接口實現(xiàn)單點登錄（單點登錄密碼從活字格設計器中獲取，教程下方鏈接），返回openid和redirectURL（活字格應用已授權URL地址）

https://help.grapecity.com.cn/pages/viewpage.action?pageId=72363687書簽：第三十六章 單點登錄 - 活字格V8幫助手冊 - 葡萄城產(chǎn)品文檔中心

GetMiniWechatConfig（私有服務端命令）：被Code2SessionID服務端命令調用，獲取微信小程序的配置信息。

用戶管理

開發(fā)時用戶管理和管理控制臺中的用戶需要手動添加自定義屬性，用于存儲注冊用戶的微信UserInfo信息

頭像文字型

性別	文字型
國家	文字型
省	文字型
城市	文字型
語言	文字型
unionid	文字型

https://help.grapecity.com.cn/pages/viewpage.action?pageId=72356598#id-創(chuàng)建用戶-4.用戶自定義屬性書簽：創(chuàng)建用戶 - 活字格V8幫助手冊 - 葡萄城產(chǎn)品文檔中心

應用發(fā)布

使用普通認證進行應用發(fā)布（必須是具有外部備案域名的云主機），獲取活字格應用訪問地址

HBuilderX和微信開發(fā)者工具配置

HBuilderX創(chuàng)建微信小程序（可參考uni-app快速上手教程，創(chuàng)建教程相對繁瑣，推薦直接在HBuilderX中打開下載源文件打開即可）

https://uniapp.dcloud.net.cn/quickstart-hx.html書簽：uni-app官網(wǎng)

選擇默認模板，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中模擬運行微信小程序，第一次使用需要配置小程序安裝文件夾，如果啟動失敗，請檢查微信開發(fā)者工具的設置中是否開啟了服務端口，同時，個人微信賬號需要添加到微信開發(fā)者管理中，否則無法使用微信開發(fā)者工具調試。

5.調試時因為需要獲取UserInfo信息，請在微信開發(fā)者工具詳情中，添加微信小程序AppID

6.發(fā)行微信小程序

發(fā)行成功后，可以在微信小程序中查看到開發(fā)版本，提交審核即可

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ySmBRmiE-1672732873294)(https://img2023.cnblogs.com/blog/139239/202301/139239-20230103115621440-1881977077.png)]

此時可以通過體驗版在手機端體驗，審核通過后，可以在小程序中搜索訪問

該塊暫時無法轉換。

拓展閱讀

萬物皆可集成系列：低代碼對接企企云實現(xiàn)數(shù)據(jù)集成
萬物皆可集成系列：低代碼如何不成為數(shù)據(jù)孤島
萬物皆可集成系列：活字格對接泛微e-cology

總結

以上是生活随笔為你收集整理的万物皆可集成系列：低代码对接微信小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。