Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序开发实战教程使用开发工具从零开始无需编程步骤简单

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

原创
作者头像
速成应用小程序开发平台
发布于 2018-09-18 03:29:32
发布于 2018-09-18 03:29:32
1.6K1
举报

传统菜市场的痛点

菜场生鲜交易额占全国生鲜总交易额的60%。这意味着菜场生鲜这块市场仍没有被开发。

他们也面临着两大难题:电商平台的竞争压力和服务半径的局限性。很多菜市场、超市以前试图用公众号、APP来作为引流工具,可实地测试发现,菜场环境复杂、网速较慢,顾客耐心有限,公众号、APP对于顾客的流量成本和时间成本损耗过高,因此均被放弃,转而选择以微信小程序帮摊主做线上导流。

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

 前期准备

1、用个谷歌或IE浏览器

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

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

教大家如何制作一款生鲜配送小程序,新手福利来咯

教大家制作的这款生鲜配送小程序,适用于菜市场、水果店、外卖点餐、生鲜配送等。

一、进入速成应用官网,点击制作--点击新建空白小程序(模板里面如果有满意的也可以直接套用)

第二、更换封面和输入小程序名称

进入制作页面,选择组件,每个组件右上角都有图文教程

第三、点击制作轮播图,点击左边“轮播”组件,然后点击“管理轮播图分组”,进入管理后台后

点击“添加分组”填写好保存,点击右上角“添加”然后设置轮播图属性即可

第四、使用“自由面板”设置好尺寸规格,然后拖拽“文本”组件,输入文字,再拖拽“图片”组件,设置好图片规格

文本和图片设置好,点击右边“事件”,选择“功能”添加自己想要“调用功能”绑定好即可跳转。

第五、选择左边“按钮”组件,设置好规格

点击“事件”再点击“页面”绑定跳转分类、(预先如果没有做好分类就先不绑定,等主页做好了再做分类页面,然后进行绑定)

第六、  使用“自由面板”、文本和图片,拖拽制作,跟第四部制作一样的,这里是展示店铺信息,不用设置跳转

第七步、使用“滑块”组件,然后拖拽“图片”组件进行排版,图片规格设置好就可以了。

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

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

第九、制作“选购区”也就是添加“分类”,点击右下角“添加页面”设置好页面名称,然后页面属性设置下。

选择“餐饮门店”组件,然后点击右上角保存,保存好刚才第五部制作的“开始卖菜”按钮,就可以设置连接跳转到分类这里了。

点击“管理对象”设置好店铺信息,保存就可以了,一款生鲜配送小程序就大功告成了。

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

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

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

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

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

评论
登录后参与评论
1 条评论
热度
最新
如果心动了赶紧自己也去制作一个吧。
如果心动了赶紧自己也去制作一个吧。
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
新手教程--手把手教你从零开始制作一款电商必备的商城小程序
近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌开发和营销成本,实现精准营销,提升品牌知名度,同时能提供便捷的支付方式,提升用户购物体验,因此多个品牌纷纷投入到小程序的开发中。
速成应用小程序开发平台
2018/09/20
1.8K0
教大家从零开始制作开发一款小程序商城包含预约服务和拼团功能
自小程序2017年1月9号正式上线以来,不论是中小商家,还是各大品牌巨头,都在抢占小程序这波风口,打造属于自己的小程序。截至目前,全国正式上线小程序超过150万个,小程序日均活跃用户稳居在1.7亿左右,而整个微信流量在10.4亿左右。这才仅仅是小程序发展一年半左右的时间,可以肯定的说,从现在的情况来看,小程序潜力无限。总而言之,像工行,建行,万达,摩拜,古驰,拼多多,麦当劳,星巴克,南航,网易等国内各行各业大巨头都相继推出了小程序,再加上支付宝小程序将要正式上线,包括小米华为,OPPO,金立,联想等国产九大手机厂商联合推出快应用,都是为了抢占这个市场。
速成应用小程序开发平台
2018/08/16
1.1K0
新手教程|速成应用教你如何制作搭建自己的微信小程序
微信小程序已经迈入了爆发阶段,很多中小企业和商户正在不断涌入这个市场。但是很多不懂技术不懂代码的小白却不知道去哪里制作微信小程序,现在就以可视化小程序开发工具「速成应用」来告诉你们,如何制作出专属于自己的微信小程序。
速成应用小程序开发平台
2018/05/25
9K0
微信小程序从零开始开发步骤(四)
上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能。本章节介绍的是小程序的自定义分享的功能。
王小婷
2025/05/18
870
微信小程序从零开始开发步骤(四)
微信小程序从零开始开发步骤(四)自定义分享的功能
上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能。本章节介绍的是小程序的自定义分享的功能。
王小婷
2025/05/18
1270
微信小程序从零开始开发步骤(四)自定义分享的功能
微信小程序从零开始开发步骤(四)自定义分享的功能
上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能。本章节介绍的是小程序的自定义分享的功能。 可以分享小程序的任何一个页面给好友或群聊。注意是分享给好友或群聊,并没有分享到朋友圈。一
王小婷
2018/05/31
6270
微信小程序可以自己开发吗?无代码制作小程序教程!
个人认为,一个好平台的功能要丰富全面,符合市场需求,而且在编辑搭建过程中易上手,全程不涉及代码编辑。
小程序制作教程
2023/03/21
9.2K0
微信小程序可以自己开发吗?无代码制作小程序教程!
微信小程序从零开始开发步骤(二)创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘
王小婷
2018/06/01
2.5K3
水果店小程序开发 生鲜水果店如何借力微信小程序多样化营销?
门店经营最需要考虑的就是获得客户,在线下实体门店经营中,因为租金和人工成本的不断上涨,导致获客成本也随之不断上涨,仅靠线下门店获取客户,门店难以生存。
微信小程序开发加盟服务商
2018/08/30
2.8K0
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
宿主环境(host environment)指的是程序运行所必须的依赖环境。例如: Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
小白的大数据之旅
2025/05/16
860
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
微信社区论坛小程序搭建与安装教程
6步:点击红色箭头图标,从图里可以更改字体颜色、图片状态、图片背景色、边框、外边距。
小程序制作教程
2023/03/22
2.2K0
微信社区论坛小程序搭建与安装教程
在微信小程序上做一个「博客园年度总结」:小程序部分交互效果实现
上一章讲了后端部分的代码逻辑,传送门:在微信小程序上做一个「博客园年度总结」:后端部分
冰霜
2023/02/24
9340
在微信小程序上做一个「博客园年度总结」:小程序部分交互效果实现
微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。
王小婷
2025/05/18
2220
微信小程序从零开始开发步骤(三)底部导航栏
电商小程序实战教程-商品详情页
我们已经完成了首页和分类导航页面的开发,本节我们介绍一下商品详情页的开发。商品详情页的重点是页面传参和规格选择,掌握了这两个知识点,一般的页面都可以自如的完成开发。
韩锴
2022/03/04
1.9K0
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》
3、与data同级 并且可以将input中输入的值与data中定义的属性绑定,使用this.setData({属性:e.detail.value})。
苏州程序大白
2021/09/29
9550
微信小程序从零开始开发步骤(六)4种页面跳转的方法
用法:用于页面跳转,相当于html里面的<a></a>标签。 API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html
王小婷
2025/05/18
2790
微信小程序从零开始开发步骤(六)4种页面跳转的方法
微信小程序从零开始开发步骤(五)轮播图
上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。
王小婷
2025/05/18
1620
微信小程序从零开始开发步骤(五)轮播图
电商小程序实战教程-首页的创建
我们已经利用三篇的内容介绍了电商小程序的总体规划、数据源的开发及管理后台的开发。有了这三个基础就相当于打好了地基,之后就是在地基上按照图纸进行施工了。
韩锴
2022/03/04
8090
微信小程序从零开始开发步骤(一)搭建开发环境
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了。 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: https://mp.weixin.qq.com/ 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。注册完成之后开始登录。
王小婷
2025/05/18
3260
微信小程序从零开始开发步骤(一)搭建开发环境
校园超市,百货超市小程序,手把手带你开发一款微信商城小程序,云开发+cms+数据库+js+css+微信小程序
这些操作都和商品列表是联动的,也就是商品列表和购物车里增删个数,都是可以同步的。我会在项目预览章节的视频里做具体演示。
编程小石头
2021/04/21
2.4K0
推荐阅读
新手教程--手把手教你从零开始制作一款电商必备的商城小程序
1.8K0
教大家从零开始制作开发一款小程序商城包含预约服务和拼团功能
1.1K0
新手教程|速成应用教你如何制作搭建自己的微信小程序
9K0
微信小程序从零开始开发步骤(四)
870
微信小程序从零开始开发步骤(四)自定义分享的功能
1270
微信小程序从零开始开发步骤(四)自定义分享的功能
6270
微信小程序可以自己开发吗?无代码制作小程序教程!
9.2K0
微信小程序从零开始开发步骤(二)创建小程序页面
2.5K3
水果店小程序开发 生鲜水果店如何借力微信小程序多样化营销?
2.8K0
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
860
微信社区论坛小程序搭建与安装教程
2.2K0
在微信小程序上做一个「博客园年度总结」:小程序部分交互效果实现
9340
微信小程序从零开始开发步骤(三)底部导航栏
2220
电商小程序实战教程-商品详情页
1.9K0
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》
9550
微信小程序从零开始开发步骤(六)4种页面跳转的方法
2790
微信小程序从零开始开发步骤(五)轮播图
1620
电商小程序实战教程-首页的创建
8090
微信小程序从零开始开发步骤(一)搭建开发环境
3260
校园超市,百货超市小程序,手把手带你开发一款微信商城小程序,云开发+cms+数据库+js+css+微信小程序
2.4K0
相关推荐
新手教程--手把手教你从零开始制作一款电商必备的商城小程序
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档