更新时间:2022-04-27 GMT+08:00
分享

线下开发自定义登录组件

  1. 在左侧资产下的组件模板中,单击widgetVueTemplate,再单击“下载”。

    图1 下载组件模板

  2. 在弹出的窗口中,输入组件名称,并单击“保存”,将组件模板保存到本地,并解压。

    图2 输入组件名称

  3. 查看解压后的组件目录。

    目录结构如图3所示,其中userLogin.js文件是写vue业务逻辑的代码,userLogin.ftl用于写html代码,userLogin.css用于写样式代码,userLogin.editor.js以及packageinfo.json是配置文件。
    图3 目录结构

  4. 在本地编辑器中打开文件夹,把userLogin.editor.js文件中的config代码改为如下代码,用于配置桥接器:

    config: [
                    {
                        type: 'connectorV2',
                        name: 'FlowConnector',
                        label: 'Flow Connector',
                        model: 'ViewModel',
                    },
                    {
                        type: 'connectorV2',
                        name: 'common.GetConnector',
                        label: 'View API Get Connector',
                        model: 'ViewModel',
                    },
                    {
                        type: 'connectorV2',
                        name: 'common.PostConnector',
                        label: 'View API Post Connector',
                        model: 'ViewModel',
                    },
                    {
                        type: 'connectorV2',
                        name: 'common.PutConnector',
                        label: 'View API Put Connector',
                        model: 'ViewModel',
                    },
                    {
                        type: 'connectorV2',
                        name: 'common.DeleteConnector',
                        label: 'View API Delete Connector',
                        model: 'ViewModel',
                    },
                ]

  5. 把packageinfo.json文件中加入如下加粗内容

    {
        "widgetApi": [
            {
                "name": "userLogin"
            }
        ],
        "widgetDescription": "",
        "authorName": "",
        "localFileBasePath": "",
        "requires": [
            {
                "name": "global_Vue",
                "version": "100.8.3"
            },
            {
                "name": "global_VueI18n",
                "version": "100.7.3"
            },
            {
                "name": "global_Element",
                "version": "101.0.3"
            }
        ]
    }

  6. 将修改后的组件文件压缩成一个zip包。压缩后,即可根据需要上传到AppCube,供高级页面使用。
分享:

    相关文档

    相关产品

close