大家下午好，很高兴在Open Talk活动中与大家分享尴尬百科团队一年多来的小程序开发经验。 我是尴尬百科前端开发负责人宋航。 今天我分享的主题是“更多App化的小程序开发”。

小程序发布一年多的时间里，百科将自家的App产品落地到小程序中，开发了很多有趣的小程序。 这些小程序不一定是用户量很高的产品，但对大家在小程序开发和探索的道路上会有很大的帮助。

2016年底，微信发布了小程序，当时功能相对较少。 简单来说，就是H5的“微信化”。 在微信中画了一个H5框架。 但今天，小程序有了更多的硬件能力，所以今天我分享的主题是“更加面向App的小程序开发”。 我的观点是，无论现在还是将来，小程序都可以取代许多应用程序。

小程序的意义：强化能力、简化开发

您认为小程序的出现意味着什么？ 对于开发者来说，我认为小程序的出现实际上“增强了Web的能力，简化了App开发”。

小程序可以在iOS和iOS上运行，但它和Apps有什么不同呢？ 在开发方面，你可能早上有一个想法，开发一个小程序，晚上上线； 但开发app时，不可能早上有想法，晚上就完成开发并发布到各个应用商店。

一、小程序和H5有什么区别？ 小程序比H5拥有更多的能力和更好的兼容性。

前端开发者都知道，各种浏览器的兼容性是一个痛点。 小程序的出现首先解决了兼容性问题。 相同的运行环境可以屏蔽一些不兼容的错误，让我们更专注于开发业务逻辑。

其次，小程序拥有更强的硬件能力。 例如，将页面上的图片保存到手机相册中，普通H5就很难做到。

在小程序中，为了防止小程序滥用硬件能力，微信引入了一个概念——授权。 这个概念已经在应用程序中可用。 小程序为什么需要授权？ 因为“能力越大，责任越大”，微信可以赋予小程序更强的硬件能力，但为了防止这种能力被滥用，必须加上授权的概念。 如果H5可以随意修改相册和联系人，那将是一件非常可怕的事情。 通过微信和授权机制，小程序可以调用手机的各种硬件能力，比H5有更大的想象空间。 比如我们现在的直播、录像、拍照功能都可以使用手机摄像头、麦克风、相册等，甚至可以将文件传输到小程序中。 这个时候我们的产品就可以有很大的想象空间了。

第三，小程序依托“微信”的用户系统、推送、支付，有利于业务运营，让开发者省去大量开发工作。 H5没有推送功能，要重新获得用户需要付出很大的努力，比如组织活动。 我们简单说一下H5的主要逻辑，如图所示：

△ H5数据逻辑

H5的主要逻辑可以分为这个过程。 通过请求网络数据，对数据进行处理并展示在用户面前，将用户进行的任何操作，例如点赞、评论等，都返回给网络，请求网络后将内容发回。

相比H5，小程序拥有更多的硬件能力。 小程序不仅可以从网络获取数据，还可以从硬件设备获取数据。

△ 小程序数据逻辑

MVC：“痗百”开发小程序的业务逻辑

尴尬百科团队早期开发小程序时，因为产品比较广泛，迭代也比较快，所以没有使用第三方框架，而是使用官方的开发文档来工作。

△ 尴尬事百科小程序早期发展逻辑

官方的小程序开发文档其实很简单。 我们控制对应的page.js，设置数据，渲染到页面，即wxml，这样就可以显示UI显示、动画效果、操作反馈等。 随着开发的进行，我们逐渐发现整个程序变得非常臃肿，因为小程序的逻辑代码都放在了page.js中。 有资料提到，小程序和H5的一个很大的区别就是我们在跳转页面的时候不知道如何传递数据，因为每个page.js都是孤立的。 资料上也会教你如何传递数据，但是做起来会很麻烦。 每当你创建一个page.js时，你需要考虑这个数据是否会在下一个页面上使用，如果这个数据改变了，它会在上一个页面上使用。 当页面很多的时候如何重新渲染就变得非常复杂，每次都会影响新页面的开发。

尴尬百科团队在重构代码时，并没有采用第三方框架，而是在原有的基础上融入了整个MVC框架。 小程序官方提供的page.js可以想象为MVC框架下的。 我们将需要的数据抽象成模型。 每个模型可以在不同的page.js上，通过page.js修改数据，最后改到UI上。 优越的。

△尴尬百科使用MVC开发小程序逻辑

让我们看一下每个步骤负责什么。 原本负责所有逻辑的page.js，现在只需要负责接收数据、响应以及管理View的生命周期。 数据模型做的事情比较简单，包括处理业务逻辑、向page.js提供数据、数据持久化等。

△ 和 的数据传输

通过数据模型传输数据采用什么样的逻辑？ 这里使用了“观察者模型”和“发布/订阅模型”，两者都可以很好地相互传输数据。 两者有什么区别？

“观察者模型”可以将文章的点赞功能、是否被点赞等属性与其中的数据绑定。 修改的时候，直接修改里面的数据，然后执行该方法让UI的Like按钮点亮。

△“点赞”动作数据传输

在UI上，我们通过绑定事件将点赞按钮绑定到page.js的逻辑上。 当点赞事件发生时，文章的实例会改变点赞的属性。 因为两方是绑定的， page.js 里面的数据也会发生变化来执行方法。

“观察者模型”更喜欢单一属性的变化，比如用户登录，登录后，姓名、头像、性别等很多属性都会发生变化。 如果各自使用“观察者模型”，则每次属性改变都必须执行。 ，会非常频繁地使用，官方文档不建议如此频繁地调整方法。 因此，“观察者模型”更适合数据变化时不会影响其他UI变化的情况。 比如点赞按钮只会影响点赞的UI是否点亮，不会影响其他数据变化，所以没有变化。 Once，该方法只被调用一次，不影响整个程序的性能。 需要注意的一点是“观察者模型”需要绑定，在生命周期中要注意其解绑和绑定。

跨页面传输数据时经常使用“发布/订阅模型”。 例如上面提到的用户登录例子，用户登录后，可能会涉及到更新几个页面。 如果上一页也有显示用户信息，也是必填的。 更新如果是大型软件，可能会涉及到更多的更新数据。 如果我们按照官方的说法把整个数据都翻一遍，那就太麻烦了。

“发布/订阅模型”适合同时跨多个页面操作UI更新，使得相关数据可以在某个时间点一起更新，而不需要频繁更新。 例如，我们只需要在登录一次后更改用户的头像、性别等。 同样，“发布/订阅模型”也需要绑定。 绑定时还应注意解绑和重复绑定。

△ 登录模型示意图

上图是登录方式示意图。 绑定事件发生后，Pub-Sub推送到各个page.js，多个页面同时更新。

△管理数据

通过抽象，整个程序变得非常简单。 小程序不仅可以从网络获取数据，还可以从存储空间等硬件设备获取数据。前面我们说了page.js中的数据被抽象成了一个。 每次获取数据时，我们都会经历上图中的三个步骤：首先检查内存是否有数据，如果没有，我们可以从本地缓存中查找，最后从网络中检索/这些操作可以封装在硬件设备中进行查询。 这样调整一个属性就非常简单了，它的底层已经经过了三层查询。 这不仅是基于我们的网络请求，也可以通过小程序轻松提供。 缓存空间和文件系统空间

MVC框架对我们开发有很大的帮助。 它让数据流与page.js分离，无需考虑各种数据的传输。 微信跳转页面时只允许URL中携带某些字符串。 这样传递到下一页，就很难传递对象类型了。

小程序“首屏优化”

如何让小程序更快地向用户展示内容？ 这是制作网页时经常遇到的问题。 网页加载缓慢1秒可能会导致大量用户流失。 小程序也是如此。

第一步是尽可能压缩小程序代码的资源。 很多人刚开始制作小程序的时候，以为可以从本地资源读取图片，不用从网络加载，直接把本地资源的图片放到小程序中即可。 事实上，这并不是一个非常明智的方法。 很多图片可以放到互联网上。 ，不一定塞到小程序包里。

第二步是分包。 这有点像做H5的时候把JS包分成单独的包。 我们可以将访问频率较低的页面划分为子包。 现在小程序是4M主包加2M子包。 我们可以将访问频率较低的页面，例如设置页面、用户信息页面等，放入子包中。 这样整个小程序包就变小了，主包也变小了。 下载速度还是比较快的。

这时候我们就可以快速进入第二阶段，执行我们的业务逻辑。

△ 小程序首屏优化

小程序一打开就执行的业务逻辑就是访问网络，并不一定要等到进入对应的page.js才去请求数据。 每次访问小程序页面时，里面的数据都在被读取，里面的数据分为三层。 我们可以将用户上次退出小程序的状态保存到缓存中。 当我们再次进入时，我们就可以看到数据了。 并不是说每次进入都会出现白屏。

渲染内容时需要注意的一点是“首次渲染”可以渲染相对简单的东西。 随着页面写得越来越深，wxml中的逻辑层次会变得越来越复杂。 这时候就可以使用小程序提供的组件或者模板了。 将每个部分封装成一个组件。 每个组件渲染时，内部都会对数据进行优化，不会影响整个页面的复杂度，渲染也比较简单、快速。

利用好微信小程序提供的硬件能力

对于小程序来说，“能力越大，责任就越大”。 小程序具备硬件能力要注意什么？ 微信授权小程序调用硬件能力，但我看到很多小程序在授权方面做得很差。 例如，一旦输入并点击拒绝，就找不到重新授权。 如果点击拒绝，授权将不会再次出现。 。

当小程序获取一些私密的东西，比如手机号、用户信息等，以前做Web端的人可能没有关注这方面的安全性。 微信提供的手机号码是加密数据。 很多人在后台解密数据，然后以明文形式传输到前台。 这种做法是不合理的。 我们在传输数据的时候一定要注意信息的加密。

授权方面，我们使用小程序提供的API接口进行授权。 一旦拒绝，不会出现任何提示。 现在常见的做法是使用按钮来唤醒授权。 即使点击拒绝，如果再次点击授权按钮，仍然会弹出。 窗口，所以理想的情况是有一个页面可以让用户清楚的知道自己授权了哪一方面。 这就是为什么我们在拥有这些能力之后需要给用户明确的反馈。

充分利用微信提供的能力。 微信给我们提供了很多东西。 比如我们以前搭建一个电商平台，写了一个框架让用户长时间填写信息。 后来我们发现微信给我们提供了地址选择功能，包括卡包功能，微信已经内置了。 当然，微信的API内容非常多，大家每次开发都需要看一下。 每次看它的开发文档，都会发现它有很多新功能。

我们还可以在小程序上获取各种网络状态。 例如，在制作一些视频播放小程序或者大流量应用时，我们可以利用这些网络状态来提示用户是否选择开启某些功能。 这些都是小程序赋予我们硬件能力后，我们可以提升小程序用户体验的领域。

快来找我吧

推荐阅读

关于技术

DN 的下一步是什么？ 边缘计算！