小程序面试题 | 21.精选小程序面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

小程序中如何处理网络请求的错误和异常情况？

在小程序中处理网络请求的错误和异常情况，可以通过以下几个步骤来实现：

1. 发起网络请求：

使用wx.request()或wx.request()方法发起网络请求。

wx.request({
 url: 'https://example.com/api/data',
 data: {},
 success: function (res) {
   console.log('请求成功', res.data);
 },
 fail: function (res) {
   console.log('请求失败', res);
 },
});

2. 处理请求错误和异常：

请求成功时，处理请求结果；请求失败时，根据错误类型进行相应的处理。

fail: function (res) {
 if (res.errMsg === 'request failed') {
   console.log('网络请求失败');
 } else if (res.errMsg === 'request timeout') {
   console.log('网络请求超时');
 } else if (res.errMsg === 'bad request') {
   console.log('请求参数有误');
 } else {
   console.log('其他错误', res);
 }
},

3. 处理响应错误和异常：

请求成功时，根据返回的响应数据进行处理；请求失败时，根据错误类型进行相应的处理。

success: function (res) {
 if (res.data.code === 0) {
   console.log('请求成功', res.data);
 } else if (res.data.code === 1) {
   console.log('请求失败', res.data);
 } else {
   console.log('其他错误', res);
 }
},

4. 错误和异常信息的提示：

为了更好地帮助用户解决问题，可以在请求失败时给用户显示友好的错误提示信息。

fail: function (res) {
 if (res.errMsg === 'request failed') {
   wx.showToast({
     title: '网络请求失败',
     icon: 'none',
   });
 } else if (res.errMsg === 'request timeout') {
   wx.showToast({
     title: '网络请求超时',
     icon: 'none',
   });
 } else if (res.errMsg === 'bad request') {
   wx.showToast({
     title: '请求参数有误',
     icon: 'none',
   });
 } else {
   wx.showToast({
     title: '其他错误',
     icon: 'none',
   });
 }
},

通过以上步骤，可以在小程序中处理网络请求的错误和异常情况，并给用户显示友好的错误提示信息。

小程序中如何实现多端适配（如同时适配手机、平板、电脑等）？

小程序中实现多端适配可以通过以下几个步骤来实现：

1. 使用微信官方提供的多端适配工具：

微信官方提供了多端适配工具wxpack，用于打包多端兼容的小程序。使用wxpack可以轻松实现多端适配，只需遵循一定的规则编写代码即可。

2. 编写适配代码：

在小程序中，可以通过使用wx.getSystemInfo()方法获取系统信息，然后根据不同的系统信息来调整界面和逻辑。

getSystemInfo: function () {
 wx.getSystemInfo({
   success: function (res) {
     const { platform, screenWidth, screenHeight, pixelRatio } = res.data;
     console.log('系统信息', res.data);

     // 根据系统信息调整界面和逻辑
     if (platform === 'android') {
       // 安卓设备
     } else if (platform === 'ios') {
       // iOS设备
     } else {
       // 微信浏览器
     }
   },
   fail: function (err) {
     console.error('获取系统信息失败', err);
   },
 });
},

3. 使用不同的布局和样式：

根据不同的系统信息，使用不同的布局和样式来适应不同设备的大小和分辨率。

Page({
 data: {},
 onLoad: function () {
   const systemInfo = this.data.systemInfo;
   const { platform, screenWidth, screenHeight, pixelRatio } = systemInfo;

   if (platform === 'android') {
     // 安卓设备布局和样式
   } else if (platform === 'ios') {
     // iOS设备布局和样式
   } else {
     // 微信浏览器布局和样式
   }
 },
});

4. 适配响应式设计：

响应式设计是指根据不同的设备尺寸和分辨率自动调整界面和布局，使得在小屏幕设备上也能获得良好的用户体验。在小程序中，可以使用wx.createSelectorQuery()方法来获取设备尺寸和分辨率，然后根据不同的尺寸来调整界面和布局。

getSystemInfo: function () {
 wx.getSystemInfo({
   success: function (res) {
     const { platform, screenWidth, screenHeight, pixelRatio } = res.data;
     console.log('系统信息', res.data);

     // 根据系统信息调整界面和布局
     if (platform === 'android') {
       // 安卓设备
     } else if (platform === 'ios') {
       // iOS设备
     } else {
       // 微信浏览器
     }
   },
   fail: function (err) {
     console.error('获取系统信息失败', err);
   },
 });
},

通过以上步骤，可以在小程序中实现多端适配，使得在小屏幕设备上也能获得良好的用户体验。