wechatwidget帮助你快速在mendix中开发小程序并调用相关腾讯api，实现微信支付、获取图片等功能。
wechatwidget中集成了微信支付、获取图片、获取地点、分享以前音频转文字等微信api。同时通过webview实现在微信小程序中调用应用。本文将重点介绍关于微信支付的集成。
下载
- 小程序下载地址：wechatminiprogramwrapper
- wechatwidget下载地址：https://wechat-widgets-1302743899.cos.ap-shanghai.myqcloud.com/WeChatWidget.mpk
前期准备
微信支付API接口
- JSAPI下单： /v3/pay/transactions/jsapi
- 查询订单： /v3/pay/transactions/out-trade-no/{out_trade_no}
- 小程序调起支付API
支付流程图
配置
配置credentials相关模块
- 在 CredentialConfig 模块下，进入 _USE_ME 文件夹，设置 EnctryptKey 的值，一个16位的随机字符串，可以使用在线生成工具生成。
- 在项目的导航中增加一项CredentialConfig，设置为打开CredentialConfig页面。
- 运行项目，在浏览器中打开并进入步骤2的CredentialConfig页面。
- 点击 Add a new credential 来新建并存储微信api调用所需要的密钥等，这些值可以在微信公众平台和商户平台的后台找到（参考小程序支付接入前准备）。其中 config name 为帮助记忆的名字，可随意起。
配置Deeplink
- 点击Deeplink Config Tab，进入deeplink config 页面。添加wechat和orderInfo deeplink如下。
启动小程序
本地调试
- 配置小程序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。
根据deeplink中的配置，该URL将调用microflow SSO_WechatLogin，获取openid，accessToken和jsticket等信息，并显示mendix中的index页面
关于支付功能
- 点击支付button，进入支付演示创建订单页面。
- 点击提交订单，调用nanoflow WX_Callpay。该nanoflow中主要有两个action，1. 调用WX_MF_CallPay microflow，2. 调用javascript action
- 调用WX_MF_CallPay microflow,使用javaaction调用jsapi进行下单，并返回prepay相关信息。
- 调用javascript action， 携参从webview跳回微信小程序页面
/wxpay/wxpay,并在小程序内部唤起微信支付接口。
- 支付成功后显示模态框,用户确认后将重新使用webview回到mendix app。
okConfirm() {
this.hideModal();
this.setData({
url: `${MENDIX_APP.backToWebview(this.data.out_trade_no)}`
})
},
- 根据deeplink中的配置，该url将调用microflow SMP_ShowOrderInfo。
- 调用微信支付查询订单接口，并显示订单详情页面。
参考链接
