控制台支持对有赞微商城的 H5 页面进行定制，让消费者在整个使用链路中的每个节点，包括进入店铺 -> 选择商品 -> 加入购物车 -> 下单支付 -> 支付完成 -> 查看订单 -> 售后管理 -> 个人中心，都支持根据自己的个性化场景，更改页面的基本组件，加入新的自定义组件，或嵌入自定义的流程页面，包括展示信息、展示方式、事件触发、处理流程等。
应用场景示例
商品详情页，希望能按照自己的场景展示商品基本信息、价格信息、商品描述等信息；可以仅删除商品基本信息组件，然后嵌入自己开发的商品基本信息展示模块。
商品详情页，浏览商品信息后 ，标准流程是点击立即下单进入下单页；可以基于自己的场景进行流程改造，点击立即下单进入自定义的发票信息填写流程，填写后再进入下单页。
定制流程
H5 页面的定制开发一般需要按照以下的流程进行。
路由配置
1、进入控制台 -> 开发环境 -> 应用配置 -> 路由配置 -> H5，选择想要定制的业务节点（以下单页为例）。
2、点击新增页面模板，设置页面模板名称，选择页面模板。
-页面模板名称：按需设置，主要用于辨识区分。
-页面模板：以实际下拉列表中的为准，按需选取。
3、选择对应的模板类型之后，自动增加业务标识和自定义业务标识配置，具体配置请参考业务标识配置文档。
4、点击保存，完成页面模板创建。
自定义组件开发
1、下载标准工程。
2、安装依赖
-版本依赖
node >= V8.11.1
npm >= V5.6.0
-安装全局依赖
在任何目录下，执行如下命令。
copy-安装项目依赖
进入到 H5 定制开发目录（h5-extension 目录），执行如下命令。
copy3、开始开发
-h5-extension 目录说明
h5-extension 目录为 H5 定制开发目录，含义如下。
|-- dist 构建结果
|-- src 源码目录
| |-- _global 全局组件目录（目录名固定）
| |-- node_buy 下单页节点（和有赞提供节点标识一致，更多节点标识可在下方表格中查看）
| |-- _common 节点级组件目录（目录名固定）
| |-- buy 下单页模版（和有赞提供模版标识一致，更多模板标识可在下方表格中查看）
| |-- components 自定义组件目录（目录名固定）
| |-- Xxx 自定义组件
| |-- App.vue 自定义组件指定入口文件
|--package.json
copy【注意】
-所有目录名都有具体要求，请开发时确认正确。
-请确认 App.vue 文件命名正确。例如 APP.vue 等错误命名会导致自定义组件无法加载。
| 节点 | 节点标识 | 模板 | 模板标识 |
|---|---|---|---|
| 店铺 | node_shop | 店铺选择页 | shop-select |
| 商品详情 | node_goods-detail | 新版商品详情页 | goods-detail__v2 |
| 购物车 | node_cart | 购物车页 | cart |
| 下单 | node_buy | 下单页 | buy |
| 课程下单页 | edu-buy | ||
| 交付 | node_order-pay-result | 支付结果页 | order-pay-result |
| 支付 | node_pay | 我的储值页 | card-index |
| 储值卡购买页 | gift-card-buy | ||
| 订单管理 | node_order-detail | 订单列表页 | order-list |
| 订单详情页 | order-detail | ||
| 售后 | node_refund | 批量退款选择商品页 | batch-refund-select-goods |
| 会员中心 | node_member-center | 销售员中心页 | salesman-center |
| 授权登录页 | user-authorize | ||
| 积分兑换详情页 | exchange-details | ||
| 积分兑换结果页 | exchange-result | ||
| 会员中心页 | member-center |
-自定义组件开发
组件为 Vue 文件，组件入口文件名为 App.vue，其他文件名没有要求，可以自定义。如果之前没有开发过 Vue 组件，可以参考 Vue 官方文档。以下为 Vue 组件的代码示例。
【注意】
-组件配置内需要声明 title 属性和 name 属性，name 属性会在后台配置组件的时候作为唯一标识（不能重复），title 属性会作为组件名称展示到配置页面。
-建议使用 Vant 组件库进行开发，Vant 是有赞官方维护的移动端 Vue 组件库，使用有赞统一的视觉标准。
-自定义组件发布
自定义组件开发完成后，进入 package.json 所在目录，执行 npm run release，即可将自定义组件发布到电商云后台。
到这里已经看到打包成功，接下来就可以进行组件配置了。
【注意】
-首次发布需要输入手机号、gitToken，验证通过后才可发布。
-Windows 系统如出现乱码及其他问题，请参考 Windows 系统乱码及常见问题。
组件配置
应用分为开发环境和生产环境，组件配置需要在开发环境下完成。两个环境的区别，请参考：应用环境介绍。
组件配置包括基本组件配置和自定义组件配置，相关概念请参考前端定制开发的名词解释部分。
在开启状态下，点击编辑模板进入 UI 编辑页面，进行组件的配置。
【注意】
不同类型的应用，在编辑模板时支持的编辑能力不同。与自用型应用相比，工具型应用不支持基础组件的添加、删除、和调整顺序。请以实际界面为准。
1、添加基础组件/自定义组件
点击右侧组件管理列表中的添加组件，在弹窗中选择需要添加的基础组件或自定义组件。
基础组件会配置在官方默认位置；自定义组件会配置在页面的最后（以商详页为例）。
2、删除基础组件/自定义组件
在右侧组件管理列表中，点击需要删除的组件右侧的x，即可删除该组件。
3、替换基础组件/自定义组件
在右侧组件管理列表中，点击需要替换的组件右侧的替换，在弹窗中选择需要替换的自定义组件。
【注意】
-进行组件替换时，请确认替换前后组件的功能差异性，若组件功能差异过大，建议新增组件，不推荐替换组件。
-若确实不需要某个基础组件能力，可通过替换为 0px 空组件的形式进行替换。
4、更改基础组件/自定义组件顺序
选中组件管理列表中的某个组件，可以拖到列表上下任意位置。
5、配置组件属性
在组件管理列表中，部分基础组件的右侧有配置按钮，点击后，右侧浮现出组件属性模块，可配置该属性并应用至原基础组件。
6、重置组件默认配置
对于基础组件，在进行过替换基础组件或配置组件属性操作后，右侧会出现重置按钮，点击后组件信息和组件属性将重置为原基础组件的能力及样式。
7、保存配置
点击页面右上角的保存，完成组件配置。
【注意】
一定要点击保存，否则配置不会生效。
配置发布
基本组件和自定义组件配置完成之后，都需要进行保存发布，只有发布成功定制的内容才会生效。
1、保存好配置后，选择控制台 -> 开发环境 -> 持续集成 -> 构建计划 -> 前端构建计划，点击立即构建（首次操作需要添加前端构建计划）；如涉及后端代码变更，还需要执行Java服务构建计划。
2、开发环境构建完毕后，切换到生产环境的应用部署，选择在开发环境打包好的镜像，点击确认进行发布，发布完成后定制即可生效。
注意事项
1、H5 定制，不支持在快手、陌陌、爱逛等平台展示前端定制逻辑。
2、第三方开发者编写的代码会运行在沙箱环境中，以保证的业务稳定性和数据安全性。
3、针对开发过程中可能遇到的跨域问题，请参见跨域问题处理。
