Mendix和微信小程序集成(2) ——微信支付
Lynn
2021.10.28 11:00发布于技术 - 集成与扩展
3230

wechatwidget帮助你快速在mendix中开发小程序并调用相关腾讯api,实现微信支付、获取图片等功能。

wechatwidget中集成了微信支付、获取图片、获取地点、分享以前音频转文字等微信api。同时通过webview实现在微信小程序中调用应用。本文将重点介绍关于微信支付的集成。

下载

前期准备

参考小程序支付接入前准备

微信支付API接口

支付流程图

image.png

配置

配置credentials相关模块

  1. 在 CredentialConfig 模块下,进入 _USE_ME 文件夹,设置 EnctryptKey 的值,一个16位的随机字符串,可以使用在线生成工具生成。
  2. 在项目的导航中增加一项CredentialConfig,设置为打开CredentialConfig页面。
  3. 运行项目,在浏览器中打开并进入步骤2的CredentialConfig页面。
  4. 点击 Add a new credential 来新建并存储微信api调用所需要的密钥等,这些值可以在微信公众平台和商户平台的后台找到(参考小程序支付接入前准备)。其中 config name 为帮助记忆的名字,可随意起。
    image.png

配置Deeplink

  1. 点击Deeplink Config Tab,进入deeplink config 页面。添加wechat和orderInfo deeplink如下。
    image.png
    image.png

启动小程序

本地调试

  • 配置小程序appid,app secret
  • 修改 consts.js中的
baseURL: 'http://localhost:8080/'
  • 点击编译即可本地进行调试。

手机运行

若mendix应用已经部署到线上,可按照小程序的开发流程,在手机上进行调试。

  • 配置小程序appid,app secret
  • 修改 consts.js中的
baseURL: 'https://xxx.xxx.xxx.xx/(mendix应用域名)'
  • 按照微信小程序的开发流程,点击微信开发者工具中的upload,将当前小程序上传。
  • 在微信公众平台中将当前小程序设为体验版。
  • 配置信任域名。
  • 扫描体验版二维码即可在手机上使用该小程序。

关于mendix中的实现

登录授权

小程序中登录和获取用户信息后通过设置webview的url为deeplink中/link/wechat/的url。
image.png
根据deeplink中的配置,该URL将调用microflow SSO_WechatLogin,获取openid,accessToken和jsticket等信息,并显示mendix中的index页面
image.png
image.png

关于支付功能

  • 点击支付button,进入支付演示创建订单页面。
    image.png
    image.png
  • 点击提交订单,调用nanoflow WX_Callpay。该nanoflow中主要有两个action,1. 调用WX_MF_CallPay microflow,2. 调用javascript action
    image.png
  • 调用WX_MF_CallPay microflow,使用javaaction调用jsapi进行下单,并返回prepay相关信息。
    image.png
  • 调用javascript action, 携参从webview跳回微信小程序页面/wxpay/wxpay,并在小程序内部唤起微信支付接口。
    image.png
    image.png
  • 支付成功后显示模态框,用户确认后将重新使用webview回到mendix app。
    image.png
okConfirm() { this.hideModal(); this.setData({ url: `${MENDIX_APP.backToWebview(this.data.out_trade_no)}` }) },
  • 根据deeplink中的配置,该url将调用microflow SMP_ShowOrderInfo。
    image.png
  • 调用微信支付查询订单接口,并显示订单详情页面。
    image.png

参考链接

hankx
点赞
收藏
手机查看
举报
0个评论
倒序看帖
仅看楼主

暂无数据