跳至正文
  • 新手入门
  • 功能分类
    • 页面搭建
    • 智能营销
    • 数据洞察
  • 产研文档
    • 开发者指南
    • 账户与套餐
    • 产品使用条款
    • 产品更新
  • 灵蹊内容社区
  • 返回灵蹊
  • 新手入门
  • 功能分类
    • 页面搭建
    • 智能营销
    • 数据洞察
  • 产研文档
    • 开发者指南
    • 账户与套餐
    • 产品使用条款
    • 产品更新
  • 灵蹊内容社区
  • 返回灵蹊

新手入门

  • 灵蹊能帮你做什么
  • 上手清单
  • 指标说明
  • 数据安全与服务可靠性
  • 使用灵蹊涉及的技术对接工作

页面搭建

画布操作
  • 区块
  • 元素
  • 点击动作
  • 交互效果
  • 动效
  • 取色器
  • 画布快捷键
  • 模板保存
PSD导入
  • PSD导入
  • PSD预处理指南
  • HTML转PSD
营销组件
  • 弹窗
  • 表单
  • 客服组件
  • 悬浮菜单
  • 视频
  • 二维码
  • 多状态面板
  • 标签页(Tab)
  • 手风琴菜单(折叠菜单)
  • 自定义组件——代码组件
  • 自定义组件——通用元素
  • 页面与组件兼容性
页面设置
  • 页面信息
  • 页面字体
  • 自定义CSS
  • 自定义JS代码
  • 微信设置
页面发布与版本管理
  • 页面预览与发布
  • 使用一个URL展示移动与PC版
  • 页面历史版本
页面管理
  • 页面列表

智能营销

个性化定向创意
  • 构建受众分组
  • 了解定向创意
  • 设置定向创意
  • 展示优先级
A/B测试与多版本测试
  • 设置A/B测试
智能创意
  • 了解智能创意
  • 智能创意与A/B测试对比
  • 智能创意的设计策略
  • 设置智能创意
  • 智能创意启动后
智能触发器
  • 弹窗自动触发

数据洞察

  • 数据汇总
  • 表单线索报告
  • 页面分析报告
  • 热图报告
  • 个性化创意报告
  • 筛选器

开发者指南

域名解析配置
  • 通过服务端转发把页面发布在自有域名
页面组件对接
  • 表单线索Webhook接入文档
媒体转化回传
  • 百度转化回传
转化回传灵蹊
  • 转化上报灵蹊-JS布码
  • 转化上报灵蹊 – API回传
自定义代码开发
  • 自定义变量
  • 自定义组件开发
  • 非UTF-8字符集处理声明
微信集成
  • 对接自有微信后台
  • 微信原生支付
支付集成
  • 微信原生支付
  • 自建收银台页面

账户与套餐

  • 来源管理
  • 安全认证
  • 绑定自己的域名
  • 转化设置
我的应用
  • 灵蹊销售锦囊
  • 53客服授权
  • 易聊通回传
权限与共享
  • 空间与团队
  • 资源共享

产品使用条款

  • 页面发布规范
  • 首页
  • 帮助文档
  • 开发者指南
  • 自定义代码开发
  • 自定义组件开发

自定义组件开发

灵蹊提供了自定义组件的能力用来扩展灵蹊产品本身能力,自定义组件能实现跨页面的组件粒度的复用,做到只写一次,到处复用的效果。
组件开发本身可以直接让前端开发者基于vue来开发(目前版本对vue单文件有限制支持)

1、模块入口(如图1)

2、灵蹊自定义组件组成部分

1)组件名称:用来显示组件
2)组件描述
3)组件插槽代码:在组件未渲染时占位用
4)源码(vue单文件组件代码,template、script、style)

3、灵蹊组件开发标准

1)代码格式,vue单文件格式(如图1)

图1

代码说明:

1.template部分和vue单文件组件中template使用方式完全一致,不做任何限制

2.script部分和vue单文件组件中组件开发规范完全一致,但内部代码为了兼容性建议使用ES5规范(目前灵蹊暂时不对源码做向下构建,后期会加)

3.css部分目前只支持原生css,暂时不支持预处理(后期会加)

4、开发实践

1)如何由外部传入变量(即vue组件props如何设置)?

通过定义组件props来定义

props中定义两个变量fontSize和color,在这两个属性中都存在一个desc的属性(最好添加,用来对外描述输入变量,如下图所示)

设置了props后,业务人员可以通过设置打开属性传递参数来改变组件样式或者行为

2)如何跨组件通信

如果页面中存在两个组件(A和B),B变化时需要通知A,那么组件A中声明props:global,在B组件中直接通过window.$global.xxx改变数据状态,A组件中this.global.xxx能同步变化。

3)如何访问组件挂载的Dom对象

在script部分,可直接通过root变量访问vue实例的挂载对象

4)开发方式
建议vscode中调试组件代码,然后组件代码直接copy到灵蹊自定义组件位置即可

5)demo代码(点击打开demo代码)

自定义变量 非UTF-8字符集处理声明

Powered by BetterDocs

发表评论 取消回复

要发表评论,您必须先登录。