小程序(SCN)标准活动运营三板斧NutUI组件运营实战

通过开发运营小程序来赚钱,可以是商城卖货小程序,淘宝客返利小程序,游戏小程序,视频小程序等等五花八门的小程序。开发背景NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技

小程序(SCN)标准活动运营三板斧NutUI组件

1.小程序崛起-微信红利

分析小程序

微信价值观

一切以用户为依归

不能为用户提供价值就不做

让创造体现价值

微信生态

基础：微信用户

产品服务提供者：第三方

机会与规则的创造者：微信团队

意义：为真正有价值的内容发挥其价值

用完即走，少即是多

好的产品

有趣关注

广泛参与

持续使用

让商业存在于无形之中

不基于骚扰和流量变现的商业化

设计理念：产品背后的设计逻辑

场景化

无门槛

易操作

产品层面：追求极致的用户体验

4个特征

入口有限

线下扫码

微信搜索

公众号关联

好友推荐

历史记录

我的小程序

即用即走

无推送，无传播

简单，体验好

产品形态上的三大优势

小程序定位精准

承载功能有限，只展示核心需求

对接低频长尾需求

实现控制成本，满足用户多元化需求，提升产品体验

补充原生APP

补充刚需APP，获取长尾用户

市场层面：重塑线上线下的连接

颠覆传统互联网创业模式：为小型创业企业带来机遇

小程序营销模式逐步兴起

优化线下服务体验

战略层面

使微信平台适用于更多应用场景

完善腾讯数据库

给其他实力型企业发展带来挑战

开发成本低，难度小

分散用户群体分布，给竞争对手带来更多挑战

智慧服务模式

缩短连接途径，提示服务效率，加强用户体验

创新服务模式，重构应用场景，服务聚焦在行业特点上：例报警小程序

激活公共服务，优化资源配置

小程序带来的价值

商业价值：重构互联网商业生态

改变传统电商运营形态

生活类小程序：提升消费体验

带来更多创业机遇

多元化场景结合

线上渠道进行业务拓展

线下场景化获取用户

展现核心功能，获得用户认可

启动简便快捷，高效

用户价值

以原有产品或服务为基础

不需要时非常安静

清理手机桌面，释放内存

企业价值

不同平台之间不兼容问题

节省

资金成本

人力成本

时间成本

JS语言

对比JAVA，更加简单易行

微信商业战略逻辑

小程序布局总结

增加主流APP连接渠道

低频APP纳入微信生态体系中

降低APP开发成本，方便企业与用户之间的互动

更多元化服务，满足用户个性化需求

依托微信本身庞大流量基础，满足用户小众需求

微信价值

用户直接微信登录获取各种优质服务

高效，低成本获取用户需求数据

重视产品本身价值-社交

商家与用户的精准连接

连接一切

线下连接-二维码

精准搜索

朋友点对点，点对群分享

线下弱连接入口

帮助商家短期内引流

降低获取客户和开发成本

未来的商业发展

未来定位

解决“互联网最后一公里”难题

低频刚需应用，工具类应用所占比例较大

内容编辑，账单管理，消息回复等功能

大胆尝试，小心管制

以用户体验为中心

坚持创造产生价值

未来发展前景

侧重于线下服务

覆盖范围

重视服务体验

理念符合未来应用发展趋势

2.入口到生态-全新生态商业法则

轻应用VS大生态

开放战略：轻应用构建平台生态

APP面临的3大痛点

APP被分割为安卓，ios两大系统导致人力，物力的严重浪费

机型适配问题

开发APP支付的成本高，性价比低

小程序提供了一个新的平台，更加低成本，高效率，轻体量

生态进化：正在改变的商业形态

对比APP更加精简，只保留其核心功能

微商

提供平台

激烈的市场竞争

公众号运营者

订阅号

优质内容输出

服务号

品牌企业

微信小程序

多元化服务，以小程序为核心开展业务

品牌营销者

线上渠道逐渐成为品牌营销的主导区域

通过微信应用号扩大品牌影响力

拓展营销渠道

利用微信本身庞大体量，实现价值挖掘

优胜劣汰：小程序重构APP生态圈

对比传统APP

研发成本投入低

能更好的面向不同的类型用户群体

拓宽自己的盈利渠道

加速APP淘汰速率

生态扩容：全球生态下的竞争利器

消费习惯

社交领域

时代发展趋势

去中心化，构建场景020一体化

去中心化：社流量的商业变现

去中心化

入口的去中心化

用户自主选择小程序入口

应用体验的去中心化

用完即走

应用本身的去中心化

只保留核心产品或服务，提高用户效率

价值与意义

线上虚拟经济与下线实体经济的连接融合

帮助商家构建一体化的多渠道模式

加快APP优化升级与淘汰

打破大型电商平台的垄断地位

连接创新：线上线下场景一体化

人人都是入口

摆脱平台入口限制

让企业或商家回归产品

场景运用：如何重振020生态

例：分享入口-预约入口-服务入口-评价入口

流程的用户体验

点对点的连接，促进更多本地化应用场景运用和玩法

微信打造的支完善付闭环生态

流量之争：小程序背后的BAT战争

用户界面精简

流量整合方面更具备优势

提倡去中心化

将优质用户向线下进行拓展

三大指标

生态准则

开放

清晰

稳定

场景增量

价值

纯粹

流程

易得

场景

协作场景

长时场景

互联场景

收益补充：给企业带来增量回报

买单方增长

现有资源放大

盈利模式新增

3.小程序的商业化路径

小程序带来怎样的商业机会

长尾商家与消费者的精准对接

整合数据能力

降低开发难度

提高用户黏性

机遇

大幅度降低创业开发成本

新一波移动红利期

更多的试错机会

抢占流量

线上：利用关联公众号

下线：二维码

实现商业化需要解决的问题

使用小程序的频次

服务号，公众号与小程序的连接

微信本身对内容的限制

如何探索商机

什么企业适合做小程序

线下商家

和线下场景强相关的线上服务企业

与互联网结合的传统企业

医疗

教育

第三方公司

什么企业不适合做小程序

大型公司

内容及社交等纯线上平台

使用APP能提供更优质服务体验的工具类及020服务应用

企业现在应该做什么

已有小程序的企业

重点提升小程序功能及服务体验

以优质产品和服务实现口碑传播

拥有独立APP的企业

小程序的定位

定位成一个新渠道

定位为核心产品

APP与小程序之间的数据实现互联互通

降低成本

小程序

优势

直接满足用户核心需求

更易和线上线下的消费场景进行无缝对接

劣势

不能让用户关注

无法主动向用户推送

关键所在：公众号+小程序的运营模式

微信创业2.0时代

为优质服务商提供应用分发平台

社区服务020

小程序的主要特质

入口

微信-发现

分享

只能分享到好友或群，不能分享至朋友圈

搜索

目前已支持关联搜索

关联

同一主体的小程序和公众号可以相互关联跳转

需要开发者自主设定

一个公众号可以绑定5个小程序

一个小程序只能关联一个公众号

通知和订阅

没有订阅关系，但可以向客户发送客服通知

没有粉丝关系

小程序本身很难沉淀社交关系

020的连接方式

极大地优化了用户的使用体验

轻应用

免下载

内置模板简单

附近的店

降低成本

提高效率

提供更优质的产品和服务

精准定位

小程序定位的三大特点

以轻为主

无法积累用户及数据

呈现核心服务

第三方如何定位小程序

实力型企业利用小程序促成交易

创业者利用小程序实现用户转化

实体店将小程序视为自己APP

娱乐消费的新入口

传统行业如何借助小程序实现移动化转型

4.场景思维重构商业格局

5.营销变局-品牌营销

6.内容裂变-自媒体运营

7.小程序运营-开发者

小程序与APP

服务形态互补

设计原则

1.产品观

服务性

不打扰用户

用完即走

微信生态

完整的微信生态圈

提供更多试错机会

用户数据收集

流量变现

2.用户体验

小程序的价值

流量入口

微信本身自带的巨大流量

社交关系

微信构建的庞大社交关系链

用户数据

用户授权后可获取完善的用户数据

获取客户

精准营销

精准变现

提升体验

对比服务号，提供更优质，流畅的功能与交互

5大要点

突破工具思维，以服务为核心

与微信生态相融

与微信社交关系链相联系

分享渠道

轻巧，优质的用户体验

3.小程序规则要求

服务定义功能

规避一些不包括的内容服务

直播

算命

星座等

开发者可设置提供的服务

付费可见

隐藏可见

不能与现有微信功能冲突

不允许诱导分享，诱导关注等行为

不允许设置虚假欺诈性内容

广告展示所占比例控制在页面内容50%以内，所有行为必须得到用户许可或遵循提示

4.小程序自带基础框架

Web+框架

自带跨平台属性

开发周期短

开发成本低

创业容错率高

NutUI小程序组件

4.布局

Layout

6.其他

Address

1.基础组件

Button

Cell

Icon

Price

Avatar

Overlay

5.导航

Tabbar

Navbar

3.操作反馈

Toast

Notify

Swiper

Dialog

Range

Backtop

Actionsheet

Infiniteloading

Drag

Popup

Steps

Collapse

2.数据录入

Input

InputNumber

Checkbox

Calender

ShortPassword

Rate

Radio

TextBox

Picker

Uploader

小程序(SCN)标准活动运营三板斧

上线前物料准备

小程序+SCN

资料收集包

1、页面物料

2、规则清单

培训PPT（操作指引）

实施计划

运营活动（标准系统活动）

标准活动实施运营计划（Excel）

1、规划（调研）

2、搭建

3、上线（包含培训）

4、执行（推广）

5、监控（纠偏）

1、数据监控（日报、周报、月报晾晒）

2、纠偏，根据数据以及实际情况给出活动区间建议

6、收尾（活动数据复盘）

活动策划案（Excel）（每个活动都有一个，不要大而全！！！）

1、红包活动

2、助力活动

3、投票活动

4、……

活动培训PPT（含系统以及C端操作指引）

1、红包活动（例）

1、活动冷启动说明，为什么推荐此种模式（根据项目节点来，而不是根据 节日节点来）

2、活动配置介绍后台操作+前台操作

3、活动泳道图（开发商、明源、客户）边界划分清楚

4、具体活动流程（根据调研结果规划）

5、明源动作详解（日报、周报、活动总结）

6、成功案例（同类活动）/成功标尺

2、助力活动

3、投票活动

4、……

上线调研（资料收集）

小程序+SCN标准功能（略）

上线活动需求（根据项目营销节点）

标准冷启动/N选1

1、红包活动

2、助力活动

3、投票活动

4、……

其他需求（节日活动，重要节点大型活动）

专家资源介入专项处理（略）

上线&培训

系统配置

标准系统配置（顾问）

活动配置搭建（顾问+客户策划）

上线培训

实施计划

小程序+SCN

培训PPT（操作指引）

小程序活动（根据调研N选1）

投票活动（例）

培训PPT（操作指引）

活动实施运营计划（Excel）

活动策划案（Excel）

推广运营

小程序+SCN

系统调优+页面装修

推广策略建议（略）

小程序活动（首次）

1、核心活动运营日报

2、核心活动运营周报、月报

3、核心活动运营总结、效果展示、数据分析、后续建议

阶段总结

小程序数据分析效果展示（包含活动）

微信小程序基础

微信小程序介绍

关键词：无需下载安装卸载（<font color="#662c90"><u>不占用手机空间</u></font>）、触手可及、用完即走

解决的主要问题：手机安装APP过多，占用手机空间

发展历程

2016年1月9日，微信团队首次提出应用号概念

2016年9月22日，微信公众平台发送小程序内测邀请，内测名额为200个

2016年11月3日，微信小程序对外公测，开发完成后可以提交审核，但公测期间不能发布

2016年12月28日，张小龙公开课针对微信小程序的几点疑惑，包括没有应用商店、没有推送消息等，解释了微信小程序能干什么不能干什么

2016年12月30日，威信公众平台对外公告，上线微信小程序，最多可生成10000个带参数的二维码

2017年1月9日，微信小程序上线

微信小程序提供的功能

支持分享当前页功能，分享到群或者单个好友

小程序线下扫码功能：点餐排队扫一扫

小程序挂起状态：来电话挂起

小程序的消息通知：不同于公众号无主动消息推送

小程序和公众号的关联

小程序的搜索和历史列表：支持关键字搜索

微信小程序不提供的功能

小程序中没有集中入口，没有应用商店

小程序没有订阅关系

小程序不能推送消息

开发工具的使用

开发文档：http://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112

框架文件

全局文件

app.json小程序公共设置

配置页面路径

配置窗口表现

配置标签导航

配置网络超时

配置debug模式

app.js小程序逻辑

定义小程序生命周期函数

定义小程序全局函数

定义小程序全局数据

app.wxss小程序公共样式表

定义公共样式表

工具类文件

util.js

注册函数

处理时间格式的文件

字符串处理文件

页面文件

logs.wxml页面文件

logs.json可以复写的窗口配置文件

logs.wxss页面样式文件

logs.js业务逻辑文件

逻辑层

主要用于处理业务逻辑。提供相关数据

模块化：在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

视图层

将逻辑层的数据渲染成视图页面

WXML(WeiXin Markup language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定：WXML 中的动态数据均来自对应 Page 的 data。

简单绑定：数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

组件属性(需要在双引号之内)

控制属性(需要在双引号之内)

关键字(需要在双引号之内)

运算：可以在 {{}} 内进行简单的运算

三元运算

算数运算

逻辑判断

字符串运算

数据路径运算

组合：可以在 Mustache 内直接进行组合，构成新的对象或者数组。

条件渲染：在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

block

hidden

列表渲染：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

block

key

模版：WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

使用模版：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

引用

WXML 提供两种文件引用方式import和include。

import可以在该文件中使用目标文件定义的template

import 的作用域

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

事件

事件是视图层到逻辑层的通讯方式。 <br>事件可以将用户的行为反馈到逻辑层进行处理。 <br>事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 <br>事件对象可以携带额外信息，如 id, dataset, touches。

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比，WXSS 扩展的特性

尺寸单位：rpx（responsive pixel）: 可以根据屏幕宽度进行自适应

样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

选择器

组件

定义：组件是视图层的基本组成单元。

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

属性类型

Boolean 布尔值

Number 数字

String 字符串

Array 数组

Object 对象

EventHandler 事件处理函数名

Any 任意属性

共同属性类型

id String 组件的唯一标示 保持整个页面唯一

class String 组件的样式类 在对应的 WXSS 中定义的样式类

style String 组件的内联样式 可以动态设置的内联样式

hidden Boolean 组件是否显示 所有组件默认显示

data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数

bind* / catch* EventHandler 组件的事件

特殊属性

组件列表

视图容器(View Container)

view 视图容器

scroll-view 可滚动视图容器

swiper 滑块视图容器

基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

表单(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

picker-view 内嵌列表选择器

slider 滚动选择器

switch 开关选择器

label 标签

导航(Navigation)

navigator 应用链接

多媒体(Media)

audio 音频

image 图片

video 视频

地图(Map)

map 地图

画布(Canvas)

canvas 画布

微信小程序为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

API说明

微信小程序提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

官方定义：小程序是一种<b><font color="#f68b1f">不需要下载安装</font></b>即可使用的应用，它实现了应用“<b><font color="#f68b1f">触手可及</font></b>”的梦想，用户扫一扫或者搜一下即可打开应用。体现了“<b><font color="#f68b1f">用完即走</font></b>”的理念，用户不关心是否安装太多应用的问题，应用将无处不在，<b><font color="#f68b1f">随时随地可用</font></b>，但又<b><font color="#f68b1f">无需安装卸载</font></b>。

放在根目录下