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

在这里插入图片描述

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

在这里插入图片描述

文章目录

- - 1. 小程序的架构是什么样的？
  - 2. 什么是WXML和WXSS？
  - 3. 小程序的生命周期有哪些？
  - 4. WXML与标准的HTML的区别？
  - 5. WXSS和CSS的异同？
  - 6. 怎么封装小程序>微信小程序的数据请求？
  - 7. 小程序页面间有哪些传递数据的方法？
  - 8. 小程序的双向绑定和Vue哪里不一样？
  - 9. 小程序如何实现下拉刷新？
  - - 1.步骤一
    - 2步骤二
  - 10. bindtap和catchtap的区别？
  - - 1.bindtap
    - 2.catchtap
  - 11. 小程序>微信小程序与H5的区别？
  - 12. 小程序>微信小程序原理是什么？
  - 13. 分析小程序>微信小程序的优劣势？
  - 14. 如何解决小程序>微信小程序的异步请求问题？
  - - 1.使用回调函数
    - 2.使用Promise对象
    - 3.使用async/await
  - 15. 小程序有哪些文件类型？
  - 16. 简述小程序>微信小程序页面的生命周期函数？
  - 17. 小程序如何更新页面中的值？
  - 18. 如何实现登录数据的持久化？
  - - 1.使用本地缓存
  - 19. 小程序>微信小程序和app有什么不同之处？
  - 20. 小程序>微信小程序如何进行双向绑定？
  - 21. 如何自定义tabbar？
  - 22. 小程序怎样使用自定义组件？
  - 23. 小程序本地存储（数据缓存）有哪些常用api？
  - 24. 小程序>微信小程序如何关联微信公众号？
  - 25. webview中的页面怎么跳转回小程序？
  - 26. 小程序>微信小程序如何实现分页加载数据？
  - 27. 小程序中的模态框如何实现？
  - 28. 小程序>微信小程序如何获取用户的位置信息？
  - 29. 小程序中的图片如何实现懒加载？

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

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

&lt;view&gt;
  &lt;block&gt;
    &lt;view&gt;
      {{item.name}} - {{item.price}}
    &lt;/view&gt;
  &lt;/block&gt;
&lt;/view&gt;

Page({
  data: {
    products: [
      { id: 1, name: '产品A', price: 100 },
      { id: 2, name: '产品B', price: 200 }
    ]
  },
  handleCategoryTap: function() {
    console.log('商品分类被点击');
  },
  handleProductTap: function(e) {
    console.log('产品' + e.currentTarget.dataset.name + '被点击');
  }
});

2.catchtap

场景描述：在一个表单页面中，有一个提交按钮。当用户点击提交按钮时，只会触发按钮自身的提交事件，不会触发其他无关的事件（如页面上的其他按钮的点击事件或链接的跳转事件）。

&lt;view&gt;
  &lt;button&gt;提交订单&lt;/button&gt;
  <a href="/pages/other/other">另一个页面</a>
&lt;/view&gt;

Page({
  handleSubmitTap: function() {
    console.log('提交订单按钮被点击');
  }
});

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

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

12. 小程序>微信小程序原理是什么？

答案：小程序>微信小程序采用JavaScript、WXML、WXSS三种技术进行开发。从技术上讲和现有的前端开发差不多，但深入挖掘又有所不同。JavaScript的代码是运行在微信App中的，并非运行在浏览器中，因此一些H5技术的应用需要微信App提供对应的API支持。WXML是微信自己基于XML语法开发的，只能使用微信提供的现有标签。WXSS具有CSS的大部分特性，但并不是所有的都支持。微信的架构是数据驱动的架构模式，UI和数据是分离的，所有的页面更新都需要通过对数据的更改来实现。小程序分为webview和appService两部分，其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI的渲染、事件的处理。

13. 分析小程序>微信小程序的优劣势？

答案：优势包括无需下载、打开速度快、开发成本低、为用户提供良好的安全保障、服务请求快等。劣势包括依托微信不能开发后台管理功能、大小限制不能超过2M、不能打开超过5个层级的页面、样式单一等。

14. 如何解决小程序>微信小程序的异步请求问题？

答案：在回调函数中调用下一个组件的函数。

1.使用回调函数

wx.request({
  url: 'https://example.com/api',
  success: function(res) {
    // 请求成功后的处理逻辑，比如更新页面数据
    console.log('请求成功，返回数据：', res.data);
  },
  fail: function(error) {
    // 请求失败后的处理逻辑，比如提示用户
    console.error('请求失败，错误信息：', error);
  }
});

2.使用Promise对象

可以使用Promise封装wx.request()，利用Promise的链式调用特性，简化异步处理过程

function request(url) {
  return new Promise((resolve, reject) =&gt; {
    wx.request({
      url: url,
      success: function(res) {
        resolve(res.data); // 请求成功，调用resolve方法
      },
      fail: function(res) {
        reject(res); // 请求失败，调用reject方法
      }
    });
  });
}

// 使用Promise进行异步请求
request('https://example.com/api')
  .then(function(data) {
    // 请求成功后的处理逻辑
    console.log('请求成功，返回数据：', data);
  })
  .catch(function(err) {
    // 请求失败后的处理逻辑
    console.error('请求失败，错误信息：', err);
  });

3.使用async/await

通过async和await关键字，可以以同步的方式编写异步代码

async function fetchData() {
  try {
    const res = await new Promise((resolve, reject) =&gt; {
      wx.request({
        url: 'https://example.com/api',
        success: resolve,
        fail: reject
      });
    });
    console.log('请求成功，返回数据：', res.data);
  } catch (error) {
    console.error('请求失败，错误信息：', error);
  }
}

// 调用异步函数
fetchData();

15. 小程序有哪些文件类型？

答案：WXML（模板文件）、WXSS（样式文件）、JS（脚本逻辑文件）、JSON（配置文件）。

16. 简述小程序>微信小程序页面的生命周期函数？

答案：onLoad：页面加载时触发；onReady：页面初次渲染完成时触发；onShow：页面显示时触发；onHide：页面隐藏时触发；onUnload：页面卸载时触发。

17. 小程序如何更新页面中的值？

答案：通过调用this.setData()方法来更新页面中的值。

18. 如何实现登录数据的持久化？

答案：可以使用本地存储（如wx.setStorageSync和wx.getStorageSync）或缓存（如wx.setStorageSync和wx.getStorageSync）来实现登录数据的持久化。

1.使用本地缓存

存储数据

// 用户登录成功后，存储登录数据到本地缓存
wx.setStorageSync('token', '登录凭证');
wx.setStorageSync('userInfo', { name: 'John', age: 25 });

读取数据

// 获取本地缓存中的登录数据
const token = wx.getStorageSync('token');
const userInfo = wx.getStorageSync('userInfo');

19. 小程序>微信小程序和app有什么不同之处？

答案：小程序>微信小程序无需下载安装即可使用，而app需要下载安装；小程序>微信小程序更轻量级，占用空间小；app的功能和性能通常比小程序更强大。

20. 小程序>微信小程序如何进行双向绑定？

答案：小程序>微信小程序的双向绑定需要借助data来实现，并且需要使用this.setData()方法来更新视图。


&lt;view&gt;
  &lt;input type="text" /&gt;
  &lt;text&gt;你输入的是: {{inputValue}}&lt;/text&gt;
&lt;/view&gt;

// index.js
Page({
  data: {
    inputValue: '' // 初始化数据模型中的inputValue变量
  },
  handleInput: function(e) {
    this.setData({
      inputValue: e.detail.value // 更新数据模型中的inputValue变量为输入框中的当前值
    });
  }
});

21. 如何自定义tabbar？

答案：在app.json中配置tabBar字段，并在pages数组中配置每个页面的路径。

22. 小程序怎样使用自定义组件？

答案：先创建一个components文件夹用来存放所有自定义组件，然后在其中创建自定义组件的目录结构（包括wxml、wxss、js、json文件）；在.json文件中进行自定义组件声明；在需要使用的页面的.json文件中引入自定义组件；最后在页面的.wxml文件中引用自定义组件。

23. 小程序本地存储（数据缓存）有哪些常用api？

答案：常用的api包括wx.setStorageSync(key, value)、wx.getStorageSync(key)、wx.removeStorageSync(key)等。

24. 小程序>微信小程序如何关联微信公众号？

答案：需要在微信公众号后台进行相关配置，并获取必要的信息（如AppID、AppSecret等），然后在小程序中进行相应的设置和调用。

25. webview中的页面怎么跳转回小程序？

答案：先在管理后台配置域名白名单，然后引入jweixin-1.3.2.js（https://res.wx.qq.com/open/js/jweixin-1.3.0.js），最后使用wx.miniProgram.navigateTo方法进行跳转。

26. 小程序>微信小程序如何实现分页加载数据？

答案：可以通过滚动监听（如onReachBottom事件）来检测用户是否滚动到页面底部，然后发起网络请求加载更多数据，并更新页面内容。

27. 小程序中的模态框如何实现？

答案：可以使用官方提供的模态框组件（如），也可以通过自定义组件来实现模态框的效果。

28. 小程序>微信小程序如何获取用户的位置信息？

答案：可以使用wx.getLocation接口来获取用户的地理位置信息，但需要注意获取用户授权。

29. 小程序中的图片如何实现懒加载？

答案：可以使用标签的lazy-load属性来实现图片的懒加载，或者通过第三方库来实现。