初识微信小程序

名侦探柯南

本文作者为 360 奇舞团前端开发工程师本期介绍小程序的开发现在已经越来越火了，目前微信、支付宝、QQ等都已经推出了各自的小程序框架/解决方案，那么也就意味着拥有小程序开发的工程师也越来越受欢迎。而微信小程序凭借微信巨大的用户群和社交红利，微信小程序相对其他家在技术和生态建设上都处于绝对领先阶段。但是作为一个小程序侧的“小白”；或者说并没有详细了解过微信小程序的开发人员，想必大家会关注以下几个问题：什么是微信小程序微信小程序与传统的H5有什么区别？微信小程序为什么会越来越受欢迎/优点是什么？什么是微信小程序小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序与传统的h5有什么区别运行环境方面web端需要面对的环境是各式各样的浏览器，PC端需要面对 IE、Chrome、QQ浏览器等，在 移动端需要面对 Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。小程序：运行于特定的软件平台（wx、支付宝、qq）。拿微信举例，小程序开发过程中需要面对的是两大操作系统 iOS和 Android的客户端，以及还会有用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的：运行环境逻辑层渲染层iOSJavaScriptCoreWKWebView安卓V8chromium定制内核小程序开发者工具NWJSChrome WebView将以上三个环境都兼顾到了，基本就 微信小程序是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。运行机制方面H5 的运行就是一个网页的运行，这里不过多叙述。小程序：小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。从用户认知的角度看，广义的小程序启动可以分为两种情况，一种是冷启动，一种是热启动。名词解释热启动如果用户已经打开过某小程序，在一定时间内再次打开该小程序，此时无需重新启动，只需将后台的小程序切换到前台即可，整个过程就是所谓的热启动。冷启动如果用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，就是冷启动。销毁当小程序进入后台一定时间，或系统资源占用过高，或者是你手动销毁，才算真正的销毁。（从小程序生命周期的角度来看，我们一般讲的「启动」专指冷启动，热启动一般被称为后台切前台。）系统权限名词解释h5网络通信状态、数据缓存能力、通讯录、或调用硬件的，如蓝牙功能等等一些APP有的功能，H5就没有这些系统权限，因为它重度依赖浏览器能力。小程序微信客户端的这些系统级权限都可以和微信小程序无缝衔接，官方宣称拥有 Native App 的流畅性能。开发语言名词解释h5标准的 HTML、CSS、JavaScript， 前端三剑客小程序不同平台的小程序有不同语言。最常用的微信小程序，自定义的 WXML、WXSS，WXML 中全部是微信自定义 的标签，WXSS、JSON 和 JS 文件中的写法都稍有限制，官方文档中都有明确的使用介绍，虽容易上手，但还是有区别的。开发成本名词解释h5首先开发工具 ( vscode/webstorm... )，其次是开发框架 ( Vue/React...),模块化工具、UI库、各种 包的选择，还要考虑兼容问题，成本还是比较高的。小程序不用再去考虑浏览器兼容性，拿微信小程序举例子，只需要看着文档开发就可以，小程序独立出来了很多原生APP的组件，H5需要模拟才能实现的功能，小程序里可以直接调用组件，都是封装好的。不过小程序再简单也是需要学习成本在里面的，遇到的问题当然也不少。比如我前两天在小程序中写了个表单，用的 标签，在开发web的时候这套标签组合使用率还是蛮高的，结果却发现微信小程序里是没有 标签的。虽然在开发的过程中并没有发现什么异常，但是去文档里面搜了一下，确实是没有的。在开微信小程序前，还是有必要去研究下文档的更新机制名词解释h5基本上可以做到实时的更新，把代码推到正确的环境上部署完成后，刷新当前的页面，不出意外的话应该就可以刷 新到最新版本了。小程序1.更新机制较h5来说较难控制。每次更新需要提交最新版本进行审核，只有审核通过才可以发布成功。而且开 发者在发布新版本之后，无法立刻影响到所有现网用户，要在发布之后 24 小时之内才下发新版本信息到用户小 程序。每次冷启动时，都会检查有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包 进行启动，所以新版本的小程序需要等 下一次冷启动 才会应用上。2.需要开发者手动出发更新，在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。constupdateManager=wx.getUpdateManager()updateManager.onCheckForUpdate(function(res){//请求完新版本信息的回调console.log(res.hasUpdate)})updateManager.onUpdateReady(function(){wx.showModal({title:'更新提示',content:'新版本已经准备好，是否重启应用？',success(res){if(res.confirm){//新的版本已经下载好，调用applyUpdate应用新版本并重启updateManager.applyUpdate()}}})})updateManager.onUpdateFailed(function(){//新版本下载失败})如果更新失败或超时，为了保障小程序的可用性，还是会使用本地版本打开。渲染机制名词解释h5web渲染，浏览器渲染。小程序宿主环境是微信，宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件，提供了双线模型那么什么是双线程模型呢？先看一张官方图：小程序的渲染层和逻辑层分别由2个线程管理渲染层：界面渲染相关的任务全都在 WebView 线程里执行，一个小程序存在多个界面，所以渲染层存在多个 WebView线程逻辑层：一个单独的线程执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，就是通过图中的 JsCore 线程来运行 JS 脚本 这两个线程都会经过微信客户端( Native )中的 WeixinJsBridage 进行中转通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。小程序的渲染逻辑在渲染层将WXML先转换为 js 对象也就是虚拟 DOM在逻辑层将虚拟 DOM 对象生成真实DOM树，交给渲染层渲染 当视图有数据需更新时，逻辑层调用小程序宿主环境提供的 setData 方法将数据从逻辑层传递到渲染层。经过对比前后差异，把差异应用在真实的 Dom 树上，渲染出正确的 UI 界面完成视图更新。虽然小程序是通过 Native 原生渲染的，但是小程序也支持web渲染，就是 web-view 组件，在 web-view 中加载 H5 页面，而我们开发小程序时，通常会使用 hybrid 的方式(混合模式移动应用)。，根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 web-view 加载 H5 页面来实现，Native 与 Web 渲染 混合使用，实现项目最优解。微信小程序为什么会越来越受欢迎/优点是什么？不占内存,随用随走。 小程序不需要存储空间,不用下载、注册等一系列繁琐的操作,用户使用简介方便,随用随走。成本低、利润大。 相对于APP，小程序的开发成本更低,小程序还可以结合线上线下的营销活动,争取更大的利润。宣传应用范围广。 不管是餐饮、旅游、教培、电商,还是政务,几乎每个领域都可以通过小程序实现自己的业务。而且小程序、社群、直播,等多种方式都可以进行宣传,相对于传统的实体门店宣传范围更广泛。日活量丰富,用户基数大。 那微信小程序来说，小程序是基于微信的,微信的十亿日活量,带给小程序巨大的流量池,用转化更容易。一些兼容性问题 & 好用的代码库IOS 的 Date 构造函数 不支持2018-04-26这种格式的日期，必须转换为2018/04/26这种格式，可以通过相应的方式进行处理mp-html 小程序富文本组件本期分享的受众人群小程序新手、想从事小程序开发工作的开发者想了解小程序的互联网从业人员对小程序感兴趣的it工作者们-END-关于奇舞团奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。