2020面试总结 —— 小程序相关

[fengmiaosen]

1. Javascript实现DSL
   https://juejin.im/post/5a3de2225188252b145b4000

2. 微信小程序与普通网页开发的区别

小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。
这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的

3. 微信小程序渲染层和逻辑层

   小程序的渲染层和逻辑层分别由2个线程管理：

   • 渲染层的界面使用了WebView 进行渲染；
   • 逻辑层采用JsCore线程运行JS脚本。

   一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

   

有关渲染层和逻辑层的详细文档参考 小程序框架 。

4. 小程序同层渲染原理剖析

「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此时「原生组件层」已经不存在，原生组件此时已被直接挂载到 WebView 节点上。你几乎可以像使用非原生组件一样去使用「同层渲染」的原生组件，比如使用 view、image 覆盖原生组件、使用 z-index 指定原生组件的层级、把原生组件放置在 scroll-view、swiper、movable-view 等容器内，通过 WXSS 设置原生组件的样式等等。

• iOS

  iOS 端的「同层渲染」也正是基于 WKChildScrollView 实现的，原生组件在 attached 之后会直接挂载到预先创建好的 WKChildScrollView 容器下

• Android

  Android 端的同层渲染就是基于 embed 标签结合 chromium 内核扩展来实现的

https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813

5. 小程序的bindtap和catchtap的区别

• bindtap 绑定一个事件处理函数，事件会发生冒泡
• catchtap 会阻止事件向上冒泡

6. 微信小程序页面间通信的方式

• 利用onShow/onHide激活方法，通过localStorage传递数据
• onShow/onHide激活方法，通过读写小程序globalData完成数据传递
• 实现一个PubSub，通过订阅发布实现通信。在发布事件时，激活对方方法，同时传入参数，执行事件的订阅方法
• gloabelData watcher方式

参考资料

• 小程序与普通网页开发的区别