微信小程序面试题

1.请谈谈wxml与标准的html的异同？

• 标签名字有点不一样
• 多了一些 wx:if 这样的属性以及 { { }} 这样的表达式
• 开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
• 组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
• 没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。

 

2.请谈谈WXSS和CSS的异同？

• 新增了rpx尺寸单位   750rpx

• wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚

• 提供了全局的样式和局部样式

       项目根目录中的app.wxss会作用于所有小程序页面局部页面 .WXSS 样式仅对当前页面生效
  

• WXSS仅支持部分css选择器

     .class 和 #idelement并集选择器、后代选择器::after 和 ::before 等伪类选择器 
  

 

3.请谈谈微信小程序主要目录和文件的作用？

app.js 逻辑文件，主要用来注册小程序全局实例。监听并处理小程序的生命周期函数，声明全局变量等。
app.json 公共设置文件，配置小程序全局设置。底部tab，标题栏和路由等设置。
app.wxss 主样式表文件，类似HTML的css文件。全局配置的样式文件。该文件不是必需的。
小程序的4个页面文件：
.js文件 页面逻辑文件，页面的逻辑，请求和数据处理。
.wxml文件 页面结构文件，用来设计页面的布局、数据绑定等。
.wxss文件 页面样式表文件，用来定义页面中用到的各类样式表。该文件不是必需的。
.json文件 页面配置文件。配置当前页面标题和引入组件。其在页面中不可缺少。

 

4.简单描述下微信小程序的相关文件类型？

微信小程序项目结构主要有四个文件类型：wxml；wxss；json；js

.WXML：是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面结构。

.WXSS：描述 WXML 的组件样式。css使用px、wxss使用rpx

.js：逻辑处理，网络请求。

.json：小程序设置，如页面注册，页面标题及tabBar

 

5.请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

 

6.微信小程序有哪些传值(传递数据)方法？

1. 页面跳转或重定向时，使用url带参数传递数据（路由传值）

      使⽤ 路由wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。 然后在⽬标⻚⾯通过在 onLoad 周期中，通过参数来获取传递过来的值。
2. 使用本地存储传递参数
3. 使用全局变量传递数据

     使⽤全局变量在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。

     在 组件.js 中， 头部 引⼊ const app = getApp();

      获取到全局变量直接使⽤app.globalData.key 来进⾏赋值和获取值。

4. 给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
5. 设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
6. 在navigator中添加参数数值

 

7.bindtap和catchtap的区别？

相同点： 都是点击事件

不同点： bindtap 不会阻⽌冒泡， catchtap 可以阻⽌冒泡。

 

8.wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
​wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
​wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
 

 

9.微信小程序与H5的区别？

• 运行环境不同（小程序在微信运行，h5在浏览器运行）
• 开发成本不同（h5需要兼容不同的浏览器）
• 获取系统权限不同（系统级权限可以和小程序无缝衔接）
• 应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

 

10.小程序和Vue写法的区别？

• 小程序的路由写在app.json文件里，vue写在route.