Mendix和微信小程序集成(1)
作业Ralf
2021.06.02 22:32发布于技术 - 集成与扩展
1.87k1

概要


本文解释如何将Mendix App与微信小程序集成。设计如下:


1.png


小程序通过WebView访问Mendix App。Mendix App内部可通过Nanoflow 触发JavaScript Action来使用微信JSSDK操作手机,例如拍照,支付等等。也可通过Mendix App Store上现有的widget来操作手机比如使用Camera Widget调起手机摄像头拍照。


目前仅是第一阶段,直接使用Nanoflow+JavaScript Action,后续会将JSSDK做成Mendix Widget上传后供大家使用。


1.Mendix 服务购买及域名备案


1.1购买Mendix服务


通过以下网址购买Mendix服务


 https://cloud.tencent.com/solution/slp


1.2申请并备案App的ICP域名


将购买Mendix服务完成时email中获取的集群IP与该域名进行绑定


2.png


1.3  下载Studio Pro


使用腾讯云账号登陆Mendix中国平台 https://apps.mendix.tencent-cloud.com 并下载Studio Pro并使用腾讯云账号登陆


2. 申请并配置微信公众号


通过以下地址注册公众号 https://mp.weixin.qq.com/ 保存AppID和AppSecret至本地,并将购买Mendix服务完成时email中获取的集群IP加入白名单


3.png


点击“公众号设置”->“功能设置”->“JS接口安全域名”点击“设置”


4.png


5.png


将上图第3点中提到的文件本地保存


3. 申请小程序开发账号


通过以下地址注册小程序https://mp.weixin.qq.com/wxopen/waregister?action=step1


由于需要使用webview功能,注册类型请选择企业


6.png


注册成功登陆后点击“开发管理”->“开发设置”->“业务域名”


7.png


8.png


将校验文件下载到本地


4.  Mendix App开发


请通过以下地址下载示例代码。该示例代码可通过微信JSSDK以及Camera Widget调起摄像头拍照并显示图片


https://cdn.mendix.tencent-cloud.com/mini-program/MobileDemo.mpk


4.1  导入示例App


打开Studio Pro,选择“ Import Project Package”->“New Mendix Team Server”


9.png


4.2  Camera Widget


Camera Widget是通过https://marketplace.mendix.com/link/component/107943 下载并导入App工程


如需开发新Mobile页面则需要在Navigation中添加Phone browser页面


10.png


11.png


该Demo App将CameraWidget拖拽入页面并加入ImageViewer用于显示图片


12.png


Demo App根据以下网址中Documentation ->Getting started章节创建并配置Entity以及Microflow


https://marketplace.mendix.com/link/component/107943


13.png


具体可参见示例代码中的Domain Model和“MF_TakePic”Microflow


4.3  使用微信JSSDK调起相册和相机


由于JSSDK使用需要预先获取signature,请将在第2章节公众号中获取到的AppID和AppSecret赋值给对应常量


14.png


“Take photo”按钮会触发nanoflow “callWeChat”


15.png


“callWeChat”会先通过Microflow “MF_GetTicket”获取signature所需要的Ticket,并将其传入JavaScript Action “MyFirstModule.JavaScript_action”


“MyFirstModule.JavaScript_action”会生成signature,并使用微信JSSDK的“wx.chooseImage”调起相册或者相机然后通过“wx.getLocalImgData”方法获取图片,并通过“callMicroflow”将获取到的图片的base64 string通过Microflow “MyFirstModule.MF_ConvertPic”传回Mendix App并显示图片。


16.png


具体代码请点击“Show Project Directory in Explorer”打开工程目录


17.png


进入\javascriptsource\myfirstmodule\actions文件夹查看JavaScript_action.js文件


JSSDK等第三方lib是通过https://nodejs.org/en/下载并安装npm,然后点击“Show Project Directory in Explorer”打开工程目录,进入\javascriptsource\myfirstmodule\actions文件夹,创建node_modules文件夹后通过以下命令安装lib,例如


npm install --prefix ./ weixin-js-sdk


4.4  部署App并配置TLS


将第2,3章中下载的2个校验文件放置在以下路径


\theme


18.png


点击Studio Pro中“commit”提交代码


19.png


根据以下链接操作部署app到Mendix云端平台上


https://docs.mendix.com/developerportal/deploy/tencent-deploy


并修改TLS配置如下


20.png


将1.2章节中申请备案的ICP域名的key文件上传“TLS Private Key File”,将ICP域名的pem文件上传“TLS Certificate File”


4.5 在公众号和小程序中配置域名


再次登陆公众号,点击“公众号设置”->“功能设置”->“JS接口安全域名”点击“设置”将ICP域名输入


21.png


登陆小程序点击“开发管理”->“开发设置”->“业务域名”,将ICP域名输入


22.png


5.  小程序开发


小程序部分示例代码参见 https://cdn.mendix.tencent-cloud.com/mini-program/miniprogram-1.zip


下载小程序开发IDE,创建小程序工程,并将小程序 “开发管理”中“AppID”填入,选择“不使用云服务”


23.png


配置代码如下


24.png


25.png


输入ICP的App域名


26.png


28.png


此时模拟器会显示如下界面


29.png


点击“真机调试”


30.png


手机用注册小程序的微信号扫描二维码进入小程序,点击“Web View”进入Mendix App


31.png


点击“Take photo”可拍摄或者从相册选择图片


32.png


操作完成后,底部会显示对应图片如下


33.png


点击“Use AppStore Camera Widget”下方“Start Camera”也可通过Mendix Camera Widget调起相机,点击“Take picture”进行拍摄,图形也可显示在小程序底部。


 


 


 


 

收费的阳光、Jacob-chen、Code_Dove、Bolenter、TOTO、hercules_jia、邵群超、方寸田園、Jane_、艾特智能
点赞
收藏
手机查看
举报
1个评论
倒序看帖
仅看楼主
    Way
    2021.09.02 15:52 发布
    #1
    受教了!
    首赞
    评论
    举报