使用凤蝶开发模板和区块

请访问我的个人博客 sourcod

简介：

• 凤蝶是支付宝提供的，用来帮助运营同学快速发布和修改运营内容的平台
• 整个页面都可配置使用模板(例如：静态页面)
• 页面有自己的业务和可配置的需求使用区块(例如：车主服务首页)
  

  凤蝶开发使用nunjucks模板语法， Nunjucks
  和velocity模板技术，可以看下 使用 Velocity 模板引擎快速生成代码

模板开发

• 凤蝶初始化
  执行 fengdie init
  
  1. 选择模板包
     
  2. 输入包名
     
  3. 输入版本号
     
  4. 输入标题
     
     初始化模板包结束

模板包目录结构如下:

文件功能说明

1. README.md —— 模板使用说明文件
2. dist目录 —— 静态文件存放目录
3. fengdie.config.js —— 凤蝶功能配置文件
4. index.html —— 应用首⻚文件
5. layouts/default.html —— 所有应用⻚面的布局文件
6. package.json —— 模板包的说明文件
7. schemas/config.schema —— 应用⻚面中可配置的内容描述文件
8. schemas/config.json —— 与config.schema对应mock数据文件
9. snapshot.png —— 模板在凤蝶上显示的缩略图

开发模板

1. 按照需求修改index.html文件
   
2. 修改schemacs/config.schema文件

Object(配置) {
  activities(车主服务活动): Array {
    href(活动链接),
    title(标题),
    statusImg(状态图片): Image,
    img(图片地址): Image,
    desc(描述): String
    }
}

1. 打包
   进入凤蝶项目跟目录，执行fengdie zip命令

2. 登录凤蝶系统上传模板包
   

3. 这时在我的模板里就可以看到刚刚上传的模板包,点击模板就可以维护模板了
   

4. 设置完模板数据点击编辑完成->发布,就可以使用模板了

详细信息请查看凤蝶开发手册

区块开发

1. 区块包初始化
   fengdie init
   和模板包初始化相同
   

区块包目录结构如下

文件功能说明

1. README.md —— 区块使用说明文件
2. fengdie.config.js —— 凤蝶功能配置文件
3. package.json —— 区块包的说明文件
4. sample/asd.schema —— 应用⻚面中可配置的内容描述文件
5. topbars.vm —— 代码片段文件
6. snapshot.png —— 区块包在凤蝶上显示的缩略图

开发区块

1. 修改topbars.vm文件

<!-- 区块模板样例 -->
<!-- 1. schema 的使用 -->
<!-- 1.1 引用路径从包目录开始 -->
<!-- 1.2 使用指南请查看 https://site.alipay.net/fengdie/dev-guide/datum/schema.html -->
#cmsparse("vbizplatform/sample/ads.utf8.vm")
#foreach($info in $fd_vbizplatform_sample_ads)
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
#if($info.get("jiaobiao"))
<img src="$info.get("jiaobiao")" class="index-grid-9-new-icon">
#end
#if($info.get("href"))
<a href="$info.get("href"))">
#end
<img src="$info.get("img")" class="carui-img-height">
<div class="mui-media-body carui-active-title">$info.get("title")</div>
<div class="mui-media-body carui-active-desc">$info.get("desc")</div>
</a>    
#end
<!-- 2. 可以继续引入多个 schema -->

1. 修改ads.schema文件

Array(viewnine) {
  href(跳转连接),
  title(标题),
  desc(描述),
  img(图片路径),
  jiaobiao(角标路径)
}

1. 上传区块包，并维护数据。
   

2. 保存，同步到环境,提示执行成功。
   
   注意： 发布成功后，凤蝶系统，会把topbars.vm文件和生成的模板数据文件放到应用机器的/home/admin/uiweb/fengdie/目录下
   (凤蝶系统先把区块包发到oss上，然后调用openapi通知ecs，ecs访问oss把凤蝶区块下载到/home/admin/uiweb/fengdie/目录下)
   模板数据文件:
   

3. 编写java代码解析,vm模板文件

    /**
     * 根据vm模版动态生成html
     * 
     * @return 生成后html代码
     */
    protected String invokeVelocityDynamicCreateHtml(String url) {
        //初始化并取得Velocity引擎
        VelocityEngine ve = new VelocityEngine();
        Properties pros = new Properties();
        //取得velocity的上下文context
        VelocityContext context = new VelocityContext();
        StringWriter write = new StringWriter();
        //取得velocity的模版
        Template t = null;
        try {
            InputStream is = BaseController.class.getClassLoader().getResourceAsStream("config/velocity.properties");
            InputStreamReader in = new InputStreamReader(is);
            pros.load(in);
            ve.init(pros);
            t = ve.getTemplate(url);
            t.merge(context, write);
        } catch (Throwable e) {
            logger.error("根据velocity生成html异常", e);
            return "";
        }
        logger.info("调用vm生成成功,html={}", write.toString());
        return write.toString();
    }

我的velocity.properties配置文件

#encoding
input.encoding=UTF-8
output.encoding=UTF-8
contentType=text/html;charset=UTF-8
# 加载文件方式
# resource.loader = file
# 模版位置
file.resource.loader.path = /home/admin/uiweb/fengdie
# 是否缓存
file.resource.loader.cache = true
# 不输出日志文件
runtime.log.logsystem.class=org.apache.velocity.runtime.log.NullLogChute
# org.apache.velocity.runtime.log.NullLogChute

1. 然后把生成的html代码输出到页面上。

*这里我使用的原生velocity解析，也可以使用SOFA-Lite

详细信息请查看凤蝶开发手册