产品规格: | 不限 | 产品数量: | 不限 |
---|---|---|---|
包装说明: | 按订单 | 价格说明: | 不限 |
查看人数: | 44 人 | 本页链接: | https://info.b2b168.com/s168-120884539.html |
小程序开发指小程序开发指南
2018-11-23两年前还籍籍无名的小程序,如今已经成为移动互联网的新风口。
较早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。成员的嗅觉敏锐,支付宝、百度随即跟进,**也开始内测小程序,几大平台纷纷出手,让小程序赛道更加拥挤,小程序生态多元化的背后,是成员新一轮圈地。
而小程序之所以这么火,是因为其自身的引流模式和盈利模式,毕竟既会技术、又知道如何将技术变现的开发人员到哪都是香饽饽。本文以四大成员都在关注的小程序电商为例,手把手教你开发小程序版网上商城。
1. 开发小程序商城
本文将实现一款小程序版的网上商城,拼团社区团购平台软件,前端使用 JvaScript 开发小程序,后端使用 Node.js + Express + MySQL。首先用 SQL 脚本建立 MySQL 数据库,数据库名为 orishop。MySQL 用户名是 root,密码是 12345678,也可以使用其他用户名和密码。
下面先看一下本项目的主界面,本项目分为客户端和服务端实现,客户端涉及到轮询图、按钮、图片列表、产品展示、购物车等。
项目效果展示:
2. 轮序图设计
轮序图是在 App 首页上部显示的,用于展示商品信息,可以以一定时间自动切换商品信息。轮序图需要使用 swiper 组件,每一个轮序图 Item 需要使用 swiper-item 组件,通常每一个 Item 是一个图片,可以直接在标签。轮序图的布局代码如下。
3. 控制轮序图
轮序图的布局代码中使用了很多变量来控制轮序图的显示,例如,indicatorDots 用来控制是否显示面板指示点,autoplay 用于控制是否自动切换图像。interval 用于控制切换时间的间隔,duration 用于控制滑动动画时长。这些变量都需要在 index.js 文件的 data 变量中设置,代码如下:
在上面的代码中 imgUrls 变量没有设置值,如果想测试轮序图,可以在小程序工程的根目录创建一个 images 目录,并且在该目录中放置若干个图像文件。为了让轮序图水平充满整个界面,需要在 index.wxss 文件中添加如下的样式代码。
4. 使用 Node.js + Express 连接 MySQL 数据库
由于本项目需要使用服务端,所以在编写客户端的同时,还要编写服务端的程序,这一部分会使用 Node.js + Express 连接 MySQL 数据库,在连接 MySQL 数据库之前,先要创建相关的表和视图。
本项目使用 WebStorm 开发,创建一个名为 service 的工程,接下来在 service 工程中创建 my_connect.js 文件,并输入下面的代码。
接下来测试连接数据库的代码是否正确,在 service 工程的 index.js 文件中添加如下代码。
由于 Node.js 提供的模块不支持操作 MySQL 数据库,所以运行本例的代码需要使用下面的命令行安装 MySQL 模块。然后在浏览器地址栏中输入 http://localhost:3000,就会在 WebStorm 的控制台看到输出结果。
5. 从 MySQL 数据库中获取要显示的轮询图信息
在这一部分仍然编写服务端代码,在小程序端需要显示轮询图,轮序图中的数据需要从 v_goods 视图获取,该视图可以得到
,销售的商品信息。接下来在 mysql_connect.js 文件中添加如下代码。
接下来创建路由脚本文件 hnf.js,并添加下面的代码:
接下来在 app.js 中使用下面的代码注册 hnf 路由。
6. 动态显示轮询图
现在修改小程序端的代码,在这一部分会在小程序端通过 wx.request 函数访问上一部分创建的路由,拼团社区团购平台,并根据返回数据动态显示轮序图。在 index.js 文件的 onload() 函数中添加下面的代码。
7. 实现导航按钮布局
在轮序图下方是一排导航按钮,效果如下图所示:
导航按钮的布局代码需要添加到小程序工程的 index.wxml 文件中。接下来在 app.wxss 文件中添加如下的样式,其他布局也会用这个样式,所以将该样式添加到全局的 app.wxss 文件中。
在 index.wxss 文件中添加样式代码,每一个按钮占整个宽度的 11%。导航按钮也是动态显示的,数据依赖于 ngationData 变量,可以在 index.js 文件的 data 中添加如下代码来测试导航按钮的布局是否正确,记住,这只是用于测试的代码,在后面的布局会用动态的数据替换这些实验数据。
8. 动态显示导航按钮
本节会在服务端从数据库中获取导航按钮的数据,拼团社区团购平台系统,客户端会根据这些数据动态显示导航按钮。
首先切换回 WebStorm,在mysql_connect.js文件中添加如下的方法,该方法用于获取商品类型,也就是导航按钮数据。有多少个商品类型,就显示多少个导航按钮。
在服务端创建一个 type.js 路由文件,在 app.js 文件中添加代码注册路由。切换到小程序端,在 index.js 文件的 onLoad 方法中添加下面的代码。
9. 显示、**商品
在小程序首页下方通过列表显示了、**商品,与轮询图显示的商品类似,此处只是为了演示列表的使用。
10. 显示商品详细信息
本节显示了显示商品详细信息的布局,首先在小程序端创建 shopinfo.wxml 布局文件,并输入下面的代码。
接下来在 shopinfo.wxss 文件中输入代码,较终显示的效果如下图所示。
商场购物、轻松阅读、社区生活、时尚潮流…当小程序融入日常生活,会带来怎样的全新体验?
6月14日,微信与新华社客户端共同举办的“微信公开课”在北京正式开讲。除了分享小程序规则、规划和新案例,公开课现场还带来了关于零售业小程序的应用指南和生态思路。
微信公开课讲师郑文晓在介绍小程序的新功能。
小程序能力组合式推出,抛“规则+规划”
今年4月以来,小程序加速释放了包括“快速创建小程序”“门店小程序”“附近的小程序”“公众号关联小程序”“自定义关键词”等一系列新能力,进一步降低了小程序的开发门槛,拓展了基础能力和服务场景,让小程序与微信现有场景打通,可以更好地被微信用户发现和找到。
近期小程序持续放出的“新能力”!
对于市场较为关注的运营规则问题,微信团队也在现场进行了解读:“小程序类目选择应与页面内容匹配、开发者需要做好信息安全防范,开发者所提供的服务内容必须符合法律法规。”
微信团队还表示,在下一阶段,将逐步完成对小程序开发者生态的支持,提供更完善的能力和开发配套以及更强大的连接能力。
小程序改变线下生活方式
新能力有了,该怎么使用?在零售行业急需改变经营模式、优化成本结构、升级会员系统的整体需求下,小程序将带来哪些机遇?
微信公开课讲师于洪潇指出,整合附近的小程序、扫一扫、卡包、微信支付、社交分享等能力,可以打造出员识别、自助买单、数据沉淀、精准营销、服务提醒为一体的小程序零售模式,帮助商家更快地实现会员、门店、营销和电商的打通,同时提升商业效率和顾客体验。
在公开课现场,零售业带来了很多新玩法:
万达集团的“飞凡会员服务”小程序帮助传统商场实现智慧停车、广场优惠、**、会员服务等能力,“人、店、商场”有了全新连接方式;
爱鲜蜂闪送超市用小程序让下单、物流更轻松,打造社区+零售+线上购买的全流程服务。较近一个月内,他们的日均订单成交量增长约10倍;
在社区,保利集团推出的若比邻“小程序让小区中的便利店实现了“自助收银”,扫码付款就能带走货品,不用排队;
而施华洛世奇打造的时尚品牌电商小程序,则看中小程序“传情达意”的效果,集消费与社交于一体,可给线下门店引流。
不同案例各有玩法,非商业领域,小程序还能怎么玩?
“新华社微悦读”主编焦旭锋在公开课上介绍内容类小程序的“新玩法”。
新华社推出的“新华社微悦读”打造了一款集轻量化阅读+连接线下+功能服务+跨界合作的小程序。
在这款小程序中,优质的阅读体验带来了很高的人气和用户粘性,目前“新华社微悦读”小程序的累计用户已经**过了100万。
而“花帮主识花”、“小打卡”等小程序也打造了“人工智能+小程序”和“垂直社群+小程序”的新鲜范本。
微信团队表示,无论是小程序在线下生活场景的不断拓展,拼团社区团购平台平台制作,还是针对快消零售行业释放的产品能力,微信将不断向开发者、服务商、商家提供更加成熟、完善、创新的功能,进一步丰富微信生态,为用户提供更便捷、智慧的生活方式。
小程序的能力:a) 线下扫码:用户可以在小程序中使用扫一扫。b) 对话分享:用户可以分享小程序或其中的任何一个页面给好友或群聊。c) 消息通知:商户可以发送模板消息给接受过服务的用户,用户可以在小程序内联系客服,支持文字和图片。d) 小程序切换:用户可以在使用小程序的过程中快速返回聊天。
e) 历史列表:用户使用过的小程序会被放入列表,方便下次使用。f) 公众号关联:微信小程序可与公众号进行关联。g) 搜索查找:用户可直接根据名称或品牌搜索小程序。 价值所在:a) 将产品变流量入口b) 将客户变用户c) 深层价值:直接抓住用户的线下真实需求场景。 商业机会a) 非数据流·需求场景精准匹配b) 深入产品流通领域c) 通过正在被消费的商品获取更精准的用户属性。例如:购买易坦静的用户,父母属性清晰。属性清晰。是已经产生需求的口罩、空气净化器、加湿器的明确需求者。d) 药品消费用户也是的目标用户。e) 通过小程序,能够直接切中需求场景。商业服务a) 小程序不会对现有商业结构本身产生变化,所以不会有直接商业价值。b) 所以能将小程序与传统线下结合产生商业价值的服务就具备了**性。c) 例如:家用电器的远程遥控开关、京东微连、小米都是以APP的形式存在、单个电器就要占用一个APP,小程序就解决这个问题啦。d) 直接帮生产厂商跳出平台,自建用户社群。圈地机会a) 线量已经被瓜分干净b) 线下流量成为新的圈地机会。c) 小程序正适合进行圈地。d) 机会:垂直领域的应用工具;e) 例如:一直是创业大坑的健身房、美容、美发。一个通用管理工具可以解决。而一旦使用起来,用户累计,就会累计变更成本,形成行业壁垒。
很多有意思的机会,比如花草,一个二维码就可以直接获得这个花草的培养技术和问题答案,花草出现问题可以直接查询,售后技术问题也不用再找平台方解决。解决了搜索浏览分析再匹配信息的过程。而商家也可以很精准的获得用户对自己所售商品的维护过程和使用习惯,真正把客户变用户。如果再加上传感器就更妙了。