跳到主要内容

测试应用

测试应用分三步，需依次完成：

  1. 创建开发店铺（第一步）：用于安装尚未上架应用的沙箱店铺，只需创建一次。
  2. 安装应用（第二步）：具体步骤取决于你的后台完成到哪一步。
  3. 验证应用功能（第三步）：检查核心功能和各类扩展。

你属于哪种场景？​

场景适用情况
场景一：仅测试安装流程刚用 CLI 创建工程，前端业务界面、后台服务、OAuth 流程都还没实现。
场景二：后台服务在本地你完成了开发独立应用或开发嵌入式应用（如需收费，已完成计费配置），后台跑在你自己的机器上。
场景三：后台服务在远程服务器后台单独开发，部署在有公网域名的服务器上，OAuth 回调路由已经实现。

第一步：创建开发店铺​

开发中的应用无法上架应用市场，商家没法直接安装，因此需要通过开发店铺来测试。开发店铺是专门提供给合作伙伴的沙箱店铺类型。

两点说明：

  • 开发店铺可以安装和测试同一合作伙伴账号下的应用。
  • 每个合作伙伴账号最多创建 10 个开发店铺，且不可转让。
  1. 在 Shoplazza Partners 中点击"选择店铺"

  1. 点击"添加店铺"

  1. 输入"店铺名称"和"店铺 URL"，然后点击"创建"

第二步：安装应用​

场景一：仅测试安装流程​

后台还没实现，应用无法自行完成安装，由 shoplazza app dev 内置的服务临时充当授权服务：

  1. 在工程根目录运行 shoplazza app dev，并保持运行

  2. 把终端打印的 App URL 和 Redirect URL 填入 Partners 后台的应用设置

  3. 在浏览器打开 Install URL，完成授权安装

备注

这样装上的只是一个应用壳，没有实际功能；如需正式发布给商家使用，需按开发独立应用补全应用功能。

场景二：后台服务在本地​

Shoplazza 需要通过公网地址访问你本地运行的服务来完成安装授权，这就是 ngrok 的作用。

  1. 在工程根目录运行 shoplazza app dev，它会把项目里的扩展代码（主题 / 结账 / 函数）推送到开发者自己的测试店铺。没有扩展的话可以跳过这一步。

  2. 启动你的服务，应用服务和 ngrok 隧道各占一个终端：

    # 启动应用服务
    npm run start
    # 启动 ngrok，把本地 3000 端口映射到一个公网地址
    ngrok http 3000

    ngrok 启动后会打印一个公网地址（形如 https://xxx.ngrok-free.dev）

  3. 在 Partners 中，把这个地址填入应用设置：

    • App URL 填 https://xxx.ngrok-free.dev/auth
    • Redirect URL 填 https://xxx.ngrok-free.dev/auth/callback

    Image

  4. 点击"应用详情页 → 应用测试 → 选择店铺 → 安装App"

    Image

  5. 重定向到 Shoplazza 授权页面后，点击"安装App"

    Image

  6. 授权成功后：独立应用会重定向到应用首页，嵌入式应用则以 iframe 形式在店铺后台中打开

    Image

场景三：后台服务在远程服务器​

本地 app 工程只保留前端业务界面和扩展，OAuth 授权、token 保管与 OpenAPI 调用都在远程后台完成。

  1. 在工程根目录运行 shoplazza app dev，它会把项目里的扩展代码（主题 / 结账 / 函数）推送到开发者自己的测试店铺。没有扩展的话可以跳过这一步。

  2. 把远程服务的地址填入 Partners 后台的应用设置：

    • App URL 填 https://你的域名/auth
    • Redirect URL 填 https://你的域名/auth/callback

    路径以远程服务实际实现的为准，与这里填写的一致即可。

  3. 点击"应用详情页 → 应用测试 → 选择店铺 → 安装App"

    Image

  4. 重定向到 Shoplazza 授权页面后，点击"安装App"。授权本身由你的远程服务处理。

    Image

  5. 授权成功后：独立应用会重定向到应用首页，嵌入式应用则以 iframe 形式在店铺后台中打开

    Image

  6. 直接调用远程后台的接口来调试业务逻辑：本地应用不持有 Shoplazza token，业务请求发给远程后台，由后台用其保存的 token 调用 OpenAPI 并返回结果（token 的获取与存储见 App 授权参考）。

第三步：测试应用功能​

逐一验证应用的核心功能是否符合预期。以开发独立应用教程构建的示例应用为例：

  1. 在应用首页点击"生成商品"按钮

  2. 几秒后会看到创建成功的提示和商品详情

    Image

  3. 登录 Shoplazza 店铺后台，在"商品"页面查看刚创建的商品

    Image

如果应用带有扩展，按扩展类型逐一验证：

  • 主题扩展：进入店铺后台的 在线商店 > 主题编辑器。

    • Basic（App Block）：把区块添加到支持 @app 的 section 中，查看渲染效果。

    • Embed（App Embed Block）：默认处于关闭状态，先在 App 管理 中打开开关，再查看店面效果。

  • 结账扩展：打开店面，走到结账页，查看内容是否注入到了配置的扩展点。

  • 函数扩展：打开店面执行加入购物车操作，查看价格修改函数是否生效。

扩展没有出现时，参考主题扩展指南和结账扩展指南的排障小节。

下一步​

确认应用在开发店铺中运行正常后，继续阅读提交审核。