专栏首页速成应用小程序开发平台新手教程--手把手教你从零开始制作一款电商必备的商城小程序
原创

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

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

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

前期准备

1、用个谷歌或IE浏览器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战教程使用开发工具从零开始无需编程步骤简单

    他们也面临着两大难题:电商平台的竞争压力和服务半径的局限性。很多菜市场、超市以前试图用公众号、APP来作为引流工具,可实地测试发现,菜场环境复杂、网速较慢,顾客...

    速成应用小程序开发平台
  • 餐饮下单小程序有哪些功能和特点 点餐小程序优势有哪些?

    在互联网时代,所有行业的竞争无论是时间维度还是空间维度都是不断扩大的,餐饮业的运营肯定也是绕不开的。而由于微信小程序的出现,更是给餐饮业开放了另一个空间,特别是...

    速成应用小程序开发平台
  • 微信小程序开发应该注意规划这些问题才有利于创业者对症下药

    微信小程序是一款无需下载、无需安装、即用即走的小应用,实现了用户“触手可及”的愿望,并且操作十分简单,解救了千万群众的手机内存,很多开发者也看到了这“用完即走”...

    速成应用小程序开发平台
  • PHP字符串和数组操作

    *字符串查找 $email = 'name@example@.com'; $domain = strstr($email, '@'); echo $do...

    wangxl
  • 美国《国家防御授权法案》将保障人工智能发展

    【概要】新美国安全中心的研究人员撰文分析了美国“国家防御授权法案”中有关人工智能的内容及影响,并比较了中美之间的相应战略。

    人工智能快报
  • 好学好用的前端框架—Angular

    2007 年的时候我刚毕业,当时最火的前端框架是 jQuery 和 Ext JS,那时候大家纠结的问题是:我到底是用 jQuery 呢还是用 Ext JS 呢?

    CSDN技术头条
  • 创建发送异步通讯对象Ajax请求、数据回调及属性状态说明

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

    德顺
  • Docker适合哪些场景

    Docker 不是万能的,我们不能够期盼在 Docker 容器中运行所有的东西。符合 Heroku 公司 12 要素 ( https://12factor.ne...

    后场技术
  • 高通与苹果宣布“复合”,英特尔黯然退场 | 极客头条

    为期两年的苹果高通“诉讼之争”经历了各种推波助澜愈演愈烈,俨然到了最为关键的白热化阶段,没成想,在刚刚正式进入美国司法庭审环节的两天后却被强势叫停了!

    AI科技大本营
  • 深度:女版“乔布斯”覆灭记!硅谷美女CEO被曝百亿美元大骗局

    你有没有想过,如果在 2019 年,你可以心想事成,那你的人生巅峰最好可以混成什么样子?

    量子位

扫码关注云+社区

领取腾讯云代金券