关于微信小程序的面试题及其解析

我的血液里流淌着战意！力量与智慧指引着我！

---

1. 小程序的架构是什么样的？

答案：小程序的架构主要包括前端（由WXML、WXSS、JavaScript组成）和后端（可选择任意后端语言），以及通过API进行的数据交互。

2. 什么是WXML和WXSS？

答案：WXML（WeiXin Markup Language）是小程序的标记语言，用于构建页面结构。WXSS（WeiXin Style Sheets）是小程序的样式表语言，类似于CSS。

3. 小程序的生命周期有哪些？

答案：小程序的生命周期包括onLaunch（小程序初始化）、onShow（小程序显示）、onHide（小程序隐藏）、onError（错误处理）等。

4. WXML与标准的HTML的区别？

答案：WXML与HTML都是用来描述页面的结构；都由标签、属性等构成；但标签名字不同，且小程序标签更少，单一标签更多；WXML多了一些wx:if这样的属性以及{ {}}这样的表达式；WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览；组件封装不同，WXML对组件进行了重新封装；小程序运行在JS Core内，没有DOM树和window对象，无法使用window对象和document对象。

5. WXSS和CSS的异同？

答案：WXSS和CSS都是用来描述页面的样式；WXSS具有CSS的大部分特性，但也做了一些扩充和修改；WXSS新增了尺寸单位rpx，是响应式像素，可以根据屏幕宽度进行自适应；WXSS仅支持部分CSS选择器；WXSS提供全局样式与局部样式；WXSS不支持window和dom文档流。

6. 怎么封装微信小程序的数据请求？

答案：将所有的接口放在统一的js文件中并导出；在app.js中创建封装请求数据的方法；在子页面中调用封装的请求数据。

7. 小程序页面间有哪些传递数据的方法？

答案：在app.js中使用全局变量实现数据传递；给元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取；通过设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值；页面跳转或重定向时，在navigator中使用url带参数传递数据；使用组件模板template传递参数；使用缓存传递参数；使用数据库传递参数。

8. 小程序的双向绑定和Vue哪里不一样？

答案：两者大体相同，但小程序直接使用this.data属性是不可以同步到视图的，必须调用this.setData()方法。取值方面，Vue中通过this.xxx取值，小程序中通过this.data.xxx取值。定义方法和取变量的方式也不同。

9. 小程序如何实现下拉刷新？

答案：在app.json或page.json中配置enablePullDownRefresh:true；在page里用onPullDownRefresh函数，在下拉刷新时执行；在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态。

1.步骤一

在页面的配置文件（通常是 page.json）中开启下拉刷新功能

{
   
   
  "enablePullDownRefresh": true
}

2步骤二

在页面的脚本文件（通常是 page.js 或 page.ts）中，定义 onPullDownRefresh 方法来处理下拉刷新事件

Page({
   
   
  onPullDownRefresh: function () {
   
   
    // 在这里执行数据更新的操作，例如发送网络请求获取新数据
    console.log('正在刷新数据...');

    // 模拟网络请求的延迟
    setTimeout(function () {
   
   
      console.log('数据刷新完成');

      // 数据更新完成后，调用 wx.stopPullDownRefresh() 停止下拉刷新的状态
      wx.stopPullDownRefresh();
    }, 2000);
  }
});

10. bindtap和catchtap的区别？

答案：bindtap不会阻止冒泡事件，catchtap可以阻止冒泡。

1.bindtap

• 场景描述：在一个购物车页面中，有一个商品列表，每个商品项都可以点击进行查看详情。当用户点击任意商品项时，不仅会触发该商品项的查看详情事件，还会触发页面级别的统计事件（如记录用户点击了哪个商品分类）。

<view>
  <block>
    <view>
      {
  
  {item.name}} - {
  
  {item.price}}
    </view>
  </block>
</view>

Page({
   
   
  data: {
   
   
    products: [
      {
   
    id: 1, name