微企邦业务4部(图)-***城小程序-小程序

微信作为移动互联网的入口，拥有超过10亿的用户，据腾讯公布的数据，有50%的用户在每天在微信上停留时间超过1小时，有巨大的用户规模。

在微信2017年的公开课中，张小龙曾已经明确的告诉我们：小程序的入口就是线下场景化的运用，这是对“让商业存在于无形之中”的理念的诠释。

可以说微信是这个时代的基础设施，无论是不是腾讯破五千亿美元背后微信所带来的市值支撑，我们必须意识到作为一个生活的基础设施，作为生活方式的一种典型的应用场景，它已经是今天商业生态展开的前提。我们说这是新的土壤、新的场景，必然会长出新物种。

一、小程序可以承载服务和多场景互动

以往公众号和粉丝的互动形式单一，除了阅读、评论和转发之外，双向互动的机会并不多。但是，现在公众号可以通过小程序提供电商服务、知识付费产品、社群管理等服务，他们与用户的粘性大大增加。

a、用户激励方式更加的多样化

公众号与用户互动的方式也因为多元的现金激励，变得比以往更加刺激。很多社群内部的传统玩法有真心话、讲秘密、一起打卡自律、成语接龙、玩拼图游戏等，现在这些普通的社交行为加上在微信里有了新名字：“真心寄语”、“你说我猜”、“打卡***”、“包你接”、“包你拼”“等。小程序让这些将社交行为金钱化的产品更加自如地在微信生态中流淌。

b、从线下攫取流量

提供服务的小程序除了能够帮助商家提高已有流量的留存，还能够从线下直接攫取流量。

例如，原本用户在一家饭店消费之后，彼此间的关系通常就结束了。但是如果用户在线下消费的过程中，多次使用了小程序排号、点单、结账之后，饭店就有机会再通过小程序提高用户粘性，例如将用户行为习惯改变为线上下单、或者激励转发优惠等。

总而言之，增加消费的场景，挖掘潜在的消费场景，就是移动互联网将线下流量抓往线上的一种方式。而且结单环节还可能涉及***、裂变、打卡等一切线上玩法。所以说，微信小程序，小程序其实提供了一个更好的变现模型，帮助线下门店将线下流量转到线上，然后通过长期服务和线上精细化运营变现。

二、微信小程序可以提高服务效率

小程序的精细化营销还能提高服务效率。小程序允许商家给不同标签的用户发送个性化消息，可以做到更的留存和唤醒。根据微信平台的规则，只要用户触达过1次的小程序，七天内推送1次；触达过100次，就可以推送100次；而1次产生交易的触达，七天内可以推送3次。

所以，流量来了之后，服务好用户才是留存***重要的道理。公众号提供服务的能力太受限了，所以为了做好留存，微信需要能够像APP一样通过服务来运营流量的载体。

因为小程序在低门槛、广受众、生理刺激、频互动和多场景等5个方面都比微信原有功能有所提升，所以它比APP引流能力更好，比公众号运营流量的能力更强，这就是小程序能为微信赢得下一场流量大迁徙的原因。

为零售提供进的行业解决方案，帮助零售业打破自身局限，搭建微信端电商销售体系，实现流量聚合。会员系统和营销插件能有效为商户带来流量和热度。砍价和拼团等营销功能引导老用户主动带来新客户。除此之外，还可以连接云打印机，***完成即出小票，应用场景从线上到线下无缝衔接。

1、图片导航功能：

2、轮播图功能

3、多属性设置

4、商品排序

除此之外还有更多的实用功能：

会员管理系统：对接微信卡包，支持会员卡储值、折扣商品SKU，会员等级 权益***管理各元素支持自定义。

（1）会员卡功能

（2）会员等级管理

（3）储值送（如：充值1000送80等）

营销推广系统：社交营销推广已经是目前商城***必不可少的营销手段，拼多多凭借着砍价和拼团创造出线上销售多个奇迹，这么好的营销工具咱们一样拥有。

（1）砍价

（2）拼团

（3）微信分享转发

消息模板：

对消费者进行消息推送，根据订单的状态自动推送消息模版给顾客微信增加互动频率。

连接云打印机：

下单结束后，立即打出小票，极大提高订单管理效率。从商铺形像装修到商品的多元化管理，卓云电商版都考虑的面面俱到。

电商的朋友都知道每年花在营销方面的费用往往是一笔较大的投入，卓云小程序充分考虑到了，小程序申请，并为商家朋友提供***前卫的社交营销组件，让您轻松带来流量裂变。卓云小程序和您一起在微信生态中遨游，相信您慧眼识珠。

2018-11-23两年前还籍籍无名的小程序，如今已经成为移动互联网的新风口。

***早小程序在微信平台上成名，手握 10 亿月活用户的微信，很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐，***宝、百度随即跟进，今日头条也开始内测小程序，几大平台纷纷出手，让小程序赛道更加拥挤，小程序生态多元化的背后，是巨头新一轮圈地。

而小程序之所以这么火，是因为其自身的引流模式和盈利模式，毕竟既会技术、又知道如何将技术变现的开发人员到哪都是香饽饽。本文以四大巨头都在关注的小程序电商为例，手把手教你开发小程序版网上商城。

1. 开发小程序商城

本文将实现一款小程序版的网上商城，前端使用 J***aScript 开发小程序，后端使用 Node.js Express MySQL。首先用 SQL 脚本建立 MySQL 数据库，数据库名为 orishop。MySQL 用户名是 root，密码是 12345678，也可以使用其他用户名和密码。

下面先看一下本项目的主界面，本项目分为客户端和服务端实现，客户端涉及到轮询图、按钮、图片列表、产品展示、购物车等。

项目效果展示：

2. 轮序图设计

轮序图是在 App 首页上部显示的，用于展示商品信息，可以以一定时间自动切换商品信息。轮序图需要使用 swiper 组件，每一个轮序图 Item 需要使用 swiper-item 组件，通常每一个 Item 是一个图片，可以直接在lt;swiper-itemgt;中放置一个lt;imagegt;标签。轮序图的布局代码如下。

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%。导航按钮也是动态显示的，数据依赖于 n***igationData 变量，可以在 index.js 文件的 data 中添加如下代码来测试导航按钮的布局是否正确，记住，这只是用于测试的代码，在后面的布局会用动态的数据替换这些实验数据。

8. 动态显示导航按钮

本节会在服务端从数据库中获取导航按钮的数据，客户端会根据这些数据动态显示导航按钮。

首先切换回 WebStorm，在mysql_connect.js文件中添加如下的方法，该方法用于获取商品类型，也就是导航按钮数据。有多少个商品类型，***城小程序，就显示多少个导航按钮。

在服务端创建一个 type.js 路由文件，在 app.js 文件中添加代码注册路由。切换到小程序端，在 index.js 文件的 onLoad 方法中添加下面的代码。

9. 显示、畅销商品

在小程序首页下方通过列表显示了、畅销商品，与轮询图显示的商品类似，此处只是为了演示列表的使用。

10. 显示商品详细信息

本节显示了显示商品详细信息的布局，首先在小程序端创建 shopinfo.wxml 布局文件，并输入下面的代码。

接下来在 shopinfo.wxss 文件中输入代码，***终显示的效果如下图所示。