升级基础库到 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 引入需设置
crossorigin
和async
属性; - 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 代码运行不报错;
- 登录和注册流程正常;
- 免登陆购买流程正常;
- 无登录购买流程正常(添加购物车 > 提交购物车 > 跳转登录 > 登录后跳转提交订单页 > 提交订单成功 > 支付成功 > 订单详情页)。