最全实操指南！换个姿势了解微信小程序

知晓程序是爱范儿旗下专注小程序生态的品牌 ，我们已经做了这些：

• 知晓程序公众号（微信号 zxcx0101）： 做最好的小程序媒体，让你了解小程序的一切
• 小程序商店（minapp.com）： 全网首家小程序商店，已吸引海量小程序入驻，数量仍在不断增长中
• 未来小程序活动矩阵： 包含黑客马拉松、MindTalk 、WorkShop，创造多样的小程序交流分享空间
• 《微信小程序入门指南电子书》： 全网首本小程序电子书 ， 已在多看阅读、微信读书、QQ 阅读上架

知晓程序注：

小程序一出，所有人都在讨论什么是小程序、如何接入小程序，又是谁更适合小程序呢？本期，我们希望通过这篇文章，来探讨有关于小程序的一些问题，希望大家可以通过这篇文章，更加深入了解小程序的技术本质。

文 | Jinkey

小程序是到底是什么？

小程序逻辑层使用 JavaScript，它是一个网页开发语言。

当小程序首次运行时，微信会把这个「网页」缓存到本地。所以， 小程序本质上并非完全不下载 ，只是下载的包比较小而已。

缓存完毕后，微信通过 Android 或 iOS 各自的 JSBridge 方法进行「转译」，并在相应的系统中运行。

比如，我在小程序写了这样一个方法：

				
					loveme: function() {
					wx.showToast({
					title: ' 微信公众号 jinkey-love ',
					icon: 'loading',
					duration: 1000
					})
					}
				
			

微信就会识别出 wx.showToast 及其参数（文字、图标、持续事件），然后执行弹出原生 Toast 组件的方法：

func showToast(title: String, icon: UIImage, duration: TimeInterval)

当然，这样解释只是为了方便说明，实际运行环境会复杂的多。

在小程序的源代码中，每个页面都会对应有一个文件夹，并且会在 app.json 文件的 pages 列表中进行注册。

在小程序中，默认新建的 Demo 中还包含有 src 目录，建议大家利用它来存放固定视觉物料。

视觉物料也可以放在你自己的服务器，小程序打开时，从远程进行加载。这种方式适合一些经常变化的活动宣传物料。

app.json 可以配置整个小程序的默认视觉和交互属性，例如底部导航 Tab、导航栏的背景颜色、导航栏标题、导航栏颜色、是否支持下拉刷新等。

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

小程序的逻辑层会转成原生代码执行，那么页面呢？用的是操作系统原生的组件吗？

带着这个疑问，我用 UI 测试工具打开了微信：

我们可以看到，其中有一个名为  YYWKWebview 的组件。

WKWebview 是原生的一个浏览器控件。也就是说，微信只是用小程序打开了一个下载好的本地网页，并利用类似 Weex/Vue 那样的技术，所以页面切换非常流畅。

我们提到过，每一个页面在小程序中都会对应有一个文件夹，那么，文件夹里面有什么东西呢？

首先是后缀名为 .json 的配置文件。类似记录名字、毕业时间等信息的简历一样，小程序页面的 JSON 可以记录有关于视觉与交互的基本信息，包括：

• 导航栏背景颜色
• 导航栏标题颜色
• 导航栏标题文字内容
• 窗口的背景色
• 下拉背景字体
• Loading 图的样式
• 是否开启下拉刷新
• 页面整体能不能上下滚动

后缀名为 .wxml 的文件，是小程序页面的基本骨架。 就像骨架规定了人的大概模样一般，WXML 描述了小程序页面有哪些元素，但不会规定这些元素的位置、样式等。

在定义了页面上有的元素后，我们就可以 用 .wxss 来决定整个页面元素的颜色等样式 。这就好比同一个人可以穿不同的衣服、化不同的妆，看上去也就不一样。

最后，我们 需要 .js 文件，来编写小程序的逻辑控制 。你可以利用它为小程序增加数据请求、动画控制、用户输入检查等功能。

三、小程序的入口和应用场景

线下实体服务

这是微信公开课上举的例子：

在停车场的入口，你可以扫码打开小程序，系统会自动打开闸门，并记录你的车牌号，以及开始停车的时间。

这时候，小程序会展示室内地图，引导你先左转再右转到达目标车位，你只需要照着地图停车，就可以离开了。

取车时，再次扫描在出口显示的二维码或直接从历史记录打开小程序，选择结束停车，调起微信支付，停车场摄像头识别车牌号码，打开闸门放行。

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

不只是自助停车，从物联网，到外卖点餐，再到罚单处理，理论上， 这些线下业务都可以通过小程序完成 。

想象一下，从晚上睡觉开始用小程序控制家电，到上班用小程序打卡、叫外卖，遇到罚单还能用小程序来处理，似乎非常合理、自然，这也是微信小程序更适合的场景。

围绕微信开展功能

例如，针对在微信群中的工作群，可以有以下的小程序。

问卷投票：通过小程序发布的投票，可以直接分享到群里，邀请群成员参与投票。发布者可以设定题目、问卷问题形式、结束时间，并随时查看投票结果。

会议助手：召开会议前，往群里抛一个开会通知小程序，与会者可以快速了解会议内容，组织者还可通过小程序给参会人发送参会提醒，并利用小程序进行会议签到。

我该不该做小程序

这是一个复杂的问题，我在之前也有一篇文章提到过。我们再来探讨一下。

首先，我们要区分清楚小程序和 HTML 5 的区别。正如上文「小程序真面目」那一章所说的，微信小程序就是一个缓存到本地的网页。

那为什么小程序比 HTML 5 流畅和酷炫？ 因为小程序缓存到了本地，在二次打开的时候无需要再加载。 但如果小程序开发者把很多图片、文字等页面元素都做成动态加载、不会缓存，那么你每次打开小程序所消耗的流量，与 HTML 5 差别不大。

但随着 Vue 等前端框架的普及， 会有越来越多的 SPA 架构的 HTML 5 应用出现 。使用 SPA 架构的应用只需要在首次使用时加载，切换到应用内的其他页面不需要再加载新的页面，流畅度与小程序几乎没有差别。

这并不意味着小程序的存在没有任何意义。 对于传统商户来说，找个外包商重新用 Vue 写一个微官网的成本，和找个外包商做一个小程序的成本接近甚至更高。

而且，由于小程序的火热，肯定会有大量第三方开发商做各个行业的小程序模板，你只要稍微配置就能一键生成，成本是非常低的。

至于 HTML 5 与小程序的能力差异，微信之前也有开放一个 JS SDK，也可以让微信里的 HTML 5 网页使用小程序的能力。

小程序的优势在于比 JS SDK 多了更多的数据储存能力，比如视频、图片、音频等可以等用户在 Wi-Fi 环境下保存到本地，然后移动网络时候就可以离线观看了。

但 JS SDK 开放这些能力的话也可以做到，只不过微信无形之后帮你规范好了，让你以 SPA 架构去搭建一个网页，这正是小程序在技术层面上做的事情。

除了以上的区别，小程序和 HTML 5 还有这些差异：

1. 小程序需要经过微信审核才能被用户使用；HTML 5 虽然依然受到微信管控，但相对更加自由一些，不需要经过审核发布；
2. 小程序更容易打开，对于用户来说是不利的，因为至少用户精神层面来说，它依然是「占存储」的；对于商家来说，二次使用成本更低，利于用户再次使用（留存率）。

既然 HTML 5 和小程序各有优势，那么我是不是应该两个都做呢？ 这也需要分情况讨论。

如果你原来的网页应用就是用 Vue 框架构建的 ，那么，将它迁移到微信小程序的成本非常低。

你只需要做一些转换和适配，比如 Vue 的自定义标签功能定义成微信小程序的 view（相信开源社区日后，也会有人贡献这些转化的代码）。

如果你原来的网页并非使用这套工具开发 ，建议你找第三方开发商来做小程序。

它的开发成本会更低一些，虽然会比较多限制。有精力或者想得到更多能力，可以再逐步做一些工具，完成网页应用到小程序的迁移。

那小程序的红利在哪里？

在此之前，很多人认为微信小程序会带来一波流量上的红利，但当张小龙告诉大家「小程序在微信上没有入口、不能订阅」的时候，许多想要获得小程序红利的人，想必是要失望，认为做小程序是在做「无用功」。

但是果真如此吗？就像是淘金热中最终获利的是为淘金提供支持的人一样， 如果小程序引发一场「淘金热」，受益者也并不仅仅会是「淘金者」 ，更有可能是以下角色：

第三方外包开发商。 对于灵活度要求较高，需要一些基础组件又需要定制开发的公司来说，一个能规模化输出基础组件、并能够为部分公司定制开发的第三方服务商，再合适不过。

小程序一键生成器。 尽管微信小程序的开发门槛相比 app 的开发门槛大幅降低，但开发者依然需要适应和学习它的这套语言标准，而且开发的应用不能直接移植到其他平台。如果技术小白能零门槛通过可视化拖拽或一键模板生成，会大幅降低开发门槛。

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

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

小程序导航网。 张小龙在公开课表示不做小程序商店，但凭借入口的巨大价值，自然就会有人做小程序分发。让别人记住那么多小程序的名字，每次想用的时候就去搜一下很麻烦。如果能把小程序汇总，想用的时候就去导航网站找，估计会方便很多。

当然，小程序也不是所有人都适合去插一脚的。如果你属于以下情况，那么你并不适合小程序：

依靠向外部输出流量以获得盈利的 App。 比如今日头条、Zaker 等这类资讯 app，商业变现方式太单一，基本上都是广告，小程序并没有提供商业变现的方式，他们做小程序有些革自己命的感觉。但是可以提供一个轻量的小程序入口提高品牌曝光。

需要较多依赖系统原生能力的 App。 例如 Workflow 等这类依赖系统高级接口的 app，就完全不适合做小程序了。

需要占用较大储存空间的多媒体应用 比如腾讯视频、网易云音乐等 app，用户使用这类应用时，几乎都会事先把歌曲或者电视剧缓存到本地。但微信小程序的存储限制在 10 MB，无法满足日常需要。但这类应用可以将 app 中有的特色功能独立出来做一个小程序。

需要大型 3D 渲染的应用。 这方面主要是游戏，一个游戏包一般都在 10 MB 以上。小程序上做个页游都不行，只能搞个 Flappy Bird 了。

服务性弱、和线下场景关联弱的应用。 比如印象笔记等线上工具型产品。

而且，如果你做一个 app 都做不起来，做了小程序也并不会有什么特别的好处。因为小程序的核心是服务和价值，小程序的定位就是你自由流量的情况下让用户更便捷的接触到你的服务，而不是为了给你的服务引流。

比如你租用了一堆广告牌，你有一家门店贴上小程序二维码，用户能更好的使用你提供的服务。如果你本身没流量入口，那么小程序也没有，和 app 一样依然推不动，而且没有留存。

附录

注册

主体为企业的组织如何注册小程序呢？照着这张图就能一步步注册了。

在注册的时候， 最好先弄清楚微信小程序可以提供的服务的范围 ，根据自己业务的特点，判断自己的业务能否搬上小程序。

关注知晓程序（微信号 zxcx0101），回复「 服务范围 」，获取小程序最新准许的服务范围表格

除此之外，你还需要知道这些数字：

• 1 个营业执照能注册 50 个小程序；
• 1 个小程序必须绑定 1 个管理员；
• 1 个身份证只能绑定 5 个小程序；
• 1 个公众号可以在设置中绑定 5 个小程序；
• 1 个小程序只能绑定 1 个公众号。

公众号绑定

小程序内不能直接关注公众号，但 在小程序的介绍页，可以显示绑定的公众号，并直接进入相应资料页 。

用户可通过介绍页实现公众号和小程序之间的互相跳转，但 网页内和聊天窗口内长按识别二维码不能打开小程序 。

桌面入口

在 Android 上，小程序能放到桌面，iOS 还不行。但不排除微信会在 iOS 上通过 Safari 书签的形式，允许用户将小程序放到桌面上。

这在技术层面是可以实现的，只是体验上会比 Android 差一些。

诱导与引流

首先，小程序页面内不能出现引导下载你自己 App 的文字。

对于诱导行为，微信官方的文档是这样说明的：

微信小程序的页面内容中，不得存在诱导类行为，包括但不限于诱导分享、诱导添加、诱导关注、诱导下载等；如不得要求用户分享、添加、关注或下载后才可操作；不得含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等；不得通过利益诱惑诱导用户分享、传播；不得用夸张言语来胁迫、引诱用户分享；不得强制或诱导用户添加小程序。

代码提交

开发过程中，只有管理员可以提交代码，开发者是无法提交的。

二维码

任意页面可以生成带参数二维码，最多十万个。 这就很有想象力了，在床头或门口贴一个只能硬件小程序二维码，带一个参数，扫码后自动关灯，或是关闭家里电器的开关。

利用带参数的二维码，线下商家、政府服务的小程序内不同功能区直接进入对应的服务，而不需要使用多个小程序。比如去银行，扫描一个取号机上的二维码，进行取号。

加载与下载

小程序并非不用下载，而是在你首次使用的时候会下发一个包，相当于把网页缓存好。所以微信所说的「免下载」更多地只是一种「无感下载」。

但整个小程序包的上传时的体积不能超过 1 MB，加载到用户手机后，缓存和存储大小都被限制在 10 MB 以内，所以只要不是疯狂使用，就不用太过担心流量问题。

小程序的资料

小程序的名称 1 年可以修改 1 次、头像 1 个月可以修改 5 次、小程序介绍 1 个月可以修改 5 次。修改的时候要慎重了。

视觉组件

小程序本身只是一个网页，你可以使用通过 CSS 自定义组件的样式，或者自己写一些特殊的组件。但 你可以使用官方提供的组件样式，以便快速进行开发 。

微信提供的视觉组件如图：

那么，这些视觉组件是长什么样子的呢？

事件钩子

小程序在运行时会触发很多的事件， 这些事件可以让开发者探测用户使用状态，并根据状态给出反馈、执行函数 。

比如一个取值器，需要在值增加的时候要播放语音，就需要把「判断值增加还是减少，如果增加的话，播放录制好的音频」的逻辑加入到 bindChange 函数中。

有关于小程序生命周期的钩子，包括：

• 小程序整体生命周期
  • 小程序启动
  • 页面显示
  • 页面隐藏
• 页面生命周期
  • 页面开始加载
  • 页面显示
  • 页面加载完成
  • 页面关闭
  • 隐藏页面

除此之外，还有 onPullDownRefresh 下拉刷新、 onReachBottom 上拉加载、 onShareAppMessage 点击分享按钮等事件。

对于触摸事件，小程序也有许多事件钩子提供：

• 点击
• 长按
• 触摸开始
• 触摸移动
• 触摸结束
• 触摸取消（触摸事件被打断，而非用户手指自然离开屏幕）

还有组件事件，它主要有几种：值改变的事件、开始输入的事件、完成输入的事件。

比如一个文本框要求输入邮箱，因为当用户输入时会触发 input 事件，所以可以绑定一个钩子函数，获取到用户每次输入的字符串判断一下是否含有 @ 和 . ，若有，则判定为合法。

多媒体播放有以下的钩子：

• 开始播放（加载）
• 暂停播放
• 结束播放
• 播放（加载）失败
• 播放进度更新

系统访问能力

1. 从本地相册选取照片视频；
2. 拍照或录像；
3. 扫描二维码；
4. 录制语音；
5. 直接打开一些文档文件；
6. 保存文件到微信 app 目录；
7. 获取地理位置；
8. 获取用户手机基本信息（如手机型号、设备像素比、窗口宽高等）；
9. 获取网络状态（如 4G、Wi-Fi 等等）；
10. 监听重力感应器，5 次/秒（可以利用它做摇一摇功能）；
11. 监听罗盘数据，5 次/秒；
12. 直接拨打电话。

微信能力

1. 微信登录；
2. 获取用户的基本信息；
3. 微信支付；
4. 模板消息；
5. 客服消息；
6. 分享至聊天。

特别需要注意的地方：

• 只有当用户支付或提交表单后，小程序才能向用户推送模板消息。
• 用户通过客服消息按钮进入会话，1 分钟内可下发 1 条消息，超时不能发送；用户在客服窗口发送信息，可回复 3 条且需要 48 小时内回复；
• 分享至聊天时，图片不能自定义；微信会截取当前页面从顶部开始，高度为 80% 屏幕宽度的截屏作为分享图片。

关注知晓程序（微信号 zxcx0101），点击菜单栏「 资源大全 」，看小程序从注册到上线全方位指南。

本文由知晓程序授权转载，关注微信号 zxcx0101，回复「 上手 」获取全网最值得看的小程序上手体验系列文章。

快速关注知晓程序↓↓↓

知晓程序 （ 微信号 zxcx0101） 是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯 （ 消息、观点、指南、活动 ） 和服务 ，在这里你 能了解到关于小程序的一切。