组件多端开发

组件开发请参考《组件包目录结构》、《组件元信息》、《组件运行时 JS 文件》、《设计时 JS 文件》等文档

组件多端开发支持

多端组件开发支持，需要组件设计时及页面运行时支持。

组件设计时

组件在云IDE设计时支持包含react、vue、全部，其中全部表示不分语言。根据组件基类实现语言支持，一般相关需要在“\UI2\comp\组件包名\components\组件名\designer\组件名.js”中设置，例如规则引擎组件“\UI2\comp\ruleengine\components\ruleengine\designer\ruleengine.js”。

逻辑业务类组件，不分语言,例如上下文组件、规则引擎组件、工作流组件等，使用基类如下：

//逻辑业务类组件，不分语言
var BizComponent = require("$UI/system/components/designerCommon/comp/bizDesignComp");

可视化类组件，不分语言,例如签名组件、短信组件、批处理组件等，使用基类如下：

//可视化类组件，不分语言
var ViewComponent = require("$UI/wxsys/comps/designerCommon/js/viewDesignerComponent");

react语言组件，例如antdpro组件,vantui组件等，使用基类如下：

//react语言组件
var ReactLibraryComponent = require("$UI/wxsys/comps/reactContainer/designer/reactLibrary/ReactLibraryComponent");

vue语言组件，例如antdv组件、vant组件等，使用基类如下：

//vue语言组件
var VueLibraryComponent = require("$UI/wxsys/comps/vueContainer/designer/vueLibrary/VueLibraryComponent");

组件分类说明，需要修改“组件包名\meta.properties”内“comp.product_category”属性

特别说明

框架(framework)： vue:310， react:311

组件库(ui component):antd:410(原1379用的自增id弃用）,antdPro:411（原1380用的自增id弃用,原svn对应向导模板已调整为新分类，trunk和trunk2 对应此分类模板已新上传）,antdv:412,vant:413,vantui:414

完整属性可以通过“平台域名/opencart/category”请求查看

组件运行时

组件运行时支持端包含：桌面react、桌面vue、移动tract及移动vue4个端，开发的组件支持在单一端下运行，也支持在混合端下运行，例如流程组件支持react,vue及移动端，antdpro组件仅支持桌面react。组件端设置，修改“\UI2\组件名称.framework.json”文件，例如：UI2\comp\ruleengine.framework.json

{
    "tech": "react,vue,weixin,h5",
    "device": "*"
}

说明：

tech:技术类型，包含react、vue、weixin、h5、ui2，其中ui2表示jquery技术类型

device：设备类型，包含pc、m、*,其中*表示支持所有设备类型

组件预览

已有组件开发调试，例如antdpro、antdv等，除了需要开启组件定制外，还需要删除组件下的编译文件，才能达到修改内容实时查看效果，一般编译内容在组件“dll”目录下，例如antdpro组件对应的编译文件文件夹是“$UI2\comp\antdpro\components\antdpro\dll”

组件预览分为2类：设计时预览及非设计时预览，通常情况下组件预览相关的页面是放在“dialog”命名的文件夹下。
设计时预览特指在云ide下设计界面调用的组件页面，这些页面一般放在“\UI2\comp\组件包名\components\组件名\designer\dialog”，其访问方式一般通过“designer-语言(react/vue)-pcxapp”进行访问，例如：https://react2lzsdev6-lzsdev-ide.trunk.xcaas.net/designer-react-pcxapp/#/designer-react-pcxapp/comp/ruleengine/components/ruleengine/dialog/guize_gl/guize_k?t=1737015076886。这种访问方式是指定语言进行访问，可以在其他语言类型中通过iframe等方式进行访问使用，例如规则引擎

非设计时预览指在非云ide设计时访问，这些页面一般放在“\UI2\comp\组件包名\components\组件名\dialog”，其访问方式一般通过“pcxapp”进行访问，例如：https://react2lzsdev6-lzsdev-ide.trunk.xcaas.net/pcxapp/#/pcxapp/comp/ruleengine/components/ruleengine/dialog/guize_sj/guize_sjq/1737015557560。这种访问方式依赖端进行访问，因此如果组件开发语言是react，应用使用vue，那么在vue下通过添加组件，使用这类访问方法页面会通过vue编译器来运行页面，预览页面会报错。

注意：
上述2中预览方式，实际可以理解为一类，“designer-语言(react/vue)-pcxapp” 可以理解为指定预览访问端，不依赖现有应用语言端，“pcxapp” 可以理解为依赖当前应用端进行预览，当前应用为是什么语言，预览页面就会以什么语言编译运行。具体开发时可以参考工作流组件、规则引擎组件等

关于云ide扩展开发

注意：
云ide修改属于底层逻辑，非必要不要轻易尝试，防止因错误修改导致相关页面出现不可用或是安全等问题

云ide下设计语言类型及打开页面信息等信息都可以通过页面“window.localStorage”获取，并进行查看

//获取当前云ide使用的语言
var framework = window.localStorage && window.localStorage.getItem("_currentClientFramework");

当前应用端类型等信息可以通过“justep.Util.getGlobalValue("cloudx5.config")”进行查看

//仅在云ide相关设计页面可用，使用逻辑较为偏底层
this.config = $.extend(true,{},justep.Util.getGlobalValue("cloudx5.config"));

完整根据端及语言判断使用主UI框架代码如下(可以根据需求自行调整)：

//仅在云ide相关设计页面可用，使用逻辑较为偏底层
if(this.config.ext.deviceType == "pcx"){
    return localStorage.getItem("_currentClientFramework") == 'vue' ? ['antdv'] : ['antd'];
}else if (this.config.ext.deviceType == "mx"){
    return localStorage.getItem("_currentClientFramework") == 'vue' ? ['vant'] : ['vantui'];
}else if (this.config.ext.deviceType == "pc"){
    return ['pc'];
}else if (this.config.ext.deviceType == "wx"){
    return ['wx'];
}else {
    return [];
}

云ide底层开发需要注意事项:

开发前需要删除“$UI2\system\config\release.txt”标识文件，以保证底层代码处于编辑可编译状态

如果开发的页面路径文件夹中包含“.cache”或.release”，需要进行删除，以保证修改代码处于最新，达到实时预览的效果

云ide页面右上角快捷设置，需要修改“$UI2\system\designer\webIde\quickIde\main.w”页面相关文件

组件多端开发

组件多端开发