背景
最近在做 Shopify 相关的项目，在找相关资料的时候，发现中文社区的资料比较少，所以将自己遇到的一些问题和经验总结出来，希望能跟志同道合的朋友们一起学习。
技术背景
- 本文使用 Shopify 官方推荐的 Remix.js 框架作为基础框架。
- 本文使用 Shopify 官方脚手架 Shopify CLI。
tips:
- 本文不会详细讲解 Shopify CLI 和 Remix.js 的细节，建议感兴趣的同学直接阅读文末的官网链接。
- 本文不涉及项目发布和实际开发，仅起到一个入门的效果，可以视为是官方教程的一个实战演示。
目录
- 准备工作
- 项目创建
- 项目运行
- 常见问题
准备工作
-
设置语言为中文（可选项）
-
点开右上角头像，选择 "Your profile"
-
设置 “Preferred language”，选择中文，右上角点击 “Save” 即可。
-
-
创建一个用于测试的开发商店
- 根据你的需要选择对应选项，并填入相关商店名称
-
至此，你已经创建了一个可以在线访问的 Shopify 商店，尝试通过下面的步骤进行商店产品的预览。
-
可以在“产品”中，任意点开一个预览商店，查看实际效果
-
点开预览后的效果展示
-
项目创建
- 安装 Shopify CLI ：
npm install -g @shopify/cli@latest - 校验是否安装成功：
shopify --version，如果有版本输出，则安装成功 - 创建项目：
shopify app init - 输入项目名称
- 选择
Start with Remix (recommended) - 选择开发语言
- 安装完成，效果如下：
项目运行
- 按照项目创建完之后给我们的提示，进入项目目录：
cd your-project-folder - 运行项目：
shopify app dev - 选择公司/组织
- 选择创建一个新项目
- 填入 App 名称，默认为项目名称
- 选择一个商店，可以选择我们之前创建好的商店
- 选择自动更新
- 如果中途遇到需要登录，则正常跳转到浏览器登录即可
- 按 P 字母或直接输入预览地址，预览项目
- 完整运行示例如下：
- 打开预览页面，并安装项目
- 安装成功后，会自动跳转到 App 页面，如果加载比较慢，可以刷新页面
- 至此，我们完成了一个 App 应用的创建、安装和运行操作，但仅限于本地开发和测试使用，最终上线一款 App 还有很多其他工作要做，本文暂不深入。
常见问题
- 网络问题
- 问题描述：包括无法正常访问 Shopify 相关的网站，以及创建项目、启动项目失败等现象
- 解决方案：极大原因是网络问题，因为 Shopify 对国内的支持程度并不友好，所以建议在开发 Shopify 相关项目时，全程保持可访问谷歌的状态，最好选择新加坡、美国等网络。
- 本地服务关闭后，App 页面无法打开
-
问题描述：本地项目关闭后，开发商店的页面无法正常显示
-
解决方案：这是因为
shopify app dev运行的原理是，通过将本地的服务，利用 cloudflared （shopify 免费支持）的随机域名 + 内网透传的方式，让互联网其他用户可以在你创建的 Shopify Store 的 admin 后台访问到你本地启动的这个 App。当然也可以通过一些配置方式，来实现透传到你自定义的域名下，以此替换到 Shopify 随机产生的 cloudflared 域名。如果想让本地服务关闭后，App 依然可以访问，则需要将服务部署到线上服务器。
-
- 在创建项目时，有一个名词叫“不可转让的商店”
- 问题描述：如果选择了不可转让，则意味着未来上线时，这个商店不能直接转让给其他客户，只能当前账号使用。
- 解决方案：当我们在开发阶段，一定不要用未来准备直接上线的商店来开发，因为在本地开发时，必然需要用到 preview 预览功能，而一旦使用这个功能，则该开发商店变会成为不可转让的商店。
参考文档
- Remix.js 官方文档：remix.run/docs/en/mai…
- Shopify CLI 官方文档：shopify.dev/docs/api/sh…
- Shopify Build App 官方教程：shopify.dev/docs/apps/b…
- Shopify App Remix 开发教程：shopify.dev/docs/api/sh…
- Shopify Partners 官网：www.shopify.com/partners
浏览知识共享许可协议
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
