DIY装修

## 一.商城UI的创建

### 1.进入低代码设计插件

![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_112133_9583300.7998748462807338.png)

### 2.创建或新建微页面
![](/uploads/wlnsp/images/m_dad423da606be8cd9ee020ca354ddc92_r.png)

### 3.选择模版
![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_112339_6287220.3370795538420467.png)
找到适合的模版，然后选择加载，如果是有一定UI设计基础，可以选择使用空白模版自定义设计。

![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_112509_0569470.4697708543798793.png)
加载成功以后，就可以去低代码DIY了

### 4.编辑DIY页面

![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_112617_9352740.22214771541299227.png)
==如果是第一次接触低代码DIY设计，请点击学习下新手引导==
左边可以选择：所有基础组件，营销组件，其他组件等，也可以做下页面设置和背景设置
右边可以选择：风格，细节调整，样式更换，以及链接的选择
整个编辑完，可以选择右下角的保存
![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_112933_1593290.07948376866570384.png)
### 5.微页面设置首页UI
保存以后，返回微页面，设置首页

![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_113059_1659720.5074096885342737.png)

**当然了，您也可以在这里进行，UI的编辑，推广，首页设置渠道设置，设置浏览权限和分享设置等等**

![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_113222_5617520.5853717914671084.png)

到这里一般的低代码UI设计，就OK了,操作非常简单，就跟以前QQ空间DIY一样

## 二.自定义模块使用（进阶）
![](/uploads/wlnsp/images/m_2d55d8ce37e1c08260c43b7ec29442c9_r.png)

### 1 创建自定义模块
![](/uploads/wlnsp/images/m_b684e013f0938de5561ed227310fe9dc_r.png)

![](/uploads/wlnsp/images/m_579dfec35152fab51e3fff66eaf43130_r.png)

** 注意：唯一性组件例如快捷导航，关注公众号这种在微页面中设置，要使用自定义模块 **

### 2.设置首页
创建好微页面之后设置为首页
![](/uploads/wlnsp/images/m_bdd504c3f29e12bf0a4385e145fe09df_r.png)

### 3.其他地方调用
其他地方调用微页面（首页不需要）

### 4.链接器选择
在选择链接的地方，选择微页面
![](/uploads/wlnsp/images/m_f4993a2e9c7045c3ecea8407d859c092_r.png)

### 5.页签设置

**在微页面使用自定义模块组件——添加模块（选择模板）——再次点击添加模块（添加页签）——编辑页签**
![](/uploads/wlnsp/images/m_240be6ff9c12080cd578963f111169d7_r.png)

![](/uploads/wlnsp/images/m_69a3f8c19f1fb27dd550c620b4668288_r.png)

## 三.图片广告热区使用方法
### 1 选用图片广告组件
（右边选择图片样式，上传图片）
![](/uploads/wlnsp/images/m_0f7bfacc1c923c78cfb8e5a6c6dc77eb_r.png)

![](/uploads/wlnsp/images/m_23e56dea5ff2144d984b519f1a9491f2_r.png)

### 2 划分热区
直接选择链接或者划分热区：热区功能表示可以在一个图片中点击不同的区域跳转不同的链接
![](/uploads/wlnsp/images/m_daafd100bb2795c2bb81648486bd172a_r.png)

![](/uploads/wlnsp/images/m_7a1d0a4f297a09595851d554181981ea_r.png)

## 四.自定义授权页面使用规则
![](/uploads/wlnsp/images/m_dc859a63cc341afc247f7cc0420509f4_r.png)

**当开启开关，可以使用自己上传的授权图片来替换默认的授权弹框图片，点击划分热区，设置登陆区域跟取消区域**
![](/uploads/wlnsp/images/m_d4a30e4baf0a574d81e93f29b59b5b18_r.png)

## 五.模板市场使用

![](https://web.28.cq.cn/img/2023/10/09/2023-10-09_113920_0572550.7338173977702467.png)

## 六.关于DIY插件的介绍
![](https://web.28.cq.cn/img/2022/03/12/DIY逆天大改版_20220312114443304350.png)