饿了么

饿了么开放平台 https://open.shop.ele.me/openapi
基础组件研发：https://rax.js.org/docs/components/about 本地模块开发手册：https://alidocs.dingtalk.com/i/p/wY7kmboewDWGLq2N7kmb7Ln78Nk74GLq 表单组件配置说明文档：https://alidocs.dingtalk.com/i/p/wY7kmboewDWGLq2N7kmb79L8VjNy4GLq
https://alidocs.dingtalk.com/i/p/wY7kmboewDWGLq2N7kmb7nYxx2MjYGLq

组件开发

开发步骤

开发流程：
根据需求 - 设计大致需要使用的配置数据
配置数据完成 mock 的初步填充
依据 mock 数据 -> 转化为 schema 数据
进行用户页面编写

复制脚手架文件，

修改包名...

// package.json、abc.json  中修改包名,不一致会导致报错。
// @ali/estore- 为固定开头 ${username}为自身账号名称 xxx为ISV自定义模块名，保证唯一性

package.json中的name字段格式应该为: @ali/estore-{userName}-[a-zA-Z0-9]
"name": "@ali/estore-${username}-[a-zA-Z0-9]",

本地代理配置

将 dev.g.alicdn.com 代理到 g.alicdn.com。
// 官方建议：借助`Xswitch 插件`使用浏览器代理,而不是项目中的代理配置

开发

// schema.json 中配置 编辑器可控制的数据类型 - 编辑器面板数据 - 组件配置？
// mock.json 文件 配置本地开发时，可获取到的模拟数据 - 本地的编辑数据 - 组件数据？
props.data.$data  获取 mock.json 数据
// 组件编写
// schema特定组件-参看文档1、文档2： 商品组件、
// 界面显示组件使用-参看文档3（rax - 一套代码同时支持多端 ）

demo目录 // 购物车依赖本地缓存 （当模块需要使用购物车组件时，将本文件夹下文件复制到 node_module 中）



   // 理解:schema.json给用户编辑、mock.json本地自己模拟用户编辑的数据



   // 本地预览，需要在手机模拟环境下 pnpm run start
   // 打包 pnpm run build
   // 上传需要将build文件下所有文件打包成 tar.gz 格式压缩包 （不需要打包build文件夹本身，而是下面的文件）

   // 在build文件夹下：
   tar -czvf output.tar.gz *

饿了么后台-上传-真实环境模拟预览
- 管理中心、我的应用：饿了么切换为新零售、选择应用、去开发、
- 应用管理详情页面右上角、开发者后台、
- 应用中心、应用详情
  - 模块管理、新增模块、模块制作、修改数据
- 注意点：
  - 编辑器编辑数据后需要保存才能在预览生效。

注意事项：

项目名称必须保持一致，否则报错
node 版本 16+
包名规范- 参考文档 ①

关于数据

// schema.json
"key"值与对象key保存一致、与mock中的key保持一致
"$elName": "BaseInput", // 使用到的组件名，参看文档2
"name": "$theme", // 表单对象的属性名？，同key

...更多参数配置，参看antd同类表单组件

细节

使用 Image 图片组件时，必须设置图片宽高，否则在 ele 平台显示大小异常，可设置为 100%
flex 属性：
- align-items：end 不生效，可使用 flex-end
- 使用flex布局时，建议手动设置，align-content属性，在不同平台有不同默认值
padding："10rpx 10rpx" rpx 设置的本地样式简写不生效，但线上有效，建议本地不用简写
.module.css 中使用 rpx 不生效
设置默认的背景图、背景视频时需注意！当用户不上传新的数据，默认值无法被去除。
单位使用rpx，禁止使用px
使用“有赞”模板复制粘贴时，注意函数式组件中不应出现this.xx的写法，会导致线上空白！
表单有更新时需要重新拖拽模块到模版

商品价格规则

价格透出，现在价格有 4 个字段：当前价，到手价、划线价和会员价（黄色为免费会员，黑色为付费会员），最多透出 2 个价格：
透出优先级：商品现价、预估到手价、会员价、原价/划线价

商品组件规则

需要将 demo 中的内容复制一份到 node_modules 中
src/mobile/cartBtn 的 index.tsx 中需要注释掉 !!item && !!shopInfo &&，否则本地无效果

// schema中定义商品列表信息 必须使用 itemIds
// 外层数组名 必须使用 itemIdsList
// 例：mock数据
 "itemIdsList": [
      {
        "title": "绿色蔬菜热卖榜",
        "desc": "有机蔬菜 健康又美味",
        "itemIds": [
            {
                "name":"xxx"
                ...
            },
            {
                "name":"xxxs"
                ...
            },
        ]
      }
]

官方文档

设计思路

脚手架文件目前需要重复复制，可否借助 pnpm 管理，放在根目录，其中在设置多个项目，依赖同一份共同依赖，更便捷
或者一份脚手架中写过个模块（涉及打包...）
代理配置是否可以考虑使用项目中的配置（浏览器代理实测无效）

开发技术使用

支持 TypeScript、Less/Sass 等基础工程能力
rpx 单位：等同于 vw 750rpx==100vw
css module 支持且推荐

# 饿了么

# 组件开发

# 开发步骤

# 注意事项：

# 细节

# 商品价格规则

# 商品组件规则

# 官方文档

# 设计思路

# 开发技术使用

饿了么

组件开发

开发步骤

注意事项：

细节

商品价格规则

商品组件规则

官方文档

设计思路

开发技术使用