%

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

16 . Jan . 2017

分享到:
  • Q:为什么说小程序如炮友?

A:小程序刚发布不久就流行一个段子:APP 如原配,一年不用几次;服务号如情人,一个月固定几次;订阅号如酒店小卡片,天天可以卖广告;小程序像炮友,用完就走。

 

资本如嫖客,各个平台和垂直类掠夺者已经瓜分掉了线上流量,那么未来争夺的流量战场必然在实体场景,很多巨头其实已经证明了线下流量庞大的潜力。在快递包裹上印上自己的二维码关注公众号形成二次寄出快递的粘性,Pokemon Go 让用户在实体地图上捕获小精灵。

未来的入口不限于二维码,而是一切的富媒体。二维码之于2D识别,复杂图案之于 AR,语音指令之于 Siri,会发射信号的一个芯片;使用这些入口的不限于人类,对这些入口的识别,除了人扫二维码,还有无人驾驶汽车识别路标,寻找实体商店坐标;智能助手根据主人偏好自动在电商平台寻找合适的商品并且下单。

一句话来说,未来的流量来自线下,流量的入口来自多媒体,整个战场会从移动互联网到“实体互联网”转变,作为后续的“物联网”全民化的过渡。

那么小程序之于微信,就是利用二维码这种富媒体(图像),把线下商家的流量聚拢到微信。另外,从微信的服务类目看,这将是腾讯向成为互联网水和电的目标的又一大步,下文会进一步分析。

 

目录 

1. 企业注册流程

2. 小程序到底是什么

3. 小程序的入口

4. 小程序应用场景

5. 该不该做小程序(<重后端,轻前端> 的思想、小程序和H5 的区别、红利期、小程序类目)

6. 一些要点

7. 小程序的能力(自带组件、事件、硬件能力、微信能力)

 

一、企业注册流程

 1.jpg

 

二、小程序是到底是什么

2.jpg

 

小程序写的时候用的是 javascript 这种网页开发语言,首次运行会把这个“网页”缓存到本地,所以不是不用下载,而是下载的包比较小而已。然后通过 Android iOS 各自的 JSBridge 方法转换成对应的 Java Objective-C 方法运行。

 

比如我在小程序写了一个方法:

 3.png

程序就会识别出wx.showToast及其参数(文字、图标、持续事件),然后执行本地的一个方法:

 4.png

弹出一个原声的 Toast 组件,上说只是为了方便说明,实际运行环境会复杂的多。

5.jpg

上图左边是大家在微信公开课 Pro 会场上看到的企微云平台的快销上报小程序,看上去真的很像一个独立 App,虽然我看不到他的源代码,但是我试着还原其中一个页面来举例子。

一个页面都是一个独立的文件夹(微信开发者工具会自动为你创建),每新增一个页面需要在 app.json 文件的 pages 列表新增一项。

6.jpg

一般来说,src 目录建议用来放置固定的一些企业介绍视频或者宣传图片等等(整体的包大小不能超过1M)。

如果你不放在这个目录,也可以放在你自己的服务器,远程访问。比如一些经常变化的活动宣传 banner

app.json 是可以配置整个程序的底部导航 tab、导航栏的背景颜色(貌似不能弄成图片,如果希望做成京东 app 超级品牌日那种全屏氛围渲染,建议banner 图片上半部分使用渐变色过渡到你配置的状态栏背景颜色)、导航栏标题、导航栏颜色、是否支持下拉刷新等。

app.js 是全局的一些方法,比如获取用户信息,全局数据的配置地方。

js 会部分转成原生的 java oc 代码执行,那么页面呢?用的是操作系统原生的组件吗?带着这个疑问用 UI 测试工具打开了微信:

 7.jpg

你们看到有一个 YYWKWebview 的东西了吗?WKWebview是原生的一个浏览器控件,相当于只是用小程序打开了一个下载好的本地网页。而且用了类似 weex/vue 那样子的技术,所以页面切换非常流程。(可以自行百度一下 阿里weex

 

上面看到每个页面都是一个文件夹,那么里面的四个文件都是干什么的呢?

 8.jpg

.json 是配置文件。就好比是你的简历,上面写了名字、毕业时间等,而小程序的 json会记录一些信息:导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、下拉背景字体、loading 图的样式、是否开启下拉刷新、页面整体能不能上下滚动。

.wxml 是页面的基本骨架。就像骨架规定了人的大概模样一般,wxml 是一种类 xml 的结构化文本,描述了小程序页面有哪些元素。比如一个文章需要有标题、作者、时间、正文,但是不关心这些元素怎么排列。

.js 也就是 javascript 这种前端脚本语言的文件。要人的四肢东西来,怎么动,就需要大脑和肌肉控制,小程序从“骨架”成为“血肉之躯”的正是 js 的作用。js 做一些动态的东西,比如请求数据,控制元素上下移动,判断用户输入密码是否安全等等。

.wxss 就是决定整个页面元素的颜色等表现形式。好比同一个人可以穿不同的衣服,化不同的妆,看上去也就不一样了。在 wxml 文件中同样写了一个按钮,但可以给他配置不同的背景颜色:

 9.jpg

三、小程序的入口

 

线下实体(商铺、停车场、政府服务窗口等)

比如这个微信公开课给出的场景例子,我来 YY一下。

在停车场的入口,有一个摄像头对着你的车牌号码,当你扫码打开小程序时,点击开始停车,如果有空余车位,系统会自动打开闸门并记录开始停车的时间。这时候小程序会展示室内地图,引导你先左转再右转到达目标车位,停好车走人。等你来取车的时候,开车到闸门口,再次扫描二维码或直接从历史记录打开小程序,选择结束停车,调起微信支付,停车场摄像头识别车牌号码,打开闸门放行。

整个过程无需取停车卡和专职工作人员服务,环保也节省人力成本。

 10.jpg

线上PC导航站:

 11.jpg

移动导航站:

 12.jpg

微信群分享:

性冷淡风格(从程序介绍页分享出来):

 

 13.jpg

欲罢不能的风格(从程序内页分享出来):

14.png

关键词精准搜索:

 15.jpg

发现入口:

 

 16.jpg

 

聊天列表顶部:

 17.jpg

四、小程序应用场景

应用场景主要分为微信群协作和实体服务。

 

微信群协作

 

微信群协作主要是一些企业内部服务的或者工作上的沟通。

 

问卷投票:公司要开展年会了,做那个活动好呢?通过小程序发布的投票并且分享到群里,可以实时看到前三名。

 

会议助手:临时召开紧急会议,需要相关人尽快确定参会情况,往群里抛一个开会通知小程序,特定的人才能打开了解会议内容并确认,谁参加谁请假,参与人数多少一目了然。活动时间点到了,还可通过小程序的消息服务能力给参会人发送参会提醒;到了参会现场打开小程序就能签到,真正意义上的需要用时就用,用完就走。

 

虽然很多办公场景用企微的微信企业号组件也可以做到,但是并不是每个企业都有一个企业号,对于普通小公司小团队来说,这些能力还是做到小程序上快捷方便。

 

实体服务

 

睡觉前,扫描一下床头的二维码贴,打开Jinkey 外卖”,下单叫了一个早餐外卖,然后扫描一下“JJ 智能家居”小程序二维码,检测到现在是晚上,自动关灯。跟 siri iOS 智能语音助手)说一句,“晚安,明天7点叫我起床哦”,然后美美地睡上一觉。

 

第二天,siri 把我叫了起床,等了一会,早餐也送到了,吃完,打开微信聊天窗口的小程序服务通知,点开早餐外卖支付成功的模板消息,进入“Jinkey 外卖”的小程序页给了个差评(要收钱的还不给差评?!哈哈哈)。吃完早餐就出门。

 

昨天车放在公司了,那今天就骑车吧,在楼下找到肉色的自行车,打开 摸拜单车 的小程序,扫一扫完成了开锁,骑上去,愉快地回到公司。

 18.jpg

 

来到公司打开,签到小程序,扫一下公司前台动态变化的二维码,同时小程序识别出我的地理位置,打卡成功!回到座位上开始奋斗的一天。

 

中午吃饭,同事都说饿了吧外卖有优惠。那赶紧打开饿了吧小程序,黄焖鸡30元免运费,于是我发起了一个组团买,然后把这个页面分享到公司群,小伙伴们点进去页面选择自己要的套餐,各自支付完成后,分别都收到了一条“付款成功,正在配送”的模板消息。

 19.jpg

 

然后小程序上还可以实时看到外卖小哥去到哪里了,超级贴心的。

 

中午睡觉,插上耳机,打开小睡眠小程序听着舒适的背景音乐。

 

下班的时候可以开车咯,到地下车库取车,开车到闸门口,再次扫描二维码或直接从历史记录打开小程序,选择结束停车,调起微信支付,停车场摄像头识别车牌号码,打开闸门放行。到地面接了几个同事一起到亿达广场找吃的,附近没有停车场就随便找了一个空地停车。下车之后看到一个硕大的广告牌:

 20.jpg

 

探鸟搞特价耶,赶紧扫码打开探鸟的小程序二维码,点击排队按钮,提示前面还有5个人,不错很快到了,等到还有 2 个人的时候,小程序提示我可以点餐下单了,那我们 5 个人就点两只鸡吧,应该够饱了。

因为喝了点酒,喝酒不开车,吃饱之后,打开杜杜出行叫代驾。

 21.jpg

去取车的时候发现,握草!有一张违停罚单……醉了,扫一下上面的二维码,打开了**交警的小程序二维码,输出车牌号码,系统自动拉出罚单列表,单击刚刚的违停罚单,用微信支付完成了缴费。所以各位老司机不要乱停车哦。

 

……………以上故事纯属虚构………………