%

微信小程序10000字实操指南(下篇)

16 . Jan . 2017

分享到:

 五、该不该做小程序

去年年初我看过一篇文章《应用号可以干翻应用商店?你想太多了吧》有说到过这个问题,那么如今小程序正式推出,我们再来探讨一下。

 

<重后端,轻前端> 的思想在商业上的实践

     

重后端,轻前端是技术架构上一种策略,因为前端代码更容易被反编译和破解,所以很多核心逻辑和算法放在服务器后台运行。在商业环境中,其实这种想法也非常适用。

回顾一下人类发展过程各种“前端”的呈现形式:

龟甲、兽骨、竹简、木牍、金石、缣帛——纸张——PC 电脑web网页——黑白屏手机短信——智能手机时代的 iOS、安卓 APP——移动端 H5——公众号服务号、小程序——智能眼镜——智能硬件上的显示屏——直接把信息输入大脑

这些东西都在飞速变化,而不变的是什么?信息本身的价值、对信息处理、以及核心服务的价值是不变的。一千年前你去餐馆为了吃饭,今天你去餐馆也是为了吃饭;10年前你去酒店为了 xxoo,今天你去还是为了xxoo;更多时候我们应该注重自身服务和商业的闭环,无论是 app 还是小程序,他只是一种呈现形式,如果你饭馆的菜非常难吃,那么不管你把自己发布到饿了吧外卖平台、小众点评亦或是赶时髦做个小程序,依然没什么人去关顾你的餐厅。

专心做你的核心服务,其他的交给第三方去做,他们有规模优势自然能做得更好更便宜。

 

小程序、H5 的区别

 

正如上文“小程序真面目”那一章所说的,微信小程序就是一个缓存到本地的网页。

为什么小程序比 H5 流畅和酷炫啊?

因为小程序缓存到了本地,在二次打开的时候无需要再加载,但果真如此吗?如果小程序开发者把很多图片、文字等页面元素都做成动态加载且不做缓存,那么你每次打开小程序相当于……重新下载了一遍 app,跟原来的 H5是一样的。

但是原来 H5的页面切换不流畅总是要加载,小程序不会啊,你怎么能说小程序和 H5一样呢?

原因在于之前大部分外包开发商更倾向于一个个单独页面写,页面逻辑混乱,当要跳转到新的页面就得重新向服务器请求一个页面,极其恶心。

随着 vue 等前端框架的普及,越来越多的 SPA 架构网页应用出现,微信小程序应该就是基于此种技术,使用 SPA 架构的应用只需要在刚开始的时候 loading 加载,切换到应用内的其他页面不需要再加载新的页面,所以非常流畅。那是不是说明我们可以不做小程序而用 vue 来写就可以了?

也不是的,小程序比 H5多了很多入口,对于传统商户来说,找个外包商重新用 vue 写一个微官网的成本和找个外包商做一个小程序的成本是一样的,甚至比做小程序成本还高。因为小程序如此火热,肯定有大量第三方开发商做成各个行业的小程序模板,你只要稍微配置就能一键生成,成本是非常低的。

但是小程序比 H5多了很多原生的能力不是吗?

微信之前也有开放一个 JSSDK, 也有分享接口、图像接口、音频接口、设备信息、摇一摇、扫一扫等能力可以在移动 H5端去使用,小程序的优势在于比 JSSDK 多了更多的数据储存能力,比如视频、图片、音频等可以等用户在 wifi 环境下保存到本地,然后移动网络时候就可以离线观看了。但 JSSDK 开放这些能力的话也可以做到,只不过微信无形之后帮你规范好了,让你以 SPA 架构 去搭建一个网页,这正是小程序在技术层面上做的事情。

 

还有其他区别吗?

  • 小程序诸多微信审核的限制、H5 不受微信管控

  • 小程序更容易打开,对于用户来说是不利的,因为东西不管你用不用总是占着手机空间;对于商家来说,二次使用成本更低,利用用户再次使用

 

各有各的优势,那我想两种都做会成本很高吗?

 

如果你原来的网页应用就是用 vue 那套框架构建的,那么再做到微信小程序的成本非常低,需要做一些转换和适配,比如 vue 的自定义标签功能定义成微信小程序的 view , 相信开源社区日后会有人贡献这些转化的代码。如果你原来的网页不是 SPA 架构的,那么就建议找第三方开发商来做小程序,成本低,虽然会比较多限制。有精力或者想得到更多能力,可以再逐步向刚刚说的,做一些工具完成网页应用到小程序的桥接转换。

 

红利期在哪?

 

2017年微信公开课Pro版上,男神张小龙对小程序做了一番详细的解析和解答。在此之前,很多人认为微信小程序会带来一波流量上的红利,但张小龙告诉大家,小程序在微信上没有入口、不能订阅,想要通过小程序来获取红利的人,想必是要失望了。

 

但是果真如此吗?

 

回想十九世纪四五十年代美国西进运动过程中的淘金热,我们也许更容易理解。淘金热中最终获利的其实不是淘金的人,而是船夫、卖水和卖铲子等为淘金提供支持的人。如果小程序引发一场”淘金热”,那它最大的红利可能就不是小程序本身。它会是什么呢?

 

我觉得是以下几个方面:

 

1、第三方外包开发商

目前市面上外包一个简单商城的小程序价格大概在3001000左右,对于个人开发者而言,这基本上是无利可图的,很少个人会去专门定制。对于灵活度要求较高,需要一些基础组件又需要定制开发的公司来说,更需要一个能规模化输出基础组件,并且在这基础上为部分公司定制开发的第三方服务商。这适合企业号那一波红利做得好的一些开发商,很可能成为同样主打企业用户的小程序,比如微信公开课 pro 上拿了“2016年度微信电子发票优秀合作伙伴”奖项的企微云平台。

     

2、自动生成小程序的

尽管微信小程序的开发门槛相比APP的开发门槛大幅降低,但带来的问题是:开发者需要适应和学习它的这套语言标准,而且开发的应用是不能移植到其他应用里面的,只能在微信上运行。如果技术小白能零门槛通过拖拽或根据模板的形式就自动生成小程序,这将更大降低开发和使用门槛。但是此类平台灵活度不够。

 

目前这一类的企业有微尘、有赞等。

 

3、提供后端数据托管服务的云服务商

小程序只是一个前端而已,整个开发涉及到企业认证、云端数据存储、ICP 域名备案等,对于单个企业来说非常繁琐。因此需要能提供一条龙后端托管服务的第三方平台。

 

目前腾讯云就在做这个事情,阿里云应该是不会推出微信小程序托管服务的。

 

4、小程序开发和运营培训

尽管通过第三方外包或拖拽自动都能开发出小程序,但前者可能面临成本的问题,后者则可能不能定制出特别符合要求的小程序。那么最好的方案就是”自己动手,丰衣足食”。而提供小程序开发培训的机构,则可以因此获得收益。

 

5、小程序导航网

张小龙在公开课说了:”我们并不会存在一个小程序的商店,所以我们也并不会像外界所猜测的那样,做一个APP的分发商店”。既然微信不做,巨大的入口价值,自然就会有别人去做这件事。让别人记住那么多小程序的名字,每次想用的时候就去搜一下是很麻烦的,如果能把小程序汇总起来,想用的时候就去导航网站找,估计会方便很多。

 

哪些程序不适合

 

1、依靠向外部输出流量以获得盈利的 App

比如今日头条、Zaker 等这类资讯 App,商业变现方式太单一,基本上都是广告,小程序并没有提供商业变现的方式,他们做小程序有些革自己命的感觉……但是可以提供一个轻量的小程序入口提高品牌曝光。

 

2、需要较多依赖系统原生能力的 App

举个例子:

Workflow,一款通过剪切板等输入,然后设定好动作,既可以做分词、发送到邮箱、查询是否诈骗电话号码等等非常多的自定义工作流。workflow 需要获取用户剪切板内容,调起邮箱、印象笔记等第三方 app、打开网页等多种系统能力,而小程序不会向开发者暴露所有的系统 api,这跟小程序定位不符合。

22.jpg

还有一个例子,一款阅读app,叫作优读。这款产品想要解决的问题是如何从大量信息中筛选出有价值的内容,他们的思路是利用“牛人”推荐和机器算法来完成。他们为了方便用户去分享内容到优读上去,做了很多便捷操作,比如你在任意一个app内阅读内容,当你想要将这篇文章分享到优读时,只需要复制链接,然后下拉通知中心,就可以选择 收藏或分享文章了。这很便捷。但是完全不适合做小程序。

23.jpg

3、需要占用较大储存空间的应用

这一类通常是视频和音频类应用,比如腾讯视频、网易云音乐等。用户使用这类应用的场景很大一部分是在移动环境下,他们会事先把歌曲或者电视剧缓存到本地。但是对于微信小程序10M 的存储限制根本无法满足。但网易云也可以把私人 FM 独立出来做一个小程序占坑。

24.jpg

4、需要大型 3D 渲染的

这方面主要是游戏,一个游戏包一般都在10M 以上,小程序上做个页游都不行,只能搞个 flappy bird 了。

 

5、服务性弱、和线下场景关联弱的应用

比如印象笔记等工具型产品。

 

6、自己 APP 都做不好的,你就别去凑小程序的热闹了

如果你做一个 app 都没人用做不起来,那么做了小程序也没人用。因为核心的是服务和价值,小程序的定位就是你自由流量的情况下让用户更便捷的接触到你的服务,而不是为了给你的服务引流。比如你租用了一堆广告牌,你有一家门店贴上小程序二维码,用户能更好的使用你提供的服务。如果你本身没流量入口,那么小程序也没有,和 app 一样依然推不动而且还没有留存。

 

可以上架的小程序类目

 

以下是小程序允许上架的服务类目及其需要的材料,从下图可以看出,微信对于政务服务、工具、出行、实体商户四个大类的细分是极其详细的,可以看出这是微信着力要发展的四个大类,一旦所有的政府机构都用上了小程序,那么很多我们必须用到的政务服务都必将刺激更多中老年用户去使用微信。另外出行是个高频需求,从 n 年前微信支付和支付宝争夺移动出行的入口就可见一斑。另外微信虽说不做导航,那么弄那么详细的分类干什么呢,即使所需的审核资料一致?令人深思。

 25.jpg

六、一些要点

 26.jpg

 

一些数字

 

  • 1 个营业执照能注册 50 个小程序

  • 1 个小程序必须绑定 1 个管理员(含个人微信、手机号码、身份证)

  • 1 个身份证只能绑定 5 个小程序

  • 1 个公众号能绑定 5 个小程序

  • 1 个小程序只能对应 1 个公众号

 

跳转引流能力有限

 

小程序内不能跳转到对应的公众号也不能诱导关注公众号,但在小程序的介绍页会露出且点击可跳转绑定的公众号。可通过介绍页实现公众号和小程序之间的互相跳转,但网页内和聊天窗口内长按识别二维码不能打开小程序。

 

安卓的小程序能放到桌面,iOS目前不可以

 

但不排除之后会通过Safari书签的形式放到桌面上,技术层面是可以实现的,只是用户操作路径比安卓一键放到桌面麻烦。

 

页面内不能出现引导下载你自己App的文字

 

微信官方文档5.1

 

  • 微信小程序的页面内容中,不得存在诱导类行为,包括但不限于诱导分享、诱导添加、诱导关注、诱导下载等;如不得要求用户分享、添加、关注或下载后才可操作;

  • 不得含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等;

  • 不得通过利益诱惑诱导用户分享、传播;不得用夸张言语来胁迫、引诱用户分享;不得强制或诱导用户添加小程序。

 

    只有管理员能上传代码

    开发者无法上传

    任意页面可以带参数生成二维码,最多十万个

 

这就很有想象力了,在床头贴一个 Jinkey 智能管家的小程序二维码,带一个参数 action = closeLight ,扫码后自动关灯;

 

在门口放一个 Jinkey 智能管家的小程序二维码,带一个参数 action = out ,出门扫描一下自动关闭家里的电源总开关(额,除了冰箱)。

 

在厕所放一个二维码,action = focus,扫描自动关注微信公众号 jinkey-love

 

同样的道理,带参数的二维码可用于线下商家、政府服务的小程序内不同功能区直接进入对应的服务而不需要使用多个小程序。比如去银行扫描一个取号机上的二维码取号,金银柜台扫码了解各种理财产品。

 

小心手机空间和流量不足

 

小程序并非不用下载,而是在你首次使用的时候会下发一个包,相当于把网页缓存好,下次打开就快了,但是但是…你已经下载了,而且是“不需要确认的下载”,点开即下载,然后你的流量就哗啦啦呼啦啦…下图是微信小程序下载的页面,不过在正式版中,微信已经去掉了“数据下载中,请稍候…”的文字,但依然是下载哦。所以微信所说的“免下载”更多地只是一种“无感下载”。

 27.jpg

 

小程序空间有限

 

整个小程序包的上传时的体积不能超过1M,加载到用户手机后,缓存大小不能超过10M(有可能被清除掉),永久存储大小不能超过10M(下次进来还能打开)

 

名字、头像要慎重

 

小程序的名称1年可以修改1次、头像1个月可以修改5次、小程序介绍1个月可以修改5次。

 28.jpg

 

七、小程序的能力

 

为什么要了解这部分内容?

 

  • 知道什么页面元素是微信小程序自带的,能快速开发上线

  • 知道有哪些异常流和节点产品经理提需求,老板决策的时候可以发挥的

  • 知道有哪些硬件能力提供,知道产品的边界所在?比如你想做一个 NFC 刷卡坐地铁的小程序,那么很遗憾告诉你,小程序做不了,甚至 iOS 都没有开放到NFC 的能力给开发者,所以小程序现在不会有 NFC 能力。

 

默认组件

 

有哪些组件?

 29.jpg

 

组件长什么样子的?

30.jpg

     

当然,小程序本身只是一个网页,你可以使用通过 css 自定义组件的样式或者自己写一些特殊的组件,比如电商购物车的步进计数器。

 

事件钩子(建议非产品经理、运营等需求提出方跳过钩子和事件这部分)

 

1.什么是钩子?

 31.jpg

 

一只小乌龟的头上顶着数字 7 8(额,好像没什么不对的),他需要走过一个装着加法运算器的箱子,之后头上就会变成一个数字 15。那么这个箱子就称为一个钩子函数,如果放在里面的是一个乘法运算器,那么小乌龟的头上的数字经过正方体之后就会变成56

 

小程序相当于那只小乌龟,在运行时(小乌龟走路)会触发很多的事件(钩子函数,相当于小乌龟经过的正方体),往这些正方体里面放入什么逻辑,取决于坑比的产品经理。

 

比如一个电商的步进计数器改变值的时候:

 32.jpg

2. 有哪些钩子

 

App 生命周期的钩子

 33.jpg

小程序的生命周期分为程序和页面两个部分:

 

1.程序有启动(未显示)、显示出来了和隐藏三个事件

2.页面有加载、显示出来了、准备好了(首次)、卸载页面、隐藏页面五个事件