微信小程序基础面试题【29道】

本文详细介绍了微信小程序的基础面试题,涵盖wxml与HTML、WXSS与CSS的异同,小程序主要目录和文件的作用,双向绑定与Vue的对比,相关文件类型,传值方法,事件绑定区别,页面跳转API,与H5、Vue的区别,rpx理解,自定义TabBar,缓存数据,网络请求,路由跳转传参,生命周期,模块化,API使用,自定义组件及事件通道等内容,帮助开发者深入理解微信小程序的开发与实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写目录标题

1、请谈谈wxml与标准的html的异同?

wxml 是微信小程序的一种页面渲染语言,类似于 HTML,但也有一些不同之处。

以下是 wxml 与标准的 HTML 的异同:

相同点:

  1. 两者都是页面渲染语言,用于描述网页的结构和内容。
  2. 两者都使用标签来组织内容。
  3. 两者都支持使用 CSS 样式表来控制页面的外观和布局。
  4. 两者都支持事件处理,可以通过绑定事件来响应用户的操作。

不同点:

  1. 标签不同:wxml 中的标签更多地与微信小程序的 API 相关,比如 <view><text><image> 等,而标准的 HTML 则更多地包含一些常见的元素,比如 <div><span><a> 等。
  2. 属性不同:wxml 的标签属性与 HTML 的标签属性也有一些不同,比如 wxml 中的 wx:if、wx:for 等属性是专门为微信小程序开发设计的,而 HTML 中则没有这些属性。
  3. 样式不同:wxml 中的样式是使用 wxss(微信小程序样式表) 来定义的,而 HTML 中则是使用标准的 CSS 样式表来定义的。
  4. 盒子模型不同:wxml 中的盒子模型与标准的 HTML 盒子模型也略有不同,主要体现在盒子的宽度和高度的计算方式上。

总的来说,wxml 和 HTML 相似,但也有自己的特点和差异,需要根据具体的开发需求来选择使用哪种语言。

2、请谈谈WXSS和CSS的异同?

WXSS(WeChat Style Sheet)是微信小程序的样式表语言,它与标准的 CSS(Cascading Style Sheets)有以下异同:

相同点:

  1. 两者都用于定义页面元素的样式,包括颜色、字体、布局、边框等方面。
  2. 两者都支持选择器、属性、值等基本语法。
  3. 两者都支持继承、层叠等特性。

不同点:

  1. 单位不同:CSS 使用像素(px)、百分比(%)等单位来表示长度或大小,而 WXSS 使用 rpx(微信小程序专用的长度单位),rpx 会根据屏幕宽度进行自适应调整,适应不同设备的屏幕尺寸。
  2. 可用属性不同:WXSS 与 CSS 支持的属性并不完全一致,例如 WXSS 中有专门针对微信小程序的一些属性,如 text-decoration-line(下划线)、-webkit-line-clamp(文本行数)等。
  3. 属性值不同:WXSS 与 CSS 中某些属性的取值方式有所不同,例如 WXSS 中的 color 属性可以使用全局变量 $color 来表示颜色,而 CSS 中没有这样的机制。
  4. 选择器不同:WXSS 中的选择器与 CSS 中的选择器有所不同,例如 WXSS 中的 ::after 伪元素不支持,但是支持一些特定的微信小程序的选择器,如 pageview 等。

总的来说,WXSS 与 CSS 在使用上有一些不同,但是基本的语法和概念都是相似的。如果你已经熟悉了 CSS,那么上手 WXSS 也应该相对容易。

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

微信小程序的主要目录和文件包括:

  1. app.json:微信小程序的全局配置文件,包括小程序的名称、页面路径、窗口配置等信息。
  2. app.js:微信小程序的入口文件,用于定义小程序的生命周期函数、全局变量、全局方法等。
  3. app.wxss:微信小程序的全局样式表,用于定义小程序的全局样式。
  4. pages/:微信小程序的页面目录,用于存放小程序的页面文件。
  5. utils/:微信小程序的工具目录,用于存放小程序的工具函数、公共样式等。

各文件的主要作用如下:

  1. app.json:定义小程序的全局配置信息,例如小程序的窗口配置、导航栏设置、页面路径等。
  2. app.js:定义小程序的全局逻辑,例如生命周期函数、全局变量、全局方法等。
  3. app.wxss:定义小程序的全局样式,例如字体、颜色、布局等。
  4. pages/:存放小程序的页面文件,每个页面通常由一个 wxml 模板文件、一个对应的 js 逻辑文件、一个 wxss 样式文件和一个 JSON 配置文件组成。
  5. utils/:存放小程序的工具函数、公共样式等,方便在多个页面中重复使用。

以上是微信小程序主要目录和文件的作用,了解这些可以更好地理解和使用微信小程序。

4、请谈谈小程序的双向绑定和vue的异同?

小程序的双向绑定和 Vue 的双向绑定有以下异同:

相同点:

  1. 都是实现数据的双向绑定,即数据的改变可以自动更新到视图,视图的改变也可以自动更新到数据。
  2. 都是通过数据劫持的方式实现的,即通过监听数据的变化来更新视图。

不同点:

  1. 实现方式不同:小程序的双向绑定是基于数据绑定和事件绑定实现的,而 Vue 的双向绑定则是基于数据劫持和发布/订阅模式实现的。
  2. 语法不同:小程序的双向绑定使用的是类似于 AngularJS 的 ng-model 的语法,即 value="{ {data}}" bindinput="setData",而 Vue 的双向绑定使用的是 v-model 语法,即 v-model="data"
  3. 性能不同:Vue 的双向绑定通过数据劫持实现,可以精确地追踪数据的变化并更新视图,而小程序的双向绑定则需要通过事件绑定和数据绑定实现,相对来说效率会稍低一些。
  4. 依赖不同:Vue 的双向绑定依赖于 Vue.js 框架,而小程序的双向绑定是微信小程序原生支持的功能,不需要额外的框架支持。

综上所述,虽然小程序和 Vue 都支持双向绑定,但是实现方式和语法有所不同,并且在性能和依赖方面也存在一定的差异。如果你熟悉 Vue 的双向绑定,那么上手小程序的双向绑定也应该相对容易。

5、简单描述下微信小程序的相关文件类型?

微信小程序的相关文件类型包括以下几种:

  1. WXML:微信小程序的模板文件,类似于 HTML 文件,用于定义小程序的页面结构和内容。
  2. WXSS:微信小程序的样式文件,类似于 CSS 文件,用于定义小程序的页面样式和布局。
  3. JSON:微信小程序的配置文件,用于定义小程序的全局配置信息、页面路径等。
  4. JS:微信小程序的脚本文件,用于编写小程序的逻辑代码,包括页面逻辑、组件逻辑、网络请求等。
  5. WXS:微信小程序的脚本文件,类似于 JS 文件,但是在编写时需要注意一些特殊的语法和限制,可以用于编写一些复杂的逻辑。
  6. 图片、音频、视频等媒体文件:用于在小程序中展示图片、播放音频和视频等多媒体内容。

以上是微信小程序的主要文件类型,了解这些文件类型可以更好地理解和开发微信小程序。

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

微信小程序有以下几种传值(传递数据)的方法:

  1. URL 参数传递:可以在页面路径后面添加参数进行传值,例如:/pages/index/index?id=1&name=abc,在目标页面的 onLoad 生命周期中可以通过 options 参数获取传递的值。

  2. Storage 存储:可以使用 wx.setStorageSyncwx.setStorage 方法将数据存储到本地缓存中,在目标页面中使用 wx.getStorageSyncwx.getStorage 方法获取数据。

  3. 全局数据传递:可以将数据存储在 App 实例中的 globalData 属性中,在目标页面中使用 getApp().globalData 获取数据。

  4. 事件传递:可以通过触发事件来传递数据,例如在子组件中触发一个自定义事件,并通过事件对象传递数据,在父组件中监听该事件并获取传递的数据。

  5. 页面栈传递:可以使用小程序提供的页面栈来传递数据,通过 getCurrentPages 方法获取页面栈的实例,使用 data 属性存储数据,在目标页面中使用 options 获取数据。

需要根据实际业务需求选择合适的传值方式,上述方法中,URL 参数传递、Storage 存储、全局数据传递等方式适用于不同页面之间的数据传递,而事件传递和页面栈传递则适用于组件之间和同一页面的数据传递。

7、bindtap和catchtap的区别?

在微信小程序中,bindtapcatchtap 都是用来绑定点击事件的属性,它们的主要区别在于事件冒泡和阻止冒泡的处理方式。

bindtap 属性用于绑定一个点击事件处理函数,当点击事件发生时,该处理函数会被触发执行。如果在事件处理函数中调用 event.stopPropagation() 方法来阻止事件冒泡,则该事件不会向父级元素传递。

catchtap 属性也用于绑定一个点击事件处理函数,但与 bindtap 不同的是,当点击事件发生时,该处理函数先于父级元素的事件处理函数执行,如果在事件处理函数中调用 event.stopPropagation() 方法来阻止事件冒泡,则该事件不会向父级元素传递。

因此,bindtapcatchtap 的主要区别在于事件冒泡和阻止冒泡的处理方式,如果希望点击事件能够向上冒泡并被父级元素捕获处理,则应该使用 bindtap,如果希望阻止点击事件冒泡,则应该使用 catchtap

8、简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?

在微信小程序中,以下五种页面跳转方式常用于不同的业务场景:

  1. wx.navigateTo():保留当前页面,跳转到应用内的某个页面,新页面可以通过 wx.navigateBack() 方法返回到原页面。这种方式适用于需要在新页面中进行操作并返回原页面的情况,如填写表单、查看详情等。

  2. wx.redirectTo():关闭当前页面,跳转到应用内的某个页面,新页面不能通过 wx.navigateBack() 方法返回到原页面,而是重新打开一个页面栈。这种方式适用于不需要返回原页面,而是需要直接进入目标页面的情况,如登录页、欢迎页等。

  3. wx.switchTab():跳转到应用内的某个 TabBar 页面,并关闭其他所有非 TabBar 页面。这种方式适用于 TabBar 导航场景,如底部导航、顶部标签等。

  4. wx.navigateBack():关闭当前页面,返回上一个页面。如果当前页面是通过 wx.navigateTo()wx.redirectTo() 打开的,则返回到打开该页面的原页面,如果当前页面是 TabBar 页面,则返回到上一个 TabBar 页面。这种方式适用于返回上一个页面的情况。

  5. wx.reLaunch():关闭所有页面,跳转到应用内的某个页面。这种方式相当于关闭所有页面,重新打开一个页面栈。这种方式适用于需要完全重启应用并打开某个页面的情况,如退出登录后重新登录。

以上是五种常用的页面跳转方式,在实际开发中需要根据业务场景选择合适的方式。

9、微信小程序与H5的区别?

微信小程序和H5是两种不同的技术方案,它们之间有以下几点区别:

  1. 开发语言和框架:微信小程序使用的是基于JavaScript的WXML和WXSS语言,使用微信开发者工具进行开发和调试。而H5使用的是HTML、CSS和JavaScript等技术,并使用网页浏览器进行开发和调试。

  2. 执行环境和性能:微信小程序的执行环境是微信客户端,可以获得更好的性能表现和用户体验,因为它可以直接使用微信客户端提供的能力,如地理位置、支付等。而H5则需要在浏览器中运行,受限于浏览器的性能和能力。

  3. 可访问性:微信小程序只能在微信客户端中访问,需要用户下载并安装微信客户端,而H5则可以通过任何支持浏览器的设备访问,包括电脑、手机、平板等。

  4. 可扩展性:微信小程序相对于H5来说,其功能和扩展性受到限制。小程序必须符合微信小程序的规范和限制,并且必须经过微信审核才能发布。而H5则更加灵活,可以随意扩展和定制,没有限制。

总的来说,微信小程序是一种轻量级应用,其主要优势在于用户体验和性能方面,适用于需要更加稳定和高效的应用场景。而H5则更加灵活和可扩展,适用于需要自由发挥的应用场景。

10、小程序和Vue写法的区别?

小程序和Vue在开发模式、语法、组件化等方面有一定的区别,具体如下:

  1. 开发模式:小程序需要使用微信开发者工具进行开发和调试,而Vue可以在浏览器中使用webpack等工具进行开发和调试。

  2. 语法:小程序使用WXML和WXSS语言,而Vue使用HTML、CSS和JavaScript等技术。小程序的WXML和WXSS语言是为了方便小程序的开发而设计的,它们与HTML、CSS等语言有一些区别,比如标签和属性的命名、

<think>好的,我现在需要准备回答关于微信小程序的常见面试题。首先,我应该回忆一下微信小程序基础知识,比如它的生命周期、文件结构、常用API等。然后,可能需要比较小程序和普通网页应用的区别,比如运行环境、技术栈。接着,性能优化方面,用户可能关心如何提升小程序的加载速度和运行效率。数据传递和通信机制,比如页面间传参、全局变量和缓存的使用。还有网络请求相关的,比如如何封装wx.request,处理异步操作。另外,跨平台开发也是一个常见问题,比如使用Taro或Uni-app的经验。安全方面的问题,比如如何防止XSS攻击,保护用户数据。最后,实际开发中遇到的挑战和解决方案,以及项目经验。需要确保每个问题点都覆盖到,并且用清晰的中文表达,避免技术术语混乱,同时结合实例说明会更生动。还要注意面试题通常不仅考察知识点,还考察解决问题的思路,所以可能需要举一些实际场景的例子。现在整理这些内容,分点列出,结构清晰,便于用户理解和记忆。</think>以下是微信小程序常见面试题及简要解析,帮助系统化梳理核心知识点: --- ### 一、基础概念 1. **小程序与H5的区别** - **运行环境**:H5运行在浏览器,小程序运行在微信环境(双线程架构:渲染层+逻辑层)。 - **性能**:小程序更接近原生体验,支持本地缓存、预加载。 - **API权限**:小程序可直接调用微信原生功能(支付、定位等)。 2. **生命周期** - **应用级**:`onLaunch`(初始化)、`onShow`(前台)、`onHide`(后台)。 - **页面级**:`onLoad`(加载)、`onShow`(显示)、`onReady`(渲染完成)、`onUnload`(卸载)。 - **组件级**:`created`、`attached`、`ready`等。 --- ### 二、核心机制 3. **双线程模型原理** - **逻辑层**(AppService):处理JS逻辑,与视图层通过`Native`层通信。 - **渲染层**(WebView):渲染WXML/WXSS,通过`evaluateJavascript`与逻辑层交互。 - **数据传递**:通过`setData`异步更新,需避免频繁调用。 4. **数据通信方式** - **页面传参**:`wx.navigateTo`的`url`拼接参数,通过`onLoad`的`options`接收。 - **全局变量**:`App`对象中定义全局数据。 - **缓存**:`wx.setStorageSync`存储本地数据。 - **事件总线**:自定义事件或使用第三方库(如`mitt`)。 --- ### 三、性能优化 5. **启动速度优化** - 减少代码包体积(分包加载、删除无用代码)。 - 使用`wx.getBackgroundFetchData`预加载数据。 - 启用「按需注入」和「用时注入」减少初始化负载。 6. **渲染优化** - 避免频繁`setData`,合并数据更新。 - 使用`WXS`处理视图层逻辑,减少逻辑层通信。 - 长列表使用`虚拟列表`(如官方`recycle-view`组件)。 --- ### 四、开发技巧 7. **自定义组件封装** - 通过`behaviors`复用代码逻辑。 - 使用`observers`监听数据变化。 - **示例**:封装一个带校验的表单组件,暴露`validate`方法供父组件调用。 8. **网络请求封装** - 统一处理`wx.request`,添加拦截器(请求头、Token、错误码处理)。 - **代码片段**: ```javascript const request = (url, method, data) => { return new Promise((resolve, reject) => { wx.request({ url: `${baseURL}${url}`, method, data, success: (res) => { if (res.statusCode === 200) resolve(res.data); else reject(res); }, fail: (err) => reject(err) }); }); }; ``` --- ### 五、高频进阶问题 9. **如何实现跨平台开发?** - 使用`Taro`、`Uni-app`等框架,通过条件编译兼容不同平台。 - **注意事项**:差异化的API(如微信登录需单独适配H5)。 10. **小程序安全策略** - 防止XSS:对`<rich-text>`渲染内容过滤,避免直接插入未转义HTML。 - 敏感数据保护:登录态(如`openid`)不存储在本地,通过HTTPS传输。 --- ### 六、实战场景分析 **题目**:用户反馈小程序页面白屏,如何排查? **回答思路**: 1. 检查网络请求是否超时(如接口报错导致数据未加载)。 2. 查看`onLoad`生命周期是否有未捕获的异常。 3. 使用开发者工具的「调试器」查看Console报错信息。 4. 真机测试是否因基础库版本过低导致兼容性问题。 --- 通过以上问题梳理,可系统掌握小程序的核心技术点。实际面试中建议结合项目经验举例说明,如:「在XX项目中,我通过分包加载将启动时间降低了30%」。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值