Q：为什么说小程序就像带枪的朋友？
A：小程序发布后不久，流行了一个笑话：APP就像主屋，一年用不了几次； 服务账号就像情人，每月固定几次； 订阅号就像餐厅里的一张小卡，每天可以卖广告； 小程序就像炮友，说完就走。
资本就像妓女，各种平台和垂直掠夺者已经瓜分了线上流量，所以未来的流量战场一定是在实体场景，尽管很多掠夺者已经证明了线下流量的巨大潜力。 在快递包裹上打印自己的二维码并关注公众号，产生二次快递的粘性。 PokemonGo允许用户在物理地图上捕捉神奇宝贝。
未来的入口不仅仅限于二维码，而是所有富媒体。 QR 码用于 2D 识别，复杂图案用于 AR，语音命令用于 Siri。 发射信号的芯片； 这种入口的使用并不限于人类。 那些入口的识别不仅需要人扫描二维码，还需要有无人车来识别路标并找到实体店的坐标； 智能助手根据主人的喜好，在电商平台上手动寻找合适的商品并下单。
总之，未来的流量来自线下，流量的入口来自多媒体。 整个战场将从联通互联网转变为“物理互联网”，作为后续向“物联网”普及化的过渡。
对于陌陌来说，这样一个小程序就是利用二维码等富媒体（图像），将线下门店的流量聚集到陌陌上。 另外，从陌陌的服务品类来看，这将是腾讯朝着成为互联网水电的目标又迈出了一大步，下文将进一步分析。
目录
一、企业注册流程
2. 什么是小程序？
3.小程序的入口
4、小程序应用场景
5、是否应该做小程序（思考、小程序和H5的区别、红利期、小程序类别）
6. 一些要点
7、小程序能力（自带组件、事件、硬件能力、微信能力）
一、企业注册流程
2. 什么是小程序？
编写小程序时，使用的是 javascript 和其他 Web 开发语言。 第一次运行时，这个“网页”会缓存在本地，所以并不是不需要下载，而是下载的包比较小。 然后通过Android或iOS各自的JSBridge方法转换为相应的Java或Objective-C模式。
比如我在小程序中写了一个方法：
程序会识别wx.showToast及其参数（文本、图标、连续风暴），然后执行本地方法：
弹出一个原声Toast组件，上面只是为了方便，实际运行环境会复杂很多。
上图左侧就是大家在陌陌公开课Pro会场看到的奇微云平台快销报表小程序。 它看起来确实像一个独立的应用程序，尽管我看不到它的源代码，并且我尝试恢复其中一个页面作为示例。
每个页面都是一个独立的文件夹（Momo开发者工具会手动为您创建），每个新页面都需要在app.json文件的页面列表中添加一项。
一般来说，src目录建议用来放置一些固定的公司介绍视频或者宣传图片等（整体包大小不要超过1M）。
如果不放在这个目录下，也可以放在自己的服务器上，以便远程访问。 例如一些经常更换的活动促销横幅。
app.json可以配置整个程序的顶部导航标签和导航栏的背景颜色（其实不能转成图片，如果要渲染易迅app超级品牌日的全屏氛围，就横幅图片的上半部分建议使用渐变颜色过渡到您配置的状态栏背景颜色）、导航栏标题、导航栏颜色、是否支持下拉刷新等。
app.js是一些全局的技能，比如获取用户信息，配置全局数据。
js会部分转换为原生java和oc代码执行，那么页面呢？ 您使用的是操作系统本机组件吗？ 带着这个疑问，我用UI测试工具打开了Momo：
你听说过有一个 YYWKWebview 的东西吗？ WKWebview是一个原生浏览器控件，相当于用小程序打开下载的本地网页。 而且它使用了weex/vue这样的技术，所以页面切换的过程比较特殊。 （大家可以自行百度阿里weex）
看到每个页面都是一个文件夹，那么上面的四个文件分别是什么呢？
.json 是配置文件。 就像你的简历，里面包含姓名、毕业时间等，而小程序的json会记录一些信息：导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口背景颜色、下拉背景字体、加载图片的样式、是否启用下拉刷新、页面整体是否可以上下滚动。
.wxml是页面的基本骨架。 就像骨架规定了一个人的大致外貌一样，wxml是和xml一样的结构化文本，描述了小程序页面的元素。 例如，一篇文章需要有标题、作者、时间和正文，而它并不关心这些元素如何排列。
.js也是后端脚本语言如javascript的文件。 人的手臂如何移动需要大脑和胸部肌肉的控制。 正是js的作用，让小程序从“骨架”变成了“有血有肉的身体”。 Node.js 做一些动态的事情，比如请求数据、控制元素上下的连接、判断用户输入的密码是否安全等等。
.wxss是确定整个页面元素的颜色等表达方式。 就像同一个人可以穿不同的衣服，化不同的妆，看起来也不同。 wxml文件中也写了一个按钮，但是可以配置不同的背景颜色：
3.小程序的入口
线下实体（商店、停车场、政务服务窗口等）
比如我YY一下这次陌陌公开课给出的场景例子。
停车场入口处有一个摄像头对着你的车牌号。 扫描二维码打开小程序后，点击开始停车。 如果有空车位，系统会手动开门并记录开始停车的时间。 此时侯小程序会显示室外地图，并引导您右转再左转到达目标停车位，停车离开。 当您来取车时，开车到门口，再次扫描二维码或直接从历史记录中打开小程序，选择结束停车，拨打陌陌支付，停车场摄像头识别车牌号，并打开让你通过的大门。
整个过程不需要停车卡和专职人员服务，既环保又节省人工成本。
在线电脑导航站：
中国联通导航站：
沫沫群分享：
冷酷风格（分享自节目介绍页）：
势不可挡的风格（来自节目内页分享）：
关键词精准搜索：
发现入口：
聊天列表底部：
4、小程序应用场景
应用场景主要分为陌陌群组协作和实体服务。
陌陌集团合作
陌陌集团协作主要是一些企业内部的一些服务或者工作交流。
问卷调查：公司要举办聚会，哪种活动比较好？ 通过小程序投票并在群里分享，即可实时看到前三名。
会议助手：临时召开紧急会议，需要相关人员尽快确认出席状态，并在群里扔一个会议通知小程序，以便特定人员打开了解会议内容并确认，谁参加、谁请假、参加人数一目了然。 当活动时间到了，还可以利用小程序的消息服务能力向参加者发送提醒； 您只能通过在参与站点打开小程序来登录。 真正意义上的，需要的时候可以用，用完的时候就走。
虽然用奇微的陌陌企业账号组件可以实现很多办公场景，而且并不是每个企业都有企业账号，但对于普通的小公司和小团队来说，这种能力在小程序上还是快捷方便的。
实体服务
入睡前，扫描床头张贴的二维码，打开“金客点餐”，下单晚餐订单，然后扫描“锦家智能家装”小程序二维码。 测量到是白天，手动关灯。 对 siri（iOS 智能语音助手）说“晚安，今天七点早点叫醒我”，然后睡个好觉。
第二天，siri 叫我早起。 等了一会儿，午餐就送来了。 吃完饭后，打开陌陌聊天窗口的小程序服务通知，点击晚餐点单付款成功的模板消息，进入“金客点单”在小程序页面给了差评（如果您有付钱了，不给差评吗？！哈哈哈）。吃完饭就出去。
明天车就到公司了，明天就开车吧。 我在楼下找到了那辆白色自行车，打开摩比比小程序，扫描完成换锁，高高兴兴地骑着回公司。
来到公司，打开，登录小程序，扫描公司前台动态变化的二维码，同时小程序识别出我的地理位置，签到成功！ 当我回到座位时，辛苦了三天。
下午喝完水，朋友都说我饿了。 订餐是有利润的。 赶紧打开饥饿吧小程序吧。 黄焖鸡30元免邮费，于是我发起了团购，然后把这个页面分享到了公司群里。 男伙伴们点击进入页面选择自己想要的套餐，每笔付款都完成了。 ，各收到一条“付款成功，发货”模板消息。
之后在小程序上，就可以实时看到点菜小哥去了哪里，超级贴心。
下午睡个午觉，插上音箱，打开睡眠小小程序，听听舒适的背景音乐。
上班的时候可以开车。 在地下车库取车，开到门口，再次扫描二维码或直接从历史记录中打开小程序，选择结束停车，拨打陌陌支付，停车场摄像头就会识别车牌号。 打开门并放手。 我去地接了几个朋友，去亿达广场找吃的。 附近没有停车场，就随便找了个空地停车。 一下车，就听到一个巨大的广告牌：
探鸟优惠，扫描二维码打开探鸟小程序二维码，点击排队按钮，后面还有5人，很快就到了。 当还剩2个人的时候，小程序提示我点击下餐，那么我们五个人点两只鸡吧，应该够了。
因为喝了一些酒，酒后就没有开车。 吃饱后，我就打开嘟嘟，要求换一个司机。
当我去取车时，我发现抱草了！ 有停车罚单……醉了，扫描里面的二维码，打开警察小程序二维码，输入车牌号，系统会手动拉出罚单列表，点击刚才的停车罚单，并使用陌陌支付完成支付。 所以老司机们，不要乱停车。
…………以上故事纯属虚构…………
5.我们应该做小程序吗？
今年年初，我写过一篇文章《应用账号能否翻转应用商店？》 你是不是想太多了？”我提到了这个问题，那么现在小程序即将上线，我们再解释一下。
商业实践中的想法
专注前端，忽略后端，是技术架构上的一种策略。 由于后端代码更容易反编译和破解，所以很多核心逻辑和算法都放在服务器后台运行。 然而，在商业环境中，这些观察结果是正确的。
我们来回顾一下人类发展过程中各种“前端”的呈现：
龟甲、兽骨、竹简、木简、金石、帛——纸张——PC笔记本网页——黑白屏手机邮件——智能手机时代iOS、Android APP——移动终端H5——官方账户服务账户、小程序-智能墨镜-智能硬件显示屏-直接向大脑输入信息
这些事情正在迅速变化，但什么是不变的呢？ 信息本身的价值、信息处理的价值、核心服务的价值不变。 一千年前你去餐馆喝水，明天你去餐馆喝水； 10年前你去xxoo酒店，明天你去xxoo酒店； 更多的时候我们应该关注自己的服务和商业的闭环，无论是app还是小程序，都只是一种呈现方式。 如果你餐厅的食物特别难吃，无论你在饿吧点餐平台上发帖、小众点评，还是跟风做个小程序，你依然能够享受到美食。 没有人会照顾你的餐厅。
专注于您的核心服务，其余的交给第三方。 他们有规模优势，自然能做得更好、更实惠。
小程序和H5的区别
正如上面“小程序的真面目”一章提到的，陌陌小程序是一个本地缓存的网页。
为什么小程序比H5更流畅、更惊艳？
因为小程序是在本地缓存的，所以第二次打开时不需要再次加载，但事实真的是这样吗？ 如果小程序开发者动态加载图片、文字等很多页面元素而不进行缓存，那么每次打开小程序就相当于……重新下载app，这和原来的H5是一样的。
但原来H5的页面切换不流畅，总是需要加载，而小程序则不需要。 怎么能说小程序和H5一样呢？
原因是大多数外包开发者更喜欢将各个页面逐一编写，页面逻辑比较混乱。 当你想跳转到新的页面时，你必须向服务器请求新的页面，这是非常不舒服的。
随着Vue等后端框架的流行，越来越多的SPA框架Web应用出现。 陌陌小程序应该是基于这个技术的。 使用SPA框架的应用程序只需要在开始时加载，然后切换到应用程序中的其他页面不需要加载新页面，因此非常流畅。 那是不是意味着我们不用制作小程序就可以用vue来写呢？
不，小程序的入口比H5多很多。 对于传统商家来说，找外包商用Vue重新写一个微官网的成本和找外包商做一个小程序的成本是一样的，甚至比做小程序的成本还高。 因为小程序这么受欢迎，肯定有大量的第三方开发者为各个行业制作了小程序模板。 只需要进行一点配置，即可一键生成，成本极低。
然而，小程序比 H5 拥有更多的原生功能，不是吗？
陌陌之前也开放了一个JSSDK，它也有共享套接字、图像套接字、音频套接字、设备信息、摇一摇、扫描等功能，可以在联通H5终端上使用。 小程序的优点是比JSSDK有更多的功能。 数据存储能力，如视频、图片、音频等，可以由用户在wifi环境下保存到本地，然后在连接互联网时可以离线观看。 但是如果JSSDK开放了这个能力也是可以做到的，不过陌陌以后会帮你标准化，让你用SPA框架来构建网页，这正是小程序在技术层面所做的事情。
还有其他区别吗？
各有各的优点，所以我觉得两者都做成本会不会很高？
如果你原来的Web应用是用vue的框架搭建的，那么制作陌陌小程序的成本是很低的网站网页转小程序教程，还需要进行一些转换和适配。 例如，vue的自定义标签功能被定义为Momo小程序。 看来，我相信未来开源社区会有人贡献出这个转换代码。 如果你原来的网页不是SPA结构的，那么建议找第三方开发者制作小程序，成本低，即使限制较多。 如果你有精力或者想要获得更多的能力，你可以逐步去我刚才说的，做一些工具来完成从Web应用到小程序的桥接转换。
红利期在哪里？
在2017年陌陌公开课Pro版中，女神张小龙对小程序做了详细的分析和解答。 此前，很多人认为陌陌小程序会带来一波流量红利，但张小龙告诉大家，该小程序在陌陌上没有入口，无法订阅。 想要通过小程序获得分红的人肯定会很沮丧。
但事实是这样吗？
回想一下1840年代和1850年代英国西进时期的淘金热，我们可能更容易理解。 淘金热中最终获利的显然不是淘金者，而是支持淘金热的人，比如船夫、卖水者、卖耙子。 如果说小程序引发了“淘金热”，那么它最大的红利可能并不是小程序本身。 会是什么？
我认为是以下几个方面：
1.第三方外包开发商
目前市面上外包一个简单商城的小程序价格大概在300到1000左右，对于个人开发者来说，这基本是无利可图的，很少有个人会去定制。 对于灵活性要求高、需要一些基础组件、需要定制开发的企业来说，需要一个能够大规模输出基础组件，但在此基础上为一些企业定制开发的第三方服务商。 这适合一些在企业号红利浪潮中做得很好的开发者，很有可能成为同样专注于企业用户的小程序。 微云平台。
2.自动生成小程序
虽然陌陌小程序的开发门槛较APP大幅提升，但问题是开发者需要适应和学习其一套语言标准，且开发的应用无法移植到其他应用。 仅适用于 Momo。 如果技术新手能够零门槛通过拖拽或者基于模板的方式手动生成小程序，这将大大提高开发和使用的门槛。 而且这个平台不够灵活。
目前，此类企业包括味辰、有赞等。
3、提供前端数据托管服务的云服务商
小程序只是一个后端。 整个开发涉及企业认证、云数据存储、ICP域名注册等，对于单个企业来说非常复杂。 因此，需要一个能够提供一站式前端托管服务的第三方平台。
腾讯云目前正在这样做，阿里云应该不会推出陌陌小程序托管服务。
4.小程序开发及运营培训
虽然可以通过第三方外包或拖拽的方式来开发小程序，但后者可能会面临成本问题，而前者也不一定能定制出符合要求的小程序。 所以最好的解决办法就是“自己动手，丰衣足食”。 而提供小程序开发培训的机构可以获得利润。
5、小程序导航网
张小龙在公开课上表示：“我们没有小程序商店，所以我们不会像外界猜测的那样做APP分发商店。” 既然陌陌不做，那么由于其巨大的入门价值，自然会有人去做。 这么多小程序的名字别人要记住是很麻烦的。 每次要用的时候都要去找，非常麻烦。 如果能把小程序收藏起来，想用的时候去导航网站找到就更方便了。 许多。
什么程序不适合
1、依赖对外输出流量获取利润的App
比如明天头条、扎客等资讯类APP，其商业变现形式单一，基本都是广告。 小程序不提供商业变现的手段。 他们做小程序的时候感觉有点革命性……但是可以提供大量的小程序入口，提升品牌曝光度。
2. 更依赖系统原生能力的应用
作为一个反例：
工作流，自定义工作流，可以通过剪贴板等进行输入，然后设置动作，比如动词、发送邮件、检查电话号码是否被盗等。工作流需要获取用户的内容剪贴板、调用邮箱、印象笔记等第三方应用、打开网页等系统能力，而小程序不会将所有系统API暴露给开发者网站网页转小程序教程，这与小程序的定位不符。
还有一个反例，一个叫优读的阅读应用。 这个产品要解决的问题是如何从大量的信息中筛选出有价值的内容。 他们的想法是利用“好人”推荐和机器算法来完成。 为了方便用户将内容分享到优度，他们做了很多便捷的操作。 例如，如果您在任何应用程序中阅读内容，当您想将这篇文章分享到优度时，只需复制链接，然后下拉通知中心，就可以选择收藏或分享该文章。 非常方便。 而且根本不适合小程序。
3、需要大存储空间的应用
此类一般为视频、音频应用，如腾讯视频、网易云音乐等。用户使用此类应用的场景很大一部分是在联通环境下，他们会提前在本地缓存歌曲或电视剧。 而陌陌小程序10M的存储限制根本无法满足。 但网易云也可以把私人FM独立出来做成一个小程序来占坑。
4.需要小型3D渲染
这方面主要是关于游戏的。 一个游戏包通常在10M以上。 小程序上做页游不行，只能做个flappybird。
5、可服务性弱、与线下场景连接弱的应用
例如Evernote等工具产品。
6.如果你不能做好自己的APP，就不要加入小程序的热闹
你做一个app，没有人会用，你做一个小程序，也没有人会用。 既然核心是服务和价值，那么小程序的定位是让用户在你有免费流量的时候更容易访问你的服务，而不是为你的服务吸引流量。 例如，如果你租了一堆广告牌，你有一个带有小程序二维码的分行，用户可以更好地使用你提供的服务。 如果你自己没有流量入口，也没有这么小的程序，还是无法像app一样推送，还没有保存。
可上架的小程序品类
以下是小程序允许列出的服务类别及所需材料。 从右图我们可以看到，陌陌对政务、工具、出行、实体商户四大类进行了非常详细的细分。 可以看出，这是陌陌重要发展的四大品类。 一旦所有政府机构都使用小程序，这么多我们必须使用的政务服务肯定会刺激更多的中老年用户使用陌陌。 另外，旅行是高频需求，这从n年前陌陌支付与支付宝争夺联通旅行入口的竞争就可以看出。 另外，陌陌虽然不做导航，但虽然所需的初审材料是一样的，但这么详细的分类目的是什么呢？ 发人深省。
六、一些要点
一些数字
跳跃排水能力有限
在小程序中，无法跳转到对应的公众号，也无法吸引公众号的关注，但会在小程序的介绍页面泄露，可以点击跳转到绑定的公众号。 通过介绍页可以实现公众号与小程序的相互跳转，但无法通过长按识别网页或聊天窗口中的二维码打开小程序。
Android小程序可以放在桌面上，但iOS目前还不能
但不排除以后会通过Safari书签放到桌面上。 技术上是可以的，但是用户操作路径比Android一键放置桌面麻烦一些。
页面上不能出现引导您下载自己的应用程序的文字
陌陌官方文档5.1：
只有管理员可以上传代码
开发者上传困难
任意页面均可生成带有参数的二维码，最多10万个
这个很有想象力，在卧室贴一个金客智能管家小程序的二维码，参数action=closeLight，扫码后手动关灯；
旁边放一个金客智能管家的小程序二维码，参数action=out，出门扫描一下，手动关闭家里的总电源开关（嗯，不仅仅是冰柜）。
在公厕放二维码，action=焦点，扫描并手动关注陌陌公众号jinkey-love。
同样，带参数的二维码可以应用于线下商店、政务服务小程序的不同功能区域，直接访问相应服务，无需使用多个小程序。 例如，到建设银行取号机扫描二维码获取号码，到金银柜台扫码了解各类理财产品。
谨防移动空间和流量不足
小程序不需要下载，但是第一次使用的时候会发一个包，相当于缓存了网页，上次使用后很快就打开了，而且……你有已经下载了，但是是“无需确认下载”，点击下载，然后你的流量就会暴增……下图是陌陌小程序的下载页面，不过在即将推出的版本中，陌陌已经去掉了“数据正在下载，请稍候...”的文字，但是还是在下载哦。 Therefore, the "free download" mentioned by Momo is more of a "non-sense download".
Small program space is limited
The upload volume of the entire small program package cannot exceed 1M. After loading to the user's mobile phone, the cache size cannot exceed 10M (it may be deleted), and the permanent storage size cannot exceed 10M (it can be opened last time)
Be careful with names and avatars
The name of the applet can be changed once a year, the avatar can be changed five times a month, and the introduction of the applet can be changed five times a month.
Seven, the ability of small programs
Why do you need to know this part?
default component
what components?
What do the components look like?
In fact, the applet itself is just a web page. You can use the style of custom components through css or write some special components yourself, such as the step counter of the e-commerce shopping cart.
Storm hook (it is recommended that non-product directors, operations and other requesters skip the hook and storm part)
1. What are the hooks?
A little frog with the numbers 7 and 8 on his body (well, there seems to be nothing wrong), he needs to walk through a bag with a multiplier, and then he will get a number 15 on his body. In this way, this bag is called a hook function. If an addition operator is placed on it, the number on the little frog will pass through the cube and then become 56.
The small program is equivalent to the little frog. When running (the little frog walks), it will trigger a lot of disturbances (hook function, which is equivalent to the cube that the little frog passes through). Which logic to put on this cube depends on the pit ratio. 产品总监。
For example, when an e-commerce step counter changes value:
2. What is the hook
App lifecycle hooks
The life cycle of the applet is divided into two parts: program and page:
1. The program has three problems: start (not shown), show down and hide
2. The page has five problems: loading, displaying, getting ready (for the first time), unloading the page, and hiding the page
In addition, there are onPullDownRefresh when the pull-down is refreshed, onReachBottom when the pull-up is infinitely loaded, and onShareAppMessage when the share button in the upper right corner is clicked.
Among them, I think onShareAppMessage is very useful. For example, when the user clicks the share button in the upper right corner, a share image (height is 80% of the page height) will be overlaid on the top floor of the page, which will change the appearance of the page shared to the chat window (not yet Practiced, just a guess, you can try it yourself)
3. Touch the storm
Divided into click, long press, touch to start, touch Unicom (for example, it can be used to drag and drop to arrange the list), touch to end, touch to cancel (for example, a small program for watching videos requires you to press the phone with both hands to play, when you see When the climax is approaching, a female colleague calls, which will also trigger a touchcancel incident)
4. Component disturbance
There are mainly several kinds of component disturbances: disturbances of value changes, disturbances of starting input, disturbances of completing input.
As a counter-example, for example, a text box requires the input of an email address. Since the input storm will be triggered when the user enters, a hook function can be bound to obtain the string entered by the user each time to determine whether it is rich in "@" and ". ", if there is, it is judged to be legal.
For other details, you can see the picture on the right for self-examination.
5. Rich media storm
There are several types of rich media disturbances: start (loading) playback, pause playback, end playback, playback (loading) failure, and playback progress update.
6. Hardware capability
7. Momo's ability
(1) Momo login
(2) Obtain the user's avatar, nickname, gender, country, city, province
(3) Momo Pay
(4) Template message
Only the following two actions can trigger template messages:
(5) Customer service message
The user enters the session through the customer service message button, and can send 1 message within 1 minute, and cannot be sent after timeout;
When users send messages in the customer service window, they can reply 3 messages and reply within 48 hours
(6) Share to the chat window
The shared picture cannot be customized; it will take the current page, starting from the bottom, and an image whose height is 80% of the screen length as the shared picture.
The above is the Momo Mini Program Practical Manual. For more information about Mini Programs, follow Hi Business University!
