Evlop 内置了丰富的免代码区块。当您需要特定功能时，还可以添加自定义区块。请根据您的技能和使用场景选择合适的方式：运行在应用内的 React Native 区块，或使用 HTML、CSS、JS、Tailwind 和 Liquid 构建、在 WebView 中渲染的 HTML 区块。
1) 使用 React Native 创建自定义区块
它是什么
React Native 区块是原生应用的一部分，最适合实现流畅的 UI、手势、动画、离线行为和设备功能。
可用的工具
@evlop/native-component，提供统一的 UI 基础组件@evlop/shopify，可访问商品、系列、购物车、metafields、metaobjects、客户等店铺数据- 自定义区块编辑器
package.json中列出的所有 npm 包均可导入使用
何时选择这种方式
- 您需要高性能或复杂的交互
- 您希望使用原生导航和设备 API
- 您计划缓存数据或应对不稳定的网络
实用技巧
- 保持区块设置简洁且可序列化
- 对依赖进行选择，以控制捆绑体积
- 在首页、产品页和集合页进行测试
- 验证可访问性、加载情况和空状态
2) 使用 HTML 创建自定义区块
它是什么
HTML 区块在 WebView 中运行。使用 HTML、CSS、JS、Tailwind 和 Liquid 快速迭代。
数据与限制
- 使用 Liquid 访问 Shopify 上下文，例如当前产品或当前集合
- 此上下文中不可获取客户信息
导航
- Evlop 网络桥接会在存在匹配的应用屏幕时，将普通
<a href>链接升级为原生导航
何时选择此方式
- 经常变更的营销或编辑内容
- 展示产品或集合详情的轻量部件
- 偏好 Tailwind 与简易 JavaScript 的团队
实用技巧
- 使用 Tailwind 实用类先行设计移动端
- 保持脚本轻量，避免使用庞大框架
- 使用标准锚点，以便网络桥接能够原生路由
- 检查对比度、间距和加载时间
总结
自定义区块让您无需重新发明轮子即可根据店铺需求定制应用。选择 React Native 以获得性能和深度集成，或选择 HTML 以实现快速和内容驱动的小部件。