scene-sdk

v0.0.2

Published

2 years ago

scene sdk

Downloads

0High
0Medium
0Low

hansneil

LegoSdk

介绍

LegoSdk以SPEC（@baidu/eform中有相关解释）为输入，生成表单，把用户填写的内容输出为结构化数据，并完成数据校验；输出数据结合样式逻辑，形成客户广告模块的实时预览。

spec文档、demo

实现简介

对@baidu/eform、@baidu/lego-sdk-preview进行封装，同时增加了个性化品专以及定制预览等逻辑。对eform需对外的方法进行了代理，如validate、getValue、setValue；umd版本还包括@baidu/eform-default-view

发布方式

本地编译

    npm run build
    npm run test-build

umd版本

直接bos上传，测试版、正式版都需要上传：测试版：http://ecmb.bdimg.com/adcoup-mat/lego-sdk/new/lego-sdk-test.js 正式版：http://ecmb.bdimg.com/adcoup-mat/lego-sdk/new/lego-sdk.js

edp版本

    // * publish 需要登陆，用此命令
    npm login --registry=http://edp-registry.baidu.com
    // 账号：Username:songao5  Password:123456  Email:[email protected]
    npm publish --registry=http://edp-registry.baidu.com

使用方式

代码引入

edp模块使用（推荐）

    edp import baidu-lego-sdk

umd方式（包含@baidu/eform-default-view模块，即表单使用默认的view）直接下载打包后的文件即可，文件位于项目文件夹的output/lego-sdk.js；直接使用在线地址：测试版：http://ecmb.bdimg.com/adcoup-mat/lego-sdk/new/lego-sdk-test.js 正式版：http://ecmb.bdimg.com/adcoup-mat/lego-sdk/new/lego-sdk.js
npm模块使用（使用前沟通，为减少维护成本，目前只发布到了1.0.8版）


    // 安装npm包
    npm install @baidu/lego-sdk --registry http://registry.npm.baidu.com --dev
    // 代码中引入
    import LegoSdk from '@baidu/lego-sdk'

    // 如需使用默认的表单样式，再引入@baidu/eform-default-view，并注册view
    npm install @baidu/eform-default-view --registry http://registry.npm.baidu.com --dev    

    import EformView from '@baidu/eform-default-view' 
    LegoSdk.registerView(EformView);

生成实例


    /**
     * 物料编辑预览控件
     *
     * @param  {HTMLElement} dom  legoSdk展现容器
     *     @param {Array} template.spec 样式spec信息
     *     @param {Array} template.renders 样式渲染信息，一个或多个render配置信息，一般后端接口返回；一个render格式为：
     *      {
     *          "id": 8231,
     *          "name": "SMART",
     *          "js": "xxx",
     *          "width": 360,
     *          "height": 400
     *      }
     * @param  {Object} options 选项
     *     @param {boolean} options.hideEform 是否隐藏表单区域，默认false
     *     @param {boolean} options.hidePreview 是否隐藏预览区域，默认false
     *     @param {Array.<Object>} options.extraTabs 额外TAB
     *     @param {number} options.previewTabIndex 预览面板在所有TAB面板中的索引位置，默认0
     *     @param {number} options.activeTabIndex 初始展示的面板在所有TAB面板中的索引位置
     *     @param {string} options.tips 预览区域下方的提示文字
     *
     *     @param {Object} options.defaultValue 默认数据
     *     @param {Object} options.uploadUrl 上传路径
     *     @param {number} options.isSupportDWZ 是否支持短网址，默认为true
     *
     *     @param {boolean} options.rewriteLinkTarget 是否重写预览里的a链接的target
     *     @param {boolean} options.fixedHeightCanvas 表单预览区域高度用给定的值
     *     @param {string} options.baseCssUrl 基础css文件url
     *     @param {string} options.previewBeforeCode 定制预览代码（head里）
     *     @param {string} options.previewAfterCode 定制预览代码（最后面）
     *     @param {Array|undefined} options.pplBlockNames 个性化blockName
     *     @param {Array|undefined} options.previewPlugins 定制预览插件名array
     *     @param {Array|undefined} extensions 业务端需要用到的通用extension数组，也可用于实例时给extension传参，如：
     *          [
     *              'sf',
     *              {
     *                  name: 'dwz',
     *                  params: {
     *                      apiUrl: 'http://www.baidu.com'
     *                  }
     *              }
     *          ]
     *          外层可能传的名字叫extensionMap，会做兼容处理
     *     @param {string?} configUrl legoSdk通用配置，如extensionAPI配置等，外部传递可以实现环境的区分
     *     @param {string?} previewConfigUrl 外部传递可以实现环境的区分
     */
    let legoSdk = new LegoSdk(dom, template, options);

实际用例

查看demo文件。

常用方法


// 获取json数据
legoSdk.getValue();

// 设置数据
legoSdk.setValue({
    'title': '标题....',
    ...
});

// 校验数据
legoSdk.validate();

其他

upload接口约定

        
        // 接口地址
        http://SERVICE_URL&spec=xxx&callback=parent.eform_a0e0_callback
        // spec、callback参数必须；
        // 有些业务端会对callback参数有正则匹配的校验，如锦囊，测试时需注意

        //上传成功
        if (data.success == 'true' || data.success == true) {

        }
        
        // 返回数据格式
        {
            "success": "true",
            "message": {}, //出错时message内容为 'ERROR':"xxxx"
            "result": {
                "preview_url": "http://ecmb.bdimg.com/tam-ogel/e0feeaeb09048b628358b0f987f0059c_1242_1102.jpg"
            }
        }

changelog

1.2.1

2017-08-15 19:30

disable方法会影响到外层A链接bug fixed
优化事件调用，增加debounce方法
padding_extra extension配置修改
dwz extension增加对extraAttr.hideUrl的判断

1.2.0

2017-08-10 18:00

优化config配置，configUrl、previewConfigUrl参数化，实例化时可传入，eform接受config参数，与backup config做merge

1.1.8

2017-08-08 18:00

迁移icode代码格式优化
预览配置和mat预览使用同一份文件
移除esui，内部实现panel、tab功能，使文件体积减小3/5
增加removeInstance，优化saveInstance
legoSdk
更多修改详见
- eform changelog 1.2.0
- eform-default-view changelog 1.1.1

1.1.5

2017-08-03 14:25

修复baidu浏览器某些版本不支持Object.assign bug
URL类型自动增加http协议功能添加

1.1.3

2017-08-01 16:30

修复list setValue为空，minCount === maxCount时没显示添加按钮bug

1.1.2

2017-07-28 17:00

hidePreview时bug修复
更多修改详见
- eform changelog 1.1.9
- eform-default-view changelog 1.1.1

1.1.1

2017-07-21 13:00

增加容器宽度的自动计算，增加getParamValue等对外接口
更多修改详见
- eform changelog 1.1.9
- eform-default-view changelog 1.1.0

1.0.9

2017-07-14 15:00

主要修改详见
- eform changelog 1.1.8
- eform-default-view changelog 1.0.9
为了发布edp模块，项目名改为baidu-lego-sdk；同时，不再推送到npm.baidu.com。

接口人及使用情况

lego 陈立已使用新版umd方式，lego重构版本使用npm版本
maya 陈立已使用新版，edp版
开放平台张磊 edp版
锦囊范学亮已使用新版umd方式，锦囊重构版本需使用edp版本
中小业务端范学亮 umd，测试中
华表范学亮
起跑线张鑫
知识营销褚波
品牌序章张力接入中 npm版