产品规格: | 不限 | 产品数量: | 不限 |
---|---|---|---|
包装说明: | 按订单 | 价格说明: | 不限 |
查看人数: | 19 人 | 本页链接: | https://info.b2b168.com/s168-120626172.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 文件中输入代码,较终显示的效果如下图所示。
微信作为移动互联网的入口,拥有**过10亿的用户,据腾讯公布的数据,有50%的用户在每天在微信上停留时间**过1小时,有巨大的用户规模。
在微信2017年的公开课中,张小龙曾已经明确的告诉我们:小程序的入口就是线下场景化的运用,这是对“让商业存在于无形之中”的理念的诠释。
可以说微信是这个时代的基础设施,无论是不是腾讯破五千亿美元背后微信所带来的市值支撑,我们必须意识到作为一个生活的基础设施,作为生活方式的一种典型的应用场景,它已经是今天商业生态展开的前提。我们说这是新的土壤、新的场景,必然会长出新物种。
一、小程序可以承载服务和多场景互动
以往公众号和粉丝的互动形式单一,除了阅读、评论和转发之外,双向互动的机会并不多。但是,现在公众号可以通过小程序提供电商服务、知识付费产品、社群管理等服务,他们与用户的粘性大大增加。
a、用户激励方式更加的多样化
公众号与用户互动的方式也因为多元的现金激励,变得比以往更加刺激。很多社群内部的传统玩法有真心话、讲秘密、一起打卡自律、成语接龙、玩拼图游戏等,现在这些普通的社交行为加上在微信里有了新名字:“真心寄语”、“你说我猜”、“打卡红包”、“包你接”、“包你拼”“等。小程序让这些将社交行为金钱化的产品更加自如地在微信生态中流淌。
b、从线下攫取流量
提供服务的小程序除了能够帮助商家提高已有流量的留存,还能够从线下直接攫取流量。
例如,原本用户在一家饭店消费之后,彼此间的关系通常就结束了。但是如果用户在线下消费的过程中,多次使用了小程序排号、点单、结账之后,饭店就**会再通过小程序提高用户粘性,例如将用户行为习惯改变为线上下单、或者激励转发优惠等。
总而言之,增加消费的场景,挖掘潜在的消费场景,就是移动互联网将线下流量抓往线上的一种方式。而且结单环节还可能涉及抽奖、裂变、打卡等一切线上玩法。所以说,小程序其实提供了一个更好的变现模型,帮助线下门店将线下流量转到线上,然后通过长期服务和线上精细化运营变现。
二、微信小程序可以提高服务效率
小程序的精细化营销还能提高服务效率。小程序允许商家给不同标签的用户发送个性化消息,可以做到更的留存和唤醒。根据微信平台的规则,只要用户触达过1次的小程序,七天内推送1次;触达过100次,就可以推送100次;而1次产生交易的触达,七天内可以推送3次。
所以,流量来了之后,服务好用户才是留存的道理。公众号提供服务的能力太受限了,所以为了做好留存,微信需要能够像APP一样通过服务来运营流量的载体。
因为小程序在低门槛、广受众、生理刺激、频互动和多场景等5个方面都比微信原有功能有所提升,所以它比APP引流能力更好,比公众号运营流量的能力更强,这就是小程序能为微信赢得下一场流量大迁徙的原因。
商场购物、轻松阅读、社区生活、时尚潮流…当小程序融入日常生活,会带来怎样的全新体验?
6月14日,瓜果蔬菜社区团购平台系统,微信与新华社客户端共同举办的“微信公开课”在北京正式开讲。除了分享小程序规则、规划和新案例,公开课现场还带来了关于零售业小程序的应用指南和生态思路。
微信公开课讲师郑文晓在介绍小程序的新功能。
小程序能力组合式推出,抛“规则+规划”
今年4月以来,小程序加速释放了包括“快速创建小程序”“门店小程序”“附近的小程序”“公众号关联小程序”“自定义关键词”等一系列新能力,进一步降低了小程序的开发门槛,拓展了基础能力和服务场景,让小程序与微信现有场景打通,可以更好地被微信用户发现和找到。
近期小程序持续放出的“新能力”!
对于市场较为关注的运营规则问题,微信团队也在现场进行了解读:“小程序类目选择应与页面内容匹配、开发者需要做好信息安全防范,开发者所提供的服务内容必须符合法律法规。”
微信团队还表示,在下一阶段,将逐步完成对小程序开发者生态的支持,提供更完善的能力和开发配套以及更强大的连接能力。
小程序改变线下生活方式
新能力有了,该怎么使用?在零售行业急需改变经营模式、优化成本结构、升级会员系统的整体需求下,小程序将带来哪些机遇?
微信公开课讲师于洪潇指出,整合附近的小程序、扫一扫、卡包、微信支付、社交分享等能力,可以打造出员识别、自助买单、数据沉淀、精准营销、服务提醒为一体的小程序零售模式,帮助商家更快地实现会员、门店、营销和电商的打通,同时提升商业效率和顾客体验。
在公开课现场,零售业带来了很多新玩法:
万达集团的“飞凡会员服务”小程序帮助传统商场实现智慧停车、广场优惠、**、会员服务等能力,“人、店、商场”有了全新连接方式;
爱鲜蜂闪送超市用小程序让下单、物流更轻松,打造社区+零售+线上购买的全流程服务。较近一个月内,他们的日均订单成交量增长约10倍;
在社区,保利集团推出的若比邻“小程序让小区中的便利店实现了“自助收银”,扫码付款就能带走货品,不用排队;
而施华洛世奇打造的时尚品牌电商小程序,则看中小程序“传情达意”的效果,集消费与社交于一体,可给线下门店引流。
不同案例各有玩法,非商业领域,小程序还能怎么玩?
“新华社微悦读”主编焦旭锋在公开课上介绍内容类小程序的“新玩法”。
新华社推出的“新华社微悦读”打造了一款集轻量化阅读+连接线下+功能服务+跨界合作的小程序。
在这款小程序中,优质的阅读体验带来了很高的人气和用户粘性,目前“新华社微悦读”小程序的累计用户已经**过了100万。
而“花帮主识花”、“小打卡”等小程序也打造了“人工智能+小程序”和“垂直社群+小程序”的新鲜范本。
微信团队表示,无论是小程序在线下生活场景的不断拓展,还是针对快消零售行业释放的产品能力,微信将不断向开发者、服务商、商家提供更加成熟、完善、创新的功能,进一步丰富微信生态,为用户提供更便捷、智慧的生活方式。