面试常被问到原生微信小程序的几个问题及个人感受

简单的一下从去年9月底找实习到现在面过的几家公司，和几次模拟面试时的考点。写这个主要是因为自己有两个项目是微信小程序，面试的时候每次都会问到，而且很多时候问的还不少。

个人建议：如果没有必要，一开始真的别学原生小程序开发，有时间多看看js，vue（react），甚至想不开了去学uniapp都比这强。

这里只是写一点基础相关的东西。业务相关的（例如：申请微信支付及打款，二维码，发布流程，云服务）或者其它细节的东西可以评论区交流。要有不对的地方或者什么建议也欢迎在评论区里提出来。

一、小程序和普通网页开发的区别（详见微信官方文档）

1.网页开发渲染线程（渲染DOM）和脚本线程（执行JavaScript脚本）是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应。而在小程序中是分开的。

2.网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

3.​网页开发者需要面对的环境是各式各样的浏览器，而小程序需要面对的是 iOS 和 Android 的微信客户端，以及微信开发者工具。

4.网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

二、小程序的逻辑层和渲染层

PS：第一次面试的第一道题，不写也忘不了了~

WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程，这两个线程的通信会经由Native（微信客户端）做中转，逻辑层发送网络请求也经由 Native 转发。

三、wxml，wxss和html，css的区别

wxml：对小程序常用的组件（例如：日历，弹窗，地图等）进行了封装，且wxml标签更单一（小程序：view,web端：div）。

wxss：rpx；项目初始化时app.wxss的全局样式；语法层面支持大部分css特性（例如：不支持background:url()）

四、小程序适配

PS：这个问题甚至一共被问到了三次，现在觉得面试官问这个东西要这样先引申一下，知道面试官想问什么，例如：

• web端、移动端和小程序端各自的适配方法？

web端和移动端百度都能找到答案，小程序端见下一问。

• 小程序端不同机型之间的适配？

个人感觉实际开发中，flex布局+rpx（和vw、vh）完全可以满足绝大多数的需求（至少我是没遇到过不能满足的，可能是我太菜了），只要用好这些，微信开发者工具里调成不同机型后布局效果基本一致，如果不能满足，一般也会换一种设计方案来实现功能。

所以我被问到后除了上面的那段，都是答rpx（调试的时候用iPhone6这个机型，把px乘2转化成rpx，在不同机型中，小程序会自动根据转化比率将rpx转化成对应的px），还有vw和vh。

• 宽屏适配？

也是写这段答案的时候才发现有这个东西的，以前我也没注意到，也没有被问到过，具体可以看看微信官方文档。

五、小程序的生命周期（和vue或react连着问）

lifetimes: {
	//新版基础库调用方式只能用lifetimes，不能直接把钩子写在外面
    attached: function() {},
    detached: function() {},
	//created,ready,moved,error
  },

pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }