升级基础库到 3.0 - 友好速搭主题

友好速搭

开发文档 > 主题开发 > 主题开发 > 升级主题 > 升级基础库到 3.0
主题开发
快速入门 修改主题 制作主题 销售主题 升级主题

升级基础库到 3.0

文件更新:

  • Layout/theme.html
  • Layout/mobile.html

文件新增:

  • Snippets/data.html

功能特点:

  • 基于 Vue.js 生态重构网站基础业务;
  • 响应式设计,适配不同端不同大小窗口;
  • 易于迭代更新网站功能;
  • 支持 SaaS 系统的新评价功能;
  • 兼容原有的旧评价插件(此插件将不再开发迭代,请尽快迁到新评价功能);
  • 兼容后端渲染主题(Liquid),且核心业务代码能用于新型主题;
  • 主题方向逐渐由后端渲染转到前端渲染,基于现有系统架构让网站前台更开放和灵活,同时也让前端开发效率更高。

相关说明:

  • 修改位置可参考「藤煤竹」主题相关代码;
  • 修改组件 DOM 结构:
    • 请参考 Vue 生命周期相关资料;
    • 可以通过JSSDK.events.subscribe()去订阅事件(查看文档);
    • 组件生命周期事件回调返回第一个参数(vm)为相关组件 Vue 实例,vm.$el为组件 DOM 实例;
    • 暂时只开放部分组件部分 Vue 生命周期事件;
  • 修改组件样式:
    • 全局标准 CSS 变量和组件的全局 CSS 变量还在前期规划,暂时不公开;
    • 建议前期直接新增自定义 CSS 样式去重置默认样式;
    • 样式优先级问题:
      • 可以在相关页面模板底部引入「内部样式表」(<style>/* Style Code... */</style>);
  • 基础库到 3.0 的「功能插件」都基于 plugins.js:
    • 业务代码基于旧有代码移植,后续会基于 Vue.js 生态重构并迁入 base.js;
    • 功能插件有:
      • SaaS 系统的新评价功能插件。
  • 部分 JS 引入需设置crossoriginasync属性;
  • UI 和视觉相关后续会优化,前期业务功能迭代优先;

新增 Snippets/data.html

内容如下:

<script>
  window.$$shop = {{ shop | json }}
  window.$$settings = {{ settings | json }}
</script>

修改 Layout/theme.html 和 Layout/mobile.html

添加 Resource Hints - preconnect

<!-- 一般放 <link rel="preconnect" href="//res.wx.qq.com"> 下面 -->
<link rel="preload" href="{{ '../theme/base/0.1.0/js/base.js' | global_asset_url }}" as="script" crossorigin>

添加 Snippets/data.html 引入

<!-- 一般放 {{ content_for_header }} 下面 -->
{% include 'data' %}

添加 base.js 和 plugins.js

<script src="{{ '../theme/base/0.1.0/js/base.js' | global_asset_url }}" crossorigin></script>
<!-- 一般放 youpage.min.js 上面 -->

<!-- 一般放 <body> 内的最下面 -->
<script src="{{ '../theme/base/0.1.0/js/plugins.js' | global_asset_url }}" async crossorigin></script>

简单测试用例

  • 抽查页面,JS 代码运行不报错;
  • 登录和注册流程正常;
  • 免登陆购买流程正常;
  • 无登录购买流程正常(添加购物车 > 提交购物车 > 跳转登录 > 登录后跳转提交订单页 > 提交订单成功 > 支付成功 > 订单详情页)。
免费领取15天试用
立即注册
联系客服
微信咨询
微信二维码

领取免费试用资格

姓名 *

电话 *

公司名称

所在地区

意向产品

提交

提交成功

你好, XXX女士/先生 ,你的需求已提交成功,后续会有专门的客户经理与你电话联系。谢谢!