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

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

前期准备

1、用个谷歌或IE浏览器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 新手教程 | 手把手教你 谷歌浏览器如何使用HTTP代理?

    本文将针对谷歌浏览器如何使用代理IP进行详细说明,具体步骤如下: 1.代理IP信息查看 查看自己所购买的相对应的代理IP面板,点击代理IP -查看详情-进行查看"AuthKey"以 ...

  2. 手把手教您搭建一个跨境电商平台

    1 跨境电商网站开发 通过进行前期的调研分析,为企业搭建跨境电商商城平台,多渠道布局(PC.微信.app.小程序),实现数据一体化统一管理.跨境电商商城平台适用自营和招商入驻模式,可丰富产品品类,甄选 ...

  3. 镜播无人直播带货教程,手把手教你如何搭建直播间

    镜播无人直播带货新手教程,手把手教你如何搭建直播间 如果你一个人在家里面直播,没有直播中控来辅助你一个情况下怎么办?来教你一个什么叫做镜播.用镜子来做一个直播的辅助.在你的面前放一面镜子,下面是产品, ...

  4. 教你高效搭建自己的电商平台系统快来看

    随着电商的蓬勃发展,大型老牌的电商平台吃尽红利,而且很多大商家也不甘于进驻这些大型老牌的电商平台分一杯羹,希望拥有属于自己的电商平台来独享红利并放大自己的获客渠道.那么电商平台怎么搭建呢?下面一起来了 ...

  5. 我的世界服务器显示器,我的世界红石显示器制作教程 手把手教你做显示器

    我的世界红石显示器制作教程 手把手教你做显示器.那下面给大家分享的是我的世界里面的一个红石显示器的制作教程,那对下面的这个显示器感兴趣的玩家不妨进来卡看哦!希望大家喜欢. 游戏园我的世界官方群:325 ...

  6. 网课答案公众号小白教程——手把手教你创建自己的大学查题公众号

    网课答案公众号小白教程--手把手教你创建自己的大学查题公众号 1.很多新手想搭建属于自己的查题公众号! 所以我来写一个搜题公众号搭建教程,如果你想要做公众号方面的引流之类的,这个就非常不错! 废话不多 ...

  7. 适合新手:手把手教你用Go快速搭建高性能、可扩展的IM系统(有源码)

    本文为开源工程:"github.com/GuoZhaoran/fastIM"的配套文章,原作者:"绘你一世倾城",现为:猎豹移动php开发工程师,感谢原作者的技 ...

  8. graphpad两组t检验_Graphpad 作图教程 | 手把手教你绘制森林图

    森林图 (forest plots) 是以估计模型 (固定效应模型或是随机效应模型) 结果为基础绘制出的图型.它以一条垂直的直线 (横坐标刻度为 1 或 0) 为中心,用平行于横轴的多条线段描述了每个 ...

  9. 如何重命名图层名称_PS新手教程:教你认识“图层”面板及图层面板的相关操作方法...

    PS新手教程:教你认识"图层"面板及图层面板的相关操作方法.在学习Photoshop的过程中,一切操作其实都是基于图层进行的,因为在处理图像时,图像都是以图层的形式存在的.在前面的 ...

最新文章

  1. seaborn可视化水平箱图并添加抖动数据点(Horizontal boxplot with jittered points in Python)
  2. 【深度学习】面向医学图像的病灶分割调研(三)
  3. C# 发送电子邮件源码片段
  4. 郑州尚新科技--J2EE考试题
  5. safari的一些问题
  6. java 获取键盘输入法_Java中接收键盘输入的三种方法
  7. 一口气说出 6种 延时队列的实现方法,面试官也得服
  8. 杨洋python_杨洋老师 - 主页
  9. Qt4_派生对话框类
  10. 一次订单号重复引起的事故,把我坑惨了!
  11. URLDecoder: Incomplete trailing escape (%) pattern
  12. 3D变换矩阵的分解公式
  13. 清华大学c语言程序设计课件,c语言清华大学课件
  14. 计算机桌面黑屏有鼠标,电脑黑屏只有鼠标怎么办
  15. 科研方法-X_LAB-方法总结和实践记录
  16. 架构设计实践思路:什么是架构,怎么画架构图?
  17. 【转载】使用Pandas创建数据透视表
  18. 通信原理课程设计报告
  19. DOOM之父约翰·卡马克
  20. mercury重置密码后服务器无响应,melogin.cn打不开的解决办法 水星路由器重置完无法上网...

热门文章

  1. 万能PDF格式转换器下载
  2. 微信小程序微信公众号支付宝小程序H5(获取信息用户信息,支付,分享,人脸识别)
  3. 网络渗透实验一 ----------信息的搜集
  4. Qcom wifi sar架构
  5. python3.7 匹配淘口令
  6. 用爬虫在网站上无限制的批量爬取图片
  7. 清洗豆瓣电影排行数据
  8. 小小输入法的自定义码表(兼容拼音郑码)
  9. Deeplab v1:SEMANTIC IMAGE SEGMENTATION WITH DEEP CONVOLUTIONAL NETS AND FULLY CONNECTED CRFS
  10. npm 运行时报错“因为在此系统上禁止运行脚本”解决办法