需要说明的是：UCML7.2.1.8之后版本的平台才支持开发微信小程序流程，如果你手中的平台是UCML7.2.1.8之前的平台，请升级
UCML平台从V7.2.1.8开始，全面支持微信小程序流程开发，在小程序页面中，可以发起工作流，也可以审批工作流。在功能和开发过程方面，和PC端的工作流几乎一样。
如果你之前没有用UCML平台开发过小程序，建议你先做一个小程序页面，参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00772
如果你之前没有用UCML平台开发过流程，建议你先做一个H5页面的流程，参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00903
本文以财务中的报销业务为例，详细介绍如何开发微信小程序流程。主要步骤如下：
1、创建数据表
2、创建业务组件BC
3、创建视图组件VC
6、创建工作流模型
7、运行业务逻辑模型
一、创建数据表
创建数据表的详细操作可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00772#CJSJB
本例中需要创建两个数据表，员工报销表（UserReimbursement）和报销图片表（ReimbursementPhoto），其中报销图片表是员工报销表的子表，用于存储用户上传的图片数据。员工报销表需要添加系统字段和工作流业务字段（数据表右键操作），员工报销表的操作和表结构如下：
报销图片表是子表，需要添加参与者外键，操作和表结构如下：
两张表定义好之后，需要对两张表右键执行【创建表】和【数据访问源码生成】并编译数据层源码，操作如下：
二、创建业务组件BC
创建业务组件BC的详细操作可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00772#CJYWZJBC
这里创建两个BC，分别是BC_UserReimbursement和BC_ReimbursementPhoto，如下图：
其中，员工报销BC_UserReimbursement列信息中添加三个SQL语句列：
SQRXS 申请人显示，SQL语句列内容：'申请人('+SQR+')' as SQRXS
FYHJXS 费用合计显示，SQL语句列内容：'￥'+convert(varchar(20),FYHJ)+'元' as FYHJXS
DJZT 单据状态，SQL语句列内容：case BusinessState when 1 then '审核中' when 2 then '已审核' when 3 then '未通过' when 4 then '已撤销' else '草稿' end as DJZT
三、创建视图组件VC
创建小程序视图组件VC的详细操作可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00772#CJSTZJVC
这里需要创建四个编辑格式的VC，分别是：
（1）员工报销单填写（VC_UserReimbursementEdit），设计时页面如下图：
（2）员工报销单审批（VC_UserReimbursementFormSP_WX），VC的允许编辑属性设成false。该VC用于小程序端的审批页面，设计时页面如下图：
（3）员工报销单列表（VC_UserReimbursementList），该列表展示以往报销数据，也是报销单填写入口。设计该VC的内容时，需要用到动态列表控件、行列控件、标签控件、图片控件、页尾控件等，设计时和最终的效果图如下：
（4）员工报销单审批（VC_UserReimbursementFormSP_PC），VC的允许编辑属性设成false。该VC是PC端的编辑VC，用于PC端的审批页面，制作过程可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00479#CJSTZJVC，设计时页面如下图：
四、创建业务单元BPO
创建小程序业务单元的详细操作可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00772#CJYWDYBPO
创建PC业务单元的详细操作可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00479#CJYWDYBPO
接下来需要创建五个业务单元，分别是：
（1）小程序业务单元报销单列表（BPO_UserReimbursementList），它所引用的BC是员工报销（BC_UserReimbursement），所引用的VC是报销单列表（VC_UserReimbursementList）
在这个业务单元中，添加四个JS函数（业务单元右键添加JS操作函数），分别是：
//列表单击所调用的函数
fn_ClickItem:function(){
var page="";
var DJZT = this.BC_UserReimbursementBase.getFieldValue("DJZT");
if(DJZT=="草稿"){
page="BPO_UserReimbursementEdit";
}else{
page="BPO_UserReimbursementView";
}
var OID = this.BC_UserReimbursementBase.getOID();
var URL=page+"?type=view&BusinessKeyOID="+OID;
wx.navigateTo({
url: URL
});
}
//业务单元初始化调用的函数。
fn_Initial:function(){
this.Controls.wximage1={};
this.Controls.wximage1.src = this.Controls.baseUrl +"Images/WeiXinSmallApp/PurchaseOrder/user.png";//设置列表中的图标的src，图片可自定义
this.Controls.wximage2={};
this.Controls.wximage2.src = this.Controls.baseUrl +"Images/WeiXinSmallApp/PurchaseOrder/time.png";
}
需要在业务单元【前端js编程】【JSCRIPT业务初始化】调用这个函数
//页面生命周期函数：监听页面显示。这个函数名称是固定的
wxOnShow:function(bpo) {
this.BC_UserReimbursementBase.SetCondiList("","",""," 1=1 ",0);
this.BC_UserReimbursementBase.getData();
}
//点击申请报销按钮调用的函数
fn_ApplyReimbursement:function(){
var URL="BPO_UserReimbursementEdit?type=add&BusinessKeyOID=00000000-0000-0000-0000-000000000000";
wx.navigateTo({
url: URL
});
}
（2）小程序业务单元报销单填写（BPO_UserReimbursementEdit），它所引用的BC是员工报销（BC_UserReimbursement）和报销图片（BC_ReimbursementPhoto），BC_ReimbursementPhoto是BC_UserReimbursement的子BC，所引用的VC是报销单列表（VC_UserReimbursementEdit），此业务单元在【业务属性】中勾选【系统模块】
在这个业务单元中，添加六个JS函数（业务单元右键添加JS操作函数）和一个服务端函数（业务单元右键添加业务服务端操作函数），分别是：
//业务单元初始化调用的函数
fn_Initial:function(){
var type=this.getURLParameters("type");
if(type=="add"){
this.BC_UserReimbursementBase.Insert();
this.CallGetReimbursementOrderNum();//异步生成报销编号
var UserOID=this.baseData.BusinessData.UCMLUserSystemInfo[0].UserOID;
if(UserOID=="00000000-0000-0000-0000-000000000001"){
this.BC_UserReimbursementBase.setFieldValue("SQR","系统管理员");
}else{
this.BC_UserReimbursementBase.setFieldValue("SQR",this.baseData.BusinessData.UCMLUserSystemInfo[0].PersonName);
}
}
this.BC_UserReimbursementBase.on("OnFieldChange",this.fn_OnFieldChange);//注册BC的字段变化事件
this.BC_UserReimbursementBase.fn_ChangeToDX=this.fn_ChangeToDX;
}
需要在业务单元【前端js编程】【JSCRIPT业务初始化】调用这个函数
选中服务端函数勾选【服务函数支持】，然后右键【生成JavaScript函数调用此服务函数】，则会生成三个JS函数
//生成报销编号的成功回调函数
succeeded_GetReimbursementOrderNum:function(obj, text, methodName)
{
this.BC_UserReimbursementBase.setFieldValue("BXBH",text);
}
//保存按钮调用的函数
fn_Save:function(){
var BT=this.BC_UserReimbursementBase.getFieldValue("BT");
if(BT){
this.BusinessSubmit();
}else{
wx.showToast({title: "请填写标题", icon: 'none', duration: 1000});
}
}
//启动流程按钮调用的函数
fn_Submit:function(){
var errorMsg=this.fn_CheckData();//先检查数据是否符合要求
if(errorMsg){
wx.showToast({title: errorMsg, icon: 'none', duration: 1000});
}else{
this.fn_StartFlow();//这个函数是业务逻辑模型生成的固定函数
}
}
//检查填写的数据是否符合要求
fn_CheckData:function(){
var str="BT,请填写标题;BM,请选择部门;SQR,请填写申请人;BXSM,请填写报销说明;FYHJ,请填写费用合计;DX,请填写大写;CKR,请填写持卡人;YHKH,请填写或选择银行卡号";
var errorMsg="";
var arr=str.split(";");
for(var i=0;i<arr.length;i++){
var val=this.BC_UserReimbursementBase.getFieldValue(arr[i].split(",")[0]);
if(!val){
errorMsg=arr[i].split(",")[1];
break;
}
}
return errorMsg;
}
//js阿拉伯数字转中文大写
fn_ChangeToDX:function(n) {
if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
return "数据非法";
}
var unit = "千百拾亿千百拾万千百拾元角分", str = "";
n += "00";
var p = n.indexOf('.');
if (p >= 0){
n = n.substring(0, p) + n.substr(p+1, 2);
}
unit = unit.substr(unit.length - n.length);
for (var i=0; i < n.length; i++){
str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
}
return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
}
//BC_UserReimbursement的字段变化时调用的函数
fn_OnFieldChange:function(e){
//注意，当前的this对象是BC_UserReimbursementBase
if (e.fieldName == "FYHJ"){//用户填写费用合计时，下面的大写自动转换
var FYHJ = this.getFieldValue("FYHJ");
var DX = this.fn_ChangeToDX(FYHJ);
this.setFieldValue("DX", DX);
}
}
（3）小程序业务单元报销单查看（BPO_UserReimbursementView），它所引用的BC是员工报销（BC_UserReimbursement）和报销图片（BC_ReimbursementPhoto），BC_ReimbursementPhoto是BC_UserReimbursement的子BC，所引用的VC是员工报销单审批（VC_UserReimbursementFormSP_WX），此业务单元在【业务属性】中勾选【系统模块】
（4）PC业务单元报销单审批（BPO_UserReimbursementSP），它所引用的BC是员工报销（BC_UserReimbursement），所引用的VC是员工报销单审批（VC_UserReimbursementSP_PC），此业务单元在【业务属性】中勾选【系统模块】
（5）小程序业务单元报销单审批（小程序）（BPO_UserReimbursementSP_WXSmallApp），它所引用的BC是员工报销（BC_UserReimbursement）和报销图片（BC_ReimbursementPhoto），BC_ReimbursementPhoto是BC_UserReimbursement的子BC，所引用的VC是员工报销单审批（VC_UserReimbursementFormSP_WX），此业务单元在【业务属性】中勾选【系统模块】。说明：报销单审批（小程序）的业务单元名称是基于PC业务单元报销单审批的名称加了后缀_WXSmallApp
五、创建工作流业务分类
关于工作流业务分类的详情操作，可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00903#_Toc524696829
这里新建一个报销业务，每个页签的配置情况如下：
（1）业务注册表中，业务单元名称选择BPO_UserReimbursementSP
（2）意见代码注册，自动添加常用意见
（3）业务操作动作，自动添加流程常用动作
（4）节点模型表，添加一个审批权限，并在下面的【流程动作权限】页签中【自动添加流程常用动作】
然后右键报销业务，单个导出业务类型信息
六、创建工作流模型
关于工作流模型的详细操作，可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00903#_Toc524696830
这里新建一个报销流程，流程图如下：
左键选中报销流程，所属业务分类选择第五步中建的报销业务，并且勾选是否设计完成
左键选中部门经理审批、主管副总审批和财务审批这三个人工节点，【环节业务模型】和【手机页面环节业务模型】都选择审批，【审批意见代码】中添加缺省意见，【活动参与人】中选取节点的执行人
然后右键报销流程，依次执行流程源码生成、发布到工作流服务器。执行流程源码生成时会提示是否同时生成工作流工程文件，选是；发布到工作流服务器时会提示是否保留目标系统配置的流程执行人，选否。
然后编译工作流引擎终端程序，UCMLFramework版和UCMLCore版的编译有所差别，如下图：
编译完成后，解决编译控制台中所有编译错误（error）
如果平台是UCMLFramework版，点击工具栏区域的小箭头，选择“启动工作流服务器”，直接打开工作流引擎程序。
如果平台是UCMLCore版，选中工作流工程，先准备环境，再启动工作流程序。
七、运行业务逻辑模型
在流程相关的业务单元（流程发起页面和审批页面等）中，需要添加一些相对固定的函数、工作流系统BC和工作流系统VC等，这些不需要开发者手动添加，可以用业务逻辑模型来完成。第四步中创建了一些业务单元，现在需要对其中一些业务单元再次进行操作。
（1）选中小程序业务单元报销单填写，然后在平台菜单中选择【全球软件生产线】【业务逻辑模型模板】，会弹出业务逻辑模型库对话框
在对话框中选择【工作流启动表单微信小程序版】，然后配置参数。BCName这个参数写BC_UserReimbursement；FlowID是报销流程的模型ID，本例中是FLow_11103VER10；BUDataOID这个参数写UserReimbursementOID。然后业务单元定位到报销单填写，点击运行
然后报销单填写业务单元中会增加一个服务端函数和五个JS函数，这些函数会在流程启动和查看流程图时用到
（2）同样的，选中小程序业务单元报销单审批（小程序），打开业务逻辑模型模板。在对话框中选择【工作流处理表单微信小程序版】，然后配置参数。BCName这个参数写BC_UserReimbursement；BUDataOID这个参数写UserReimbursementOID。然后业务单元定位到报销单审批（小程序），点击运行
然后报销单审批（小程序）业务单元中会增加一些工作流系统BC和工作流系统VC，还有一些固定的服务端函数
（3）同样的，选中PC业务单元报销单审批（PC），打开业务逻辑模型模板。在对话框中选择【工作流处理表单】，然后配置参数。BCName这个参数写BC_UserReimbursement；BUDataOID这个参数写UserReimbursementOID。然后业务单元定位到报销单审批（PC），点击运行
然后报销单审批（PC）业务单元中会增加一些工作流系统BC和工作流系统VC，还有一些固定的服务端函数
（4）依次选中五个业务单元，右键执行【B/S业务单元生成并单个编译】，并解决所有的编译错误
八、创建屏幕定义并测试流程
创建小程序屏幕定义的详细操作可以参考文档：http://doc.ucml.com.cn/Article/GetArticlePreview?aid=doc_00772#PZPMDY
这里创建屏幕定义的配置如下：
配置好后，选中屏幕定义根节点右键导出屏幕定义。下面是一些测试的效果图：
评论
暂无评论!