新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来，在电商、新零售趋势的影响下，实体零售商也都在谋求自身的渠道变革，完善消费体验。如今微信已有超过十亿的用户，市场巨大，而微信小程序的开通不仅能够降低品牌开发和营销成本，实现精准营销，提升品牌知名度，同时能提供便捷的支付方式，提升用户购物体验，因此多个品牌纷纷投入到小程序的开发中。

下面教大家如何使用微信小程序第三方开发平台「速成应用」www.suchengapp.com 制作一款称心如意的商城小程序，闲话少说，开始吧！

前期准备

1、用个谷歌或IE浏览器

2、最好心里有个框架，把大概框架画出来，或者直接去微信搜索同行的小程序，参考对方模板进行仿制。

3、素材网：www.iconfont.cn、http://588ku.com、www.58pic.com

教大家制作的这款商城小程序，适用于所有想通过小程序卖货的电商和门店商家们。

用到的功能有轮播、通知、图片列表、图片组件、限时秒杀、商品列表、优惠券、分类组件、购物车、个人中心

闲话少说，直接进入主题，开始吧

第一、进入“速成应用”官网，点击顶部“定制”然后选择“新建空白模板”，然后设置封面和小程序名称

第二、我们先做首页的轮播图，点击左边组件列表选择“轮播”组件，（平台所有的组件都有详细教程，看下图箭头所指的红色三角尖）设置好轮播图尺寸，然后点击“管理轮播图分组”

点击“点击分组”然后点击“添加”然后设置排序号、图片、是否跳转或调用功能、是否显示，设置好保存。（做好记得点击顶部保存，保存好点击预览，就可以查看制作效果了）

第三、制作消息通知，选择“系统通知”组件，设置页面规格，点击“管理消息”，然后“添加消息”设置好内容和序号，保存即可。

其实这个消息组件是有“系统通知”“自由面板”“图片”三个组件组成的，上面做好系统通知，我们在点击“自由面板”再拖拽“图片”到自由面板上，设置好规格和大小

最后把“自由面板”“组件间距”改成“-31”就会和上面做的系统通知组件重合，这样看起来就不会那么单调了，间距大小需要慢慢调节不同图片大小不一样。

第四、用“图片”组件做分割线，设置好规格即可。

第五、使用“图片列表”制作商品分类，选择“图片列表”设置排版、规格，“更换图片”滑下去，设置好图片“规格”就可以了，等分类做好把每张图片链接过去就可以跳转了。

第六、制作“限时秒杀”和“疯狂特价”，使用“图片列表”排版做好，链接至“相关页面”分类（现在制作首页，分类还没做好，先不用跳转）

第七、使用“商品列表1”制作特价商品展示，设置好展示规格，“绑定数据”也就是绑定分类，然后点击“管理对象”

选点击“添加分类”设置好分类在点击“添加商品”设置好商品描述和价格保存，保存好前端预览就可以看到了。

第八、使用“滑块”组件展示优惠券信息，拖拽“图片”组件到滑块上，设置好图片规格

然后点击优惠券图片，再点击“事件”“功能”调用功能选择“领取优惠券”

设置优惠券，点击顶部“管理”然后点击“营销插件”再点击“添加优惠券”设置优惠券类型，应用场景，名称，使用条件等等，设置好保存。

第九、设置底部商品推荐，操作方法跟第七步操作一样。

第十、使用“底部导航”组件，点击右边“添加”按钮，文字描述和图片规格设置好，底部导航最多可以选择5个。

图片规格和文字描述好，点击“链接至”选择想要跳转功能即可，其他的设置也一样。

好了，制作到这里首页已经大功告成了，赶紧点击预览，看看自己的成果吧。

第十一、添加分类，点击右下角“添加分组”每个分组制作跟以上操作一样的，做好的分类绑定首页相关组件即可进行页面跳转了。

商城小程序做好咯，小伙伴们，有没有感觉制作小程序灰常简单啊？如果心动了赶紧自己也去制作一个吧。