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

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 伪元素不支持，但是支持一些特定的微信小程序的选择器，如 page、view 等。

总的来说，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.setStorageSync 或 wx.setStorage 方法将数据存储到本地缓存中，在目标页面中使用 wx.getStorageSync 或 wx.getStorage 方法获取数据。

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

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

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

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

7、bindtap和catchtap的区别？

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

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

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

因此，bindtap 和 catchtap 的主要区别在于事件冒泡和阻止冒泡的处理方式，如果希望点击事件能够向上冒泡并被父级元素捕获处理，则应该使用 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则更加灵活，可以随意扩展和定制