通过编程模式起底小程序开发技术特点详解.docx

通过编程模式起底小程序开发技术特点 从小程序诞生伊始，就有很多人开始研习小程序的机理和特点。但是真正理解小程序，还是需要一定的实践，才能进一步去理解小程序背后的一些想法，它和现有平台的一些异同，以及如何去适应它。 作者：范怀宇 轻芒联合创始人来源：作者投稿|2016-12-12 13:29 ?收藏 ??分享 从小程序诞生伊始，就有很多人开始研习小程序的机理和特点，从源代码的角度、从整体架构的角度，有很多不错的文章会令人受益。 但理论是一回事，真正理解小程序，还是需要一定的实践，才能进一步去理解小程序背后的一些想法，它和现有平台的一些异同，以及如何去适应它，做出更有趣的小程序。 小程序的编程模式 最近，我们在做「轻芒小程序+」和其它轻芒产品的小程序应用过程中，对小程序有了进一步的理解，进而有了本文。 去理解一个开发平台的特性，一个不错的角度就是从编程模式入手，就是看在这个平台上去开发，需要如何书写和组织自己的代码，进而搞清楚三个问题： ? 数据如何获取 ? 界面如何呈现 ? 交互如何传导 换而言之，就是从 MVC（Model-View-Controller）的视角去拆解这个平台的特性，从而理解在这个平台上开发有何特点。 数据如何获取？ 程序的本质，可以说就是数据的呈现和加工。所以，看一个客户端开发平台的基本能力，首先，就要看能把哪些数据放在上面处理，有哪些局限性，如果缺少了必要的数据获取方式，那对于开发者而言，巧妇也难为无米之炊。 从这点看，小程序是提供的数据获取方式算是非常丰富了，大概涵盖： 通过 Https 请求去服务端获取数据。支持 Http 是最基本的，小程序对 Http 有限制，除了要求通信协议是 Https，出现的域名必须提前预设之外，还将应用层协议限定到了 Json 格式下，这一点，可能比任何一个已有客户端平台更为严苛。站在小程序的平台角度来看，通过这样的协议规定，对应用中流动的数据有了更强的管控能力；而对于开发者而言，则需要花些时间去调整自己的服务协议以便适应小程序的要求。 可以在本地文件系统上存取数据。小程序提供了算是丰富的 APIs 供开发者在手机系统上存取文件。开发者可以本地文件来做缓存、做状态记忆，等等，为开发提供了不错的便利。 可以读写设备中的一部分信息。小程序开放了一些 APIs，帮助开发者获得设备上的一些基本信息，比如：手机型号、屏幕尺寸，网络状态，等等。比较有价值的，是可以选择获取手机上的图片等多媒体文件，这给做一些图像相关的应用提供了可能性；以及它还提供了不少设备上罗盘、重力感应器、地理位置等相关的信息，对开发者理解用户所处的环境有很大帮助。 从上面的介绍不难看出，小程序中的数据获取方式，和一般的浏览器提供的相仿（也就是和做 Html5 应用能获取的信息），比原生的客户端更局限一些，但对于绝大多数的应用而言，是足够用了。 除此之外，?小程序提供了微信生态中的一些数据，比如账号信息。这对于微信庞大的生态而言，只是非常小的一部分数据，但确是开发小程序应用中最值得利用的一部分数据。 举个例子，在其它平台上，如果需要获取到微信的账号信息，需要通过一次用户授权。如果用户暂时不想提供，则会使得程序出于 “未登录” 状态，给整个服务的展开带来困难。而在小程序中，只要用户点开小程序，就意味着完成了授权，开发者可以直接读取到小程序的账号信息，并可以同步到自己的服务端作为该用户的身份标识，从而实现 “始终登录” 的状态，使得后续服务可以更好的提供。 一份可行的示例如下： 1. //?先调用登录接口，获得请求码? 2. ? 3. wx.login({? 4. ? 5. success:?function?(res)?{? 6. ? 7. //?获取到请求码，继续请求用户的基本信息? 8. ? 9. var?code?=?res.code? 10. ? 11. wx.getUserInfo({? 12. ? 13. success:?function?(res)?{? 14. ? 15. //?获取到了加密的用户信息，去服务端解密并存储? 16. ? 17. var?userData?=?res.encryptedData? 18. ? 19. var?iv?=?res.iv? 20. ? 21. wx.request({? 22. ? 23. url:?https://my_account/...,? 24. ? 25. data:?{? 26. ? 27. code:?code,? 28. ? 29. user_data:?userData,? 30. ? 31. iv:?iv? 32. ? 33. },? 34. ? 35. success:?function(res)?{? 36. ? 37. //?在服务