设计

设计用于在小程序骗审以及审核通过之后设计小程序页面  
**1.页面设计**  
页面设计是设计小程序的页面的  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/fa2ba64dbaeb479a905e2a95fe6a2d605496.png)  
点击添加之后，左边是可以直接添加的元素组件，中间是在手机上的预览图，右边是选择组件之后的编辑组件页面，不选择组件的话就是编辑标题  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/8e16063fb62f455b8995e8318be0b3015629.png)  
下面是左边各个组件的说明：  
(1)公告1  
对公告可以进行自己的图标和小图标的设置，也可以隐藏，也可以对公告内容和点击公告跳转的链接进行选择，滚动速度是在设置多条公告时公告栏的消息滚动速度  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/bb930509ba064658b5c94c9a186186683276.png)  
(2)轮播图  
在此组件内可以设置多个图片进行轮播，点击重新选择图片之后选择上传的图片进行设置，右边的选择链接一样是设置在点击对应图片后会跳转的链接内容  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/ff8258ab006d4e4182ee49e067005d4a4135.png)  
(3)论坛  
点击此组件后会显示论坛内的内容，风格里面可以选择展示最新十条还是无限制展示，类型是默认，如果选择组局的话会展示组局插件的内容，展示浏览如果选择展示的话就可以看到帖子的浏览量  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/2cc0cf4222e749c7a65efa03dae5abb41930.png)  
(4)接单大厅  
此处显示的是已经在跑腿服务内设置好跑腿服务并且用户自己发起的服务需求内容，跑腿师傅可以在此处进行接单，同样可以显示最新十条或无限  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/0be6e068d29749c898f259391cf32ab75394.png)  
(5)搜索框  
添加此组件可以设置搜索框，可以搜索商家，商品，还有论坛内容，也可以对搜索按钮的文字颜色和背景颜色进行设置，还可以对提示文字，文字颜色，边框颜色和背景颜色进行设置，在跳转链接处还可以进行跳转设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/ec8ace099f914183a0b4c84bdacc0d292049.png)  
(6)签到  
签到组件在设置之后如果点击签到组件会跳转到系统设置好的签到界面，可以对组件内按钮的文字颜色，背景颜色，还有组件的边框和背景颜色进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/067ab4b3cde44024a1e0d17a59fca2969994.png)  
(7)单图  
设置一张图片并且设置点击图片时跳转的界面  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/b3b462f0e5524f11b726555b733f2a755498.png)  
(8)多图  
与单图类似，不过多图可以放多个图片显示以及设置对应连接界面  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/4613a233054f4c5e8cdd784c2bf205b21078.png)  
(9)图片魔方  
在设置一个固定的图框，在图框内选择不同的区域放置图片，同样可以设置跳转连接  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/bf8d6981abed425db3f1a395442cb6518099.png)  
(10)富文本  
设置一个文本框并对文字进行编辑，类似于word的基础功能，包括添加表格插入图片等  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/6bc9f2c3c91f478c8c9200fb692bc9529129.png)  
(11)视频展示  
可以上传一段视频并对播放控件以及播放属性等进行设置，具体请实际进行设置查看  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/a0bafe7db6f34f83a10b3b566450eae35604.png)  
(12)标题  
同样设置此组件时可以对组件内的文字，横线，图标进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/d0dc7a967a7c4b71bd764250eb7ec8164543.png)  
(13)列标导航  
设置一系列列表项并对字体颜色，大小，背景颜色，图标，备注等信息，跳转链接进行编辑设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/5c2ef89632f04fd4aadcab253080db265802.png)  
(14)文本  
跟富文本不同，文本组件只是对普通文本做一些简单修改，包括内容，大小，行高，文本位置，颜色，背景颜色，背景图片以及跳转链接  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/dc46c54b87c94a7a9b5b1a1d82638ca02114.png)  
(15)按钮  
添加一个按钮并对按钮自定义，包括按钮的文字，背景颜色，边框颜色，按钮字体大小，字体颜色，按钮宽度，高度，圆角度，组件的背景颜色以及跳转链接  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/f0347017cbef4d9daec05bb78e3aa5448170.png)  
(16)按钮导航  
就是把多个按钮聚集在一起，具体设置请参考界面右方，简单易懂就不多赘述了  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/03ba8774983e472f9dbc04b245df226b5493.png)  
(17)悬浮按钮  
在页面上悬浮一个按钮，可以设置按钮内容，位置，以及跳转链接  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/00dd96bd58d941708ad6196ed11bc9af5142.png)  
(18)辅助线  
在旁边的设置里可以定义辅助线高度，设置辅助线的颜色，辅助线组件的背景颜色，还有辅助线的样式，有实线、虚线、调点三种  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/8adb6665c0a5437bbec2041829f11be23562.png)  
(19)辅助空白  
设置空白高度和背景颜色  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/ca728103363d4276935429f852ce31d85894.png)  
(20)福利  
快速添加福利内容，加入正确的跳转链接即可跳转进入页面，左边有圆角度，风格设置有两种，可以对不同的商品进行不同设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/32fa4a97dfaf4f868df5e740a969b0614945.png)  
(21)选项卡  
设置多个选项，可以展示多个内容，右边选择标题风格，对标题文字相关属性进行设置，吸顶效果，和选项内容也可以调整一下看看变化  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/2ed50160b1254048a3c2f7ef7ee39ee11435.png)  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/8b51b332c6154a24bb59df0fe1eac1cd2089.png)  
(21)地图  
显示自己设置好的地址，在左边选择坐标内选择地址，同样可以设置地图高度  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/f1efeef9e9f9485abd12169c981d829e5567.png)  
(22)热区  
在一个背景图上设置多个区域，每个区域指向的链接可以不一样  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/8be7cca8dca44159a99372821d717b292291.png)  
(23)商城商品  
此处显示在商城团购内添加的商品，具体设置及效果可以在右边设置进行调试查看  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/2fc594df93fb468492325fcfaf10b35d1416.png)  
(24)拼团商品  
显示的是商品拼团内的商品，与商城商品类似，不过可以选择商品属性  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/b1082d9873854625b764b871b96db2d95731.png)  
(25)砍价商品  
显示的是砍价活动内的商品，可以选择商品来源，并且对显示样式进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/04be2256326f42ba98fc324739f4dbfe2353.png)  
(27)团购商品  
此处显示的是商城团购的商品，类似于上面拼团商品，设置很明了，不多赘述  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/6b3db2fd64db4c3cb668dd0697e802175519.png)  
(28)餐饮菜品  
类似于上面提到的各种商品设置，可以选择校区下的商家的菜品，并对其属性进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/45cf0eeddbd441b8a55bb98df331abc73687.png)  
(29)积分兑换  
此处显示的是积分兑换内的商品，同样可以对显示属性进行设置，并且可以选择商品来源  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/c92105d008874931b3a0cbd17f1545108841.png)  
(30)优惠券  
可以手动选择已经设置好的优惠券  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/8a644cdc5dfd493ca6aa0a2126fd9ffe6585.png)  
(31)文章列表  
此处显示的是资讯管理内的设置好的文章，右侧可以对文章的标题图，发布时间显示阅读量显示以及排序方式进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/6341df0fd03a4a70843f14d40f5ad0d93897.png)  
(32)表单  
此处可以选择自定义表单内设置的表单，并对按钮，输入框，分隔线等进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/26f057033c08455cafed141fc317c51b4971.png)  
(33)抖音短视频  
此处显示的是短视频下添加的视频，可以选择视频来源  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/49e6b9a9f8d24c0ea0dd8e2e6387c5ab4117.png)  
(34)商家  
此处显示的是校区下的商户，同样可以自己选择商家的来源以及商家的显示界面编辑  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/0516193c8240459883968dff9dcbbf949354.png)  
(35)跑腿服务  
此处显示的是跑腿服务内设置好的服务商品，供用户下单用，同样可以选择来源，编辑显示的样式  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/ad1f5e1436754b5485a17973d3cfb1a28155.png)  
(36)课程列表  
此处显示的课程管理内设置的课程,可以设置课程名称，学习人数，课程属性等  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/44f4cc0f1d52411fae15ac9b4f1f21576737.png)  
(37)小程序广告  
设置广告内容  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/92c6899672b241d289eb77bc70df7b245383.png)  
(38)cps  
对接好的插件就是这里显示  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/88ee506df208473f86b7d991fd3e02b48094.png)  
(39)会员信息  
对会员自己的信息显示机进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/5beabe36c4714241b037d4917d2adf992889.png)  
(40)排行榜  
可以显示商家销量，外卖接单数，跑腿接单数的排行榜，可以按照今日，本周，本月进行显示排行  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/02a409e764d546c9826c4ae83ed840394462.png)  
(41)创业助力  
可以在用户下单购买外卖商品，商城商品和跑腿服务时候增加对应的助力值，详见营销内的创业助力  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/2a2d99f3c04a4c51b475ebc1413aec1d1884.png)  
现在就设置项做说明  
强制登录是指在用户访问到此界面时如果用户未登录则会跳转到登录界面进行强制登录

跳转链接指的是用户点击这个组件之后会跳转到哪个界面，这个链接是页面短链，例如（/pages/index/index）

显示平台和显示范围是定义在哪些平台显示，又有哪些人可以看见

左右边距是这个组件对屏幕左右的距离大小进行缩放，左右内边距是组件内元素对组件左右边框的距离大小进行缩放，上下内边距组件内元素对组件上下边框的距离大小进行缩放

可以对组件内有文字的元素进行文字大小和颜色设计，还可以设置其背景颜色

与上方距离是指选中的这个组件距离上一个组件的距离

圆角度是对此组件的圆角程度进行设置

指示点是在有多个元素例如多图组件里面时显示的，可以设置指示点形状，位置，颜色以及选中指示点时指示点显示的颜色

另外在其他页面设计好之后也会生成一个页面短链，如下图所示,此短链也可以放入跳转链接内，放入的链接会在用户点击这个组件元素时跳转到对应界面

复制功能是创建一个一模一样的页面，方便很多只需要改动小部分地方而又需要大规模创建相同页面的场景，按键如下

**2.底部导航**  
底部导航是小程序在屏幕显示最底部的导航栏显示，如图所示  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/c9f70b22cd574ae7a02fa6bc9a8ebf124606.png)  
可以最多设置五个，每个链接同样除了可以点击过后面的选择链接之外，还可以自己创建页面把页面路径复制过来放进去，还可以自定义图标，颜色  
**3.内页导航**  
用于给某些点击进入之后没有底部导航的页面添加底部导航，注意固定界面是无法用这个功能添加底部导航的，只有自己DIY的设计页面才可以添加底部导航，点击添加之后把想加底部导航的设计页面链接填入，再设置底部导航的内容即可  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/1306c73e1bf94ed48155a4e48ac1688e7206.png)  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/f06075e850514b6b859ec00bf63629235314.png)  
**3.登录页面**  
重新设置登录界面的背景图，在用户登录的时候更换登录背景图  
**4分享页面**  
可设置页面分享标题、图片、链接地址等，根据设置项后面的小字说明进行填写，可以设置对应平台，对应的页面分享链接，是否过滤参数，页面备注，分享标题是什么，分享的图标是什么，分享描述和对应的链接是什么，都可以进行设置  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/5b651054838d4482a2ac8e4a973e6f9d2806.png)  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/fd2e4a77a4e54b9aa9f0273afc4e9d8f2114.png)  
**5.链接地址**  
放了很多已经定义好的页面路径，可以按需取用，某些页面已经弃用，还有一些特殊链接没有放入，需要的可以直接在售后群咨询  
快速购买是针对商城的界面，可以通过链接后面加bid的形式进行对应商家界面的访问，  
![](https://wiki.chengmenghudong.com.cn/img/2026/02/26/2e6becba8a0b41e29a9d423aa9b9a4821451.png)