高扩展的在线网页制作平台-码良正式开源

在前一篇介绍了如何实现一个高扩展的在线网页制作平台，推荐先移驾到这里查看 如何设计高扩展的在线网页制作平台 这样才知道是啥东西。前一篇文章也提到过我们一直在计划在合适的时候把项目放出来让大家一起用用，提提建议，经过接近1年的不断迭代，以及在公司各个活动的挑战下不断优化，最终觉得是时候放出来了。目前还是有很多要优化的地方，所以也希望使用者多提供反馈和关注。

1. 目前我们提供了一个线上直接可以使用体验的版本godspen.ymm56.com 可以直接注册体验。
2. 一个可以自行部署到自己服务器的 docker 版本 github.com/ymm-tech/go… 。

都欢迎大家体验和反馈。以及加加 star 什么的。后期的项目源码我们会放到这个项目。 欢迎大家提前star github.com/ymm-tech/go…

这次先为大家来介绍下在码良平台如何去对一个组件进行功能扩展。这次我们做个简单的功能，拖动一个图片，给图篇添加点击事件，然后在点击事件里面进行打点和页面跳转。

创建页面添加脚本

你可以先去 godspen.ymm56.com/doc/cookboo… 了解下项目里面的团队，项目，页面各自的意思。这里就当你已经看过。我们创建好了一个页面并进入了编辑界面如下。

我们添加了一段demo2脚本如下，前面的文章我们介绍过所有添加的脚本其实就是一个标准的vue 对象。对熟悉vue的同学会非常容易理解和使用。

return {
  props: {
    // 这里还能配置很多类型的属性，可以查看文档  http://godspen.ymm56.com/doc/develop/script.html#%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7
    url: {
      type: String,
      editor: {
        label: '网页跳转地址',
      }
    },
  },
  // 自定义方法的使用详细文档  http://godspen.ymm56.com/doc/develop/script.html#%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B9%E6%B3%95
  editerMethods: {
    myjump:{
      label:'页面跳转',
      params:[]
    },
    logTrack: {
      label: '通用打点',
      params: [
        {
          label: '动作（action）',
          desc: '可输入字母、数字、下划线，用以区分打点动作，本页面内需唯一，如 play_music',
          type: 'string'
        },
        {
          label: '标签（label）',
          desc: '可输入字母、数字、下划线，用以表示动作的状态、特征、种类、结果等，如 classic_music',
          type: 'string'
        }
      ]
    }
  },
  methods: {
    async logTrack (action = '', label = '') {
      if (!action) return
      // 这里你可以进行打点，或者其他的处理
      var Truck = this.$options.Truck
      var ESlog = Truck && Truck.ESlog
      await ESlog.track({
        page_id: this.$route.params && this.$route.params.pageKey || '',
        app_id: 'tview',
        action: action,
        label: label
      })
    },
    myjump(){
      window.location.href = this.url;
    }
  }
}
复制代码

该脚本添加后就会在组件的属性上多出一些可设置的属性和可调用的方法方便再编辑器里面选择。

这样你就为一个简单的图片添加了点击跳转并打点的功能。 你可以把你这次编辑的脚本保存为模板脚本。为其他人提供使用。为后面自己快速使用。

总结

这次比较初略的介绍了下码良的脚本添加功能，需要整体了解功能和实现还是推荐先阅读第一篇设计介绍。本次主要的目的是告诉大家码良这个项目开始对外提供服务和自行部署。也欢迎大家使用提建议。我们会在过段时间进行源代码开源。