美文网首页用户体验UI设计创业扶持
最全实操指南!换个姿势深入微信小程序

最全实操指南!换个姿势深入微信小程序

作者: 张安松 | 来源:发表于2017-01-12 15:02 被阅读83次

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

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

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

    一、企业的注册流程

    二、小程序到底是什么

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

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

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

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

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

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

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

    三、小程序的入口

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

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

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

    线上PC导航站

    移动导航站

    微信群分享

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

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

    关键词精准搜索

    发现入口

    聊天列表顶部

    四、小程序的应用场景

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

    微信群协作

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

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

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

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

    五、该不该做小程序

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

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

    回顾一下人类发展过程各种“前端”的呈现形式:龟甲、兽骨、竹简、木牍、金石、缣帛——纸张——PC 电脑web网页——黑白屏手机短信——智能手机时代的 iOS、安卓 APP——移动端 H5——公众号服务号、小程序——智能眼镜——智能硬件上的显示屏——直接把信息输入大脑。

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

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

    小程序、H5 的区别

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

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

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

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

    原因在于之前大部分外包开发商更倾向于一个个单独页面写,页面逻辑混乱,当要跳转到新的页面就得重新向服务器请求一个页面,极其恶心。大家可以长按识别看看下面这个应用,然后在公众号后台回复我,这流畅度和小程序有区别吗?

    相关文章

      网友评论

        本文标题:最全实操指南!换个姿势深入微信小程序

        本文链接:https://www.haomeiwen.com/subject/eewdbttx.html