接入指南

1. 开发配置

推荐使用 微信开发者工具 进行小程序的预览、调试工作

1.1 本地环境要求

node >= 16.0.0
npm  >= 7.10.0

# 推荐使用 yarn 作为依赖管理工具
yarn >= 1.22.0

1.2 项目搭建

项目示例：官方物料库

1.2.1 创建并配置工程

# 创建项目工程目录
mkdir <your-project-name>
# 进入项目工程
cd <your-project-name>

# 初始化依赖环境
yarn init -y
# 引入开发依赖
yarn add @skylla/dev

1.2.2 配置 scripts 指令

{
  # 启动本地预览模式
  "dev": "skylla-dev",
  # 打包构建，用于发布部署
  "build": "skylla-render",
  # 服务编译调试
  "serve": "skylla-server"
}

1.3 小程序配置

项目实例：官方物料库小程序

1.3.1 初始化小程序工程

# 物料依赖基于 uni 版本: `3.0.0-alpha`

1. 使用 HBuilderX 创建 Vite 版本 Uni-App 项目

2. 在 `pages.json` 中添加如下配置：
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^m-(.*)": "@skylla/materials/src/$1/index.vue",
    }
  },
}

# 注：部分版本差异，可能引用路径需根据实际情况调整

1.3.2 通过组件方式将物料库引入项目

import mobox from '@skylla/dev/visual.vue'

export default {
  components: {
    mobox
  }
}

1.3.3 对物料内组件进行陈列

<!-- 示例: `source` 是从服务端获取到的 数据源 -->
<mobox :source="source">
  <template v-slot:mobox="{ data }">
    <!-- 示例: 参数 `data` 会将 source 源分流传递到组件 -->
    <m-sample v-if="data.name === `m-sample`" :source="data.source" />
  </template>
</mobox>

2. 参数说明

2.1 平台参数

• mode=mobox: （必须）启动电商模式
• page=modify: （可选）进入对应页面模式（默认：Modify 装修）
  • modify: 装修
  • home: 首页
  • goods-list: 商品列表
  • goods-detail: 商品详情
  • settlement: 结算
• material={material}: （必须）加载物料库，支持 http 开头地址
• version={version}: （必须）指定物料库版本 - 若 material 参数以 http 开头，则此参数失效
• domain={address}: （可选）物料库数据请求地址
• debug={material}: （可选）开启本地调试模式

2.2 SaaS 参数

• saas-token={int}: （SaaS）鉴权令牌
• saas-membercode={int}: （SaaS）会员 ID
• saas-tenantcode={int}: （SaaS）租户 ID
• modelTagvalueId={int}: （SaaS）模板 ID