前端编程课件07-小程序开发实战.pdf

07-⼩程序开发实战-常⻅⾯试题

1.说说你对⼩程序双线程模型架构的理解?

⼩程序的宿主环境是：微信客户端

宿主环境可以执⾏⼩程序的各种⽂件

当⼩程序运⾏在WebView环境下时，会有什么问题呢？

JS逻辑、DOM树创建、CSS解析、样式计算、Layout、Paint(Composite)都发⽣在同⼀线

程中

在WebView上执⾏过多的JS逻辑可能阻塞渲染，导致界⾯卡顿

⼩程序考虑到性能与安全的问题，采⽤了「双线程模型」的架构

WXML模块和WXSS样式运⾏于渲染层，渲染层使⽤WebView线程渲染

当⼀个程序有多个⻚⾯时，会使⽤多个WebView的线程

JS脚本（app.js/home.js等）运⾏于逻辑层，逻辑层使⽤JsCore运⾏JS脚本

这两个线程都会经由微信客户端（Native）进⾏中转并交互

2.什么是rpx？如何使⽤rpx进⾏屏幕适配？

什么是rpx：

rpx的全称是responsivepixel，可以根据屏幕宽度进⾏⾃适应。

使⽤rpx进⾏的屏幕适配：

开发微信⼩程序时设计师可以⽤iPhone6作为视觉稿的标准，规定屏幕宽为750rpx。

在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素。

即1rpx=0.5px=1物理像素。

因此如果想定义⼀个100px宽度的view则需要设置width为200rpx

3.wx:if和hidden属性有什么区别？开发中如何选择？

wx:if和hidden的区别:

wx:if需要根据条件判断组件是否渲染，条件为true，对应的组件才会渲染出来；条件为false时，

对应组件不仅不会渲染，也不会出现在虚拟DOM中。

hidden属性本质是通过添加hidden这个属性来控制组件的隐藏或显示，即使条件为true，对应组

件也会渲染，只不过不会显示在⻚⾯中。

开发中选择:

如果操作很频繁则使⽤hidden

如果不频繁则使⽤wx:if

4.wx:for为什么需要绑定key？绑定key的⽅式有哪些？

为什么要绑定key:

当我们希望处理同⼀层的VNode进⾏插⼊、删除、新增节点时，可以更好的进⾏节点的复⽤，就

需要key属性来判断。

绑定key的⽅式有哪些:

字符串:表示for循环array中item的某个属性(property)该property是列表中的唯⼀的字符串或数

字

保留关键字*this表示item本身此时item本身是唯⼀的字符串或数字

5.WXS的作⽤是什么？如何使⽤？

WXS作⽤:

⼩程序的⼀套脚本语⾔与JavaScript是不同的语⾔，有⾃⼰的语法，并不和JavaScript⼀致。

为了在wxml中调⽤函数来处理对应的数据

如何使⽤:

⽅式⼀：写在wxs标签中

⽅式⼆：写在.wxs结尾的⽂件中以cjs的⽅式导出，以cjs的⽅式在wxml⽂件中引⼊使⽤

6.⼩程序中的事件如何传递参数？

⼩程序中事件常⽤传递参数的⽅式是通过data-属性来实现。

可以在逻辑代码中通过el.currentTarget.dataset.属性名称获取

7.target和currentTarget的区别？

target：指触发事件的元素

currentTarget：指的是处理事件的元素，两者作⽤在同⼀个元素上⽆差别。

⼩程序中常⽤currentTarget

8.⻚⾯和组件之间如何进⾏数据传递？

⻚⾯传递给组件：

向组件传递数据可以通过properties属性，⽀持String、Number、Boolean、Object、Array、

null等类型

向组件传递样式可以通过定义externalClasses属性来实现

组件传递给⻚⾯：

组件向外传递事件可以在组件内部通过this.triggerEvent将事件派发，⻚⾯可以通过bind绑定

9.⼩程序中组件的插槽如何使⽤？如何给插槽传递默认

值？

⼩程序中使⽤插槽:

在组件中想要使⽤插槽的地⽅通过预留位置（也⽀持具名