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

新手入门

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

页面搭建

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

智能营销

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

数据洞察

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

开发者指南

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

账户与套餐

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

产品使用条款

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

自定义变量

1、什么是自定义变量?

自定义变量是灵蹊内部维护的各种状态,可以通过链接设置、代码控制等改变这种状态,状态的变化可以响应式的体现到界面上:根据状态(变量)变化,可以渲染模板、控制元素class、控制元素隐藏显示等。

2、为什么需要自定义变量

请看下面的场景:

场景1)、在落地页中,比如教育类落地页,会有价格、折扣甚至库存等信息,这种信息是动态的,需要通过API从数据后台动态读取的,所以必有如下流程:请求API-->获取需要信息-->渲染数据到指定元素。
在上述这个场景中,出现的可能复杂的点是:价格、折扣、库存等信息显示位置不止一处,且显示样式不同(在灵蹊中显示样式不同,可能意味着DOM结构不同)。
使用传统方式,需要访问各处DOM,设置对应的值,维护程度可想而知,任何DOM的变化都可能导致模块无法正常工作。
使用变量,只要为每个需要显示的位置绑定变量,请求回来后为对应的变量赋值,那么就可以保证所有绑定的变量被替换为具体的值;样式单独编辑,变量只负责绑定数据,实现样式和内容分离,维护和复用更为方便。

场景2)、落地页中,有很多场景的展示与否是有条件的,比如用户设置挽留弹窗,是根据是否支付来确定是否出现挽留弹窗或者弹窗内容;又比如用户是否登录、是否购买等展示内容是不一致的。
使用变量,我们可以方便的控制各种状态切换以及控制对应项目的显示隐藏,这种控制可以作用于组件、区块和弹窗。

3、如何绑定模板变量

双击进入文本编辑,选中要绑定变量的文本,点击菜单即可

设置后,可以对变量$global.price做赋值运算,支持同步和异步

4、如何通过变量控制显示隐藏

选中元素(区块、弹窗)-->进入高级设置即可

设置了条件展示之后,我们可以通过直接改变popup变量的方式来控制被绑定元素的状态(显示、隐藏),比如通过按钮来改变变量状态,可以添加按钮,设置链接来实现

这样设置的含义是:当点击发生时,变量popup会被修改为1,满足上图中弹窗设置的显示条件,弹窗会自动显示。

5、如何用变量控制组件class

有时,我们需要根据不同状态对元素显示不同效果,比如tab切换时tab签的效果变换、以及轮播图元素的选中非选中效果,如下图(PS:变量并不能简单的实现复杂的轮播图和tab切换效果)

这种情况下,我们可以为需要动态变化的元素设置一个class,通过变量来控制元素是否应用这个class。

设置方式:选中元素-->进入高级设置

如上图,当变量p的值为p1时,class active 被添加到绑定该变量的元素上,否则会被移除

综上,可以使用变量去渲染模板、控制元素(显示隐藏)、动态添加class。所有页面变量都是响应式的,可以再任何实际去做改变,任何状态的改变都会同步更新到用户界面上。

自定义组件开发

Powered by BetterDocs

发表评论 取消回复

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