微信小程序相关面试题_微信小程序面试题

1.请谈谈wxml与标准的html的异同？

WXML是微信小程序的一种标记语言，而HTML是Web开发中最常用的标记语言之一。它们之间的异同如下：

1. 语法不同：WXML与HTML的语法有很大的不同，WXML更加简洁，标签名也不同。

2. 标签不同：WXML中的标签与HTML中的标签也有很大的不同，WXML中的标签更加专注于小程序的功能和特性。

3. 样式不同：WXML中的样式使用WXSS来定义，而HTML中的样式使用CSS来定义。

4. 功能不同：WXML更加专注于小程序的功能和特性，如数据绑定、事件处理等，而HTML则更加专注于Web页面的展示和交互。

5. 兼容性不同：WXML只能在微信小程序中使用，而HTML则可以在各种浏览器中使用。

总的来说，WXML与HTML有很大的不同，主要是因为它们服务于不同的领域和应用场景。WXML更加专注于小程序的功能和特性，而HTML则更加专注于Web页面的展示和交互。

2.请谈谈WXSS和CSS的异同？

WXSS（Weixin Style Sheets）是微信小程序专用的样式语言，类似于CSS（Cascading Style Sheets），但有一些不同之处。

相同点：

1. 都是用来定义页面的样式，包括字体、颜色、布局等；
2. 都支持选择器、属性和值的定义；
3. 都可以通过样式文件引入到页面中。

不同点：

1. 语法不同：WXSS使用类似于CSS的语法，但是有一些微信小程序特有的语法，如rpx单位、import语句等；
2. 单位不同：CSS使用像素（px）作为单位，而WXSS使用rpx（responsive pixel）作为单位，可以根据屏幕宽度自适应缩放；
3. 功能不同：WXSS支持一些CSS不支持的功能，如scroll-view组件的scroll-x和scroll-y属性、text组件的selectable属性等；
4. 兼容性不同：WXSS只能在微信小程序中使用，而CSS可以在网页、移动应用等多个平台中使用。

总的来说，WXSS和CSS有很多相似之处，但是在语法、单位、功能和兼容性等方面都有一些不同之处。需要根据具体的应用场景选择使用哪种样式语言。

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

微信小程序主要目录和文件的作用如下：

1. app.js：小程序的入口文件，用于定义小程序的生命周期函数和全局变量。

2. app.json：小程序的全局配置文件，用于配置小程序的页面路径、窗口背景色、导航栏样式等。

3. app.wxss：小程序的全局样式文件，用于定义小程序的全局样式。

4. pages目录：小程序的页面目录，用于存放小程序的各个页面。

5. page.js：小程序的页面逻辑文件，用于定义页面的生命周期函数和页面的交互逻辑。

6. page.json：小程序的页面配置文件，用于配置页面的路径、导航栏样式、页面背景色等。

7. page.wxml：小程序的页面结构文件，用于定义页面的结构和布局。

8. page.wxss：小程序的页面样式文件，用于定义页面的样式。

9. utils目录：小程序的工具目录，用于存放小程序的工具函数和公共组件。

以上是微信小程序主要目录和文件的作用，不同的文件和目录承担着不同的功能，共同构成了一个完整的小程序。

4.请谈谈小程序的双向绑定和vue的异同？

小程序的双向绑定和Vue的双向绑定有些相似，但也有一些不同之处。

相同点：

1. 都是通过数据绑定实现的，当数据发生变化时，视图也会相应地发生变化。
2. 都支持表单元素的双向绑定，即表单元素的值改变时，数据也会相应地改变。

不同点：

1. 小程序的双向绑定是通过setData方法实现的，而Vue是通过数据劫持实现的。
2. 小程序的双向绑定只能在组件内部使用，而Vue的双向绑定可以在整个应用中使用。
3. 小程序的双向绑定只能绑定简单的数据类型，如字符串、数字、布尔值等，而Vue的双向绑定可以绑定复杂的数据类型，如对象、数组等。
4. 小程序的双向绑定需要手动触发setData方法，而Vue的双向绑定是自动触发的。

总的来说，小程序的双向绑定和Vue的双向绑定都是实现数据和视图的同步更新，但是在具体实现上有一些不同之处。

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

微信小程序的相关文件类型包括：

1. .json文件：用于描述小程序的页面结构、样式和配置等信息。

2. .wxml文件：类似于HTML的标记语言，用于描述小程序的页面结构。

3. .wxss文件：类似于CSS的样式表语言，用于描述小程序的页面样式。

4. .js文件：用于编写小程序的逻辑代码，包括页面交互、数据处理等。

5. .wxs文件：类似于JS的脚本语言，用于编写小程序的一些公共函数和工具函数。

6. .png、.jpg等图片文件：用于小程序的图片资源。

7. .mp3、.mp4等音视频文件：用于小程序的音视频资源。

8. .wxss、.json、.wxml等文件可以通过组件化的方式进行复用，提高代码的可维护性和复用性。

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

微信小程序有以下几种传值（传递数据）的方法：

1. URL传参：可以在跳转页面时通过URL传递参数，接收参数的页面可以通过getCurrentPages()方法获取到页面栈，从而获取到传递的参数。

2. 全局变量：可以在app.js中定义全局变量，然后在其他页面中通过getApp()方法获取到app实例，从而获取到全局变量。

3. Storage本地存储：可以通过wx.setStorageSync()方法将数据存储到本地缓存中，然后在其他页面中通过wx.getStorageSync()方法获取到存储的数据。

4. Event事件传递：可以通过triggerEvent()方法触发自定义事件，然后在父组件中通过bind:customEvent方法接收传递的数据。

5. Page生命周期函数：可以在页面的生命周期函数中传递数据，例如在onLoad()函数中通过options参数获取到传递的参数。

6. 组件间通信：可以通过properties属性将数据传递给组件，也可以通过组件间的事件传递机制实现数据传递。

7.bindtap和catchtap的区别？

bindtap和catchtap都是小程序中的事件绑定函数，但它们有一些区别：

1. 触发顺序不同：bindtap在捕获阶段触发，而catchtap在冒泡阶段触发。

2. 事件处理方式不同：bindtap是绑定事件处理函数，如果事件处理函数返回false，事件将继续冒泡，如果返回true，事件将被阻止。而catchtap是捕获事件处理函数，如果事件处理函数返回false，事件将被阻止，如果返回true，事件将继续冒泡。

3. 事件传递方式不同：bindtap事件是从子元素向父元素传递，而catchtap事件是从父元素向子元素传递。

综上所述，如果需要在子元素上绑定事件并阻止事件冒泡，可以使用catchtap；如果需要在父元素上绑定事件并阻止事件冒泡，可以使用bindtap。

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

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack()可以返回到原页面。

wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，使用wx.navigateBack()无法返回到原页面。

wx.switchTab()：跳转到应用内的某个tabBar页面，并关闭其他所有非tabBar页面。

wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。

wx.reLaunch()：关闭所有页面，打开应用内的某个页面。

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

微信小程序和H5的区别主要有以下几点：

1. 运行环境不同：微信小程序是在微信客户端内运行的，而H5是在浏览器中运行的。

2. 技术栈不同：微信小程序使用的是微信自己的开发框架，主要使用JavaScript、CSS和WXML等技术，而H5则使用HTML、CSS和JavaScript等技术。

3. 功能限制不同：微信小程序受到了一些限制，例如不能直接访问手机的通讯录、相册等，而H5则没有这些限制。

4. 用户体验不同：微信小程序可以提供更加流畅的用户体验，因为它可以直接调用手机的硬件设备，例如摄像头、陀螺仪等，而H5则无法做到。

5. 推广方式不同：微信小程序可以通过微信的社交网络进行推广，而H5则需要通过搜索引擎等方式进行推广。

10.小程序和Vue写法的区别？

小程序和Vue的写法有很大的区别，主要体现在以下几个方面：

1. 语法不同：小程序使用的是WXML、WXSS和JS，而Vue使用的是HTML、CSS和JSX。

2. 数据绑定方式不同：小程序使用的是双向数据绑定，而Vue使用的是单向数据流。

3. 组件化方式不同：小程序的组件化方式是通过Component实现的，而Vue的组件化方式是通过Vue组件实现的。

4. 生命周期不同：小程序的生命周期包括created、attached、ready、moved、detached等，而Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。

5. 路由方式不同：小程序的路由方式是通过wx.navigateTo、wx.redirectTo、wx.switchTab等实现的，而Vue的路由方式是通过Vue Router实现的。

总之，小程序和Vue的写法有很大的区别，需要开发者根据具体的需求和场景选择合适的技术栈。

11.rpx的理解？

RPX是指Relying Party Extension，是一种基于SAML协议的身份验证和授权机制。它允许第三方应用程序（称为“依赖方”）使用现有的身份验证机制来验证用户身份，而无需重新验证用户。RPX使用单点登录（SSO）技术，使用户只需一次登录即可访问多个应用程序。RPX还提供了一些扩展功能，如社交媒体集成、多因素身份验证等，以增强安全性和用户体验。

12.微信小程序可以进行dom操作吗？

微信小程序采用的是WXML语言，类似于HTML，但是它不支持直接的DOM操作。相反，它使用组件和数据绑定来实现页面的渲染和交互。在小程序中，可以使用组件来构建页面，例如button、view、text等组件，通过数据绑定来实现组件的动态渲染和交互。同时，小程序也提供了一些API来操作页面元素，例如wx.createSelectorQuery()可以获取页面元素的信息，wx.createAnimation()可以实现动画效果等。因此，虽然小程序不支持直接的DOM操作，但是通过组件和API可以实现类似的功能。

13.微信小程序自定义tabbar的理解？

微信小程序自定义tabbar是指开发者可以自定义小程序底部导航栏的样式和功能，使其更符合自己的需求和品牌形象。通过自定义tabbar，开发者可以实现以下功能：

1. 自定义导航栏的样式，包括颜色、图标、文字等。

2. 实现导航栏的跳转功能，可以跳转到不同的页面。

3. 实现导航栏的切换功能，可以在不同的页面之间切换。

4. 实现导航栏的角标功能，可以在导航栏上显示未读消息数等信息。

自定义tabbar需要在app.json文件中配置，通过设置tabBar属性来实现。开发者需要在tabBar属性中设置list数组，每个数组元素表示一个tab项，包括页面路径、图标、选中图标、文字等信息。开发者还可以通过设置selectedColor属性来设置选中状态下的颜色。

总之，自定义tabbar可以让小程序更加个性化和易用，提高用户体验和品牌形象。

14.微信小程序怎么缓存数据？

微信小程序可以使用wx.setStorageSync和wx.setStorage两种方式进行数据缓存，其中wx.setStorageSync是同步方式，wx.setStorage是异步方式。

1. 同步方式：

// 设置缓存数据
wx.setStorageSync('key', 'value');

// 获取缓存数据
var data = wx.getStorageSync('key');

// 清除缓存数据
wx.removeStorageSync('key');
1
2
3
4
5
6
7
8

2. 异步方式：

// 设置缓存数据
wx.setStorage({
  key: 'key',
  data: 'value',
  success: function(res) {
    console.log('缓存成功');
  }
});

// 获取缓存数据
wx.getStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data);
  }
});

// 清除缓存数据
wx.removeStorage({
  key: 'key',
  success: function(res) {
    console.log('清除成功');
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

需要注意的是，异步方式需要在success回调函数中进行数据操作，因为异步方式是非阻塞的，不能保证数据已经被写入或读取。

15.微信小程序怎么进行网络请求？

微信小程序可以使用wx.request()方法进行网络请求。该方法接受一个对象作为参数，包含以下属性：

• url：请求的地址
• data：请求的参数
• header：请求头
• method：请求方法，可选值为GET、POST、PUT、DELETE等
• dataType：返回的数据类型，可选值为json、text等
• responseType：响应的数据类型，可选值为arraybuffer、text等
• success：请求成功的回调函数
• fail：请求失败的回调函数
• complete：请求完成的回调函数

示例代码：

wx.request({
  url: 'https://example.com/api',
  data: {
    name: 'John',
    age: 30
  },
  header: {
    'content-type': 'application/json'
  },
  method: 'GET',
  dataType: 'json',
  responseType: 'text',
  success: function(res) {
    console.log(res.data);
  },
  fail: function(res) {
    console.log('请求失败：', res);
  },
  complete: function(res) {
    console.log('请求完成：', res);
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注意：微信小程序中的网络请求必须使用HTTPS协议。

16.微信小程序路由跳转以及传参如何实现？

微信小程序的路由跳转可以使用 wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch 等方法，具体使用方法如下：

1. wx.navigateTo：保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})
1
2
3

2. wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: '/pages/detail/detail?id=123'
})
1
2
3

3. wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.switchTab({
  url: '/pages/index/index'
})
1
2
3

4. wx.reLaunch：关闭所有页面，打开应用内的某个页面。

wx.reLaunch({
  url: '/pages/index/index'
})
1
2
3

传参可以在跳转链接中添加参数，例如 /pages/detail/detail?id=123，在目标页面中可以通过 options 参数获取传递的参数。

Page({
  onLoad: function (options) {
    console.log(options.id) // 输出 123
  }
})
1
2
3
4
5

17.微信小程序生命周期的理解？

微信小程序生命周期是指小程序在运行过程中，不同阶段所执行的一系列函数。它包括以下几个阶段：

1. 应用初始化阶段（onLaunch）：小程序初始化时执行，只执行一次。

2. 应用显示阶段（onShow）：小程序启动或从后台进入前台时执行。

3. 应用隐藏阶段（onHide）：小程序从前台进入后台时执行。

4. 页面加载阶段（onLoad）：页面加载时执行，只执行一次。

5. 页面显示阶段（onShow）：页面显示时执行。

6. 页面初次渲染完成阶段（onReady）：页面初次渲染完成时执行，只执行一次。

7. 页面隐藏阶段（onHide）：页面从前台进入后台时执行。

8. 页面卸载阶段（onUnload）：页面卸载时执行，只执行一次。

在不同的生命周期阶段，开发者可以通过相应的函数来实现不同的功能，例如在onLaunch中进行全局变量的初始化，在onShow中进行数据的更新等。了解小程序生命周期可以帮助开发者更好地掌握小程序的运行机制，提高开发效率。

18.微信小程序模块化？

微信小程序支持模块化开发，可以将一个小程序拆分成多个模块，每个模块负责不同的功能或页面。模块化开发可以提高代码的可维护性和复用性，同时也方便团队协作和项目管理。

在微信小程序中，可以使用 require 或 import 关键字来引入其他模块。例如：

// 引入其他模块
var module1 = require('module1');
import module2 from 'module2';

// 使用其他模块中的函数或变量
module1.func1();
module2.var1 = 'new value';
1
2
3
4
5
6
7

同时，可以将一个模块封装成一个组件，以便在多个页面中复用。组件化开发可以提高代码的可复用性和可维护性，同时也方便页面的构建和管理。

在微信小程序中，可以使用 Component 函数来定义一个组件。例如：

// 定义一个组件
Component({
  properties: {
    // 定义组件的属性
    prop1: {
      type: String,
      value: ''
    },
    prop2: {
      type: Number,
      value: 0
    }
  },
  data: {
    // 定义组件的内部数据
    data1: '',
    data2: 0
  },
  methods: {
    // 定义组件的方法
    method1: function() {},
    method2: function() {}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

然后，在页面中可以使用 <component-name> 标签来引用该组件。例如：

<!-- 在页面中引用组件 -->
<custom-component prop1="value1" prop2="2"></custom-component>
1
2

19.微信小程序所有api放在哪里，简单介绍几个api？

微信小程序的所有API都放在官方文档中，可以在微信小程序开发者工具中打开文档，也可以在微信官方网站上查看。

以下是几个常用的API：

1. wx.request：发起网络请求，可以用于获取数据或提交数据。

2. wx.navigateTo：跳转到新页面，可以传递参数。

3. wx.showToast：显示消息提示框，可以设置显示时间和图标。

4. wx.getStorageSync：同步获取本地缓存数据。

5. wx.getUserInfo：获取用户信息，需要用户授权。

6. wx.getLocation：获取当前位置信息，需要用户授权。

7. wx.createCanvasContext：创建画布上下文，可以用于绘制图形。

8. wx.createInnerAudioContext：创建音频上下文，可以用于播放音频。

9. wx.createVideoContext：创建视频上下文，可以用于播放视频。

10. wx.createAnimation：创建动画实例，可以用于实现动画效果。

20.微信小程序应用和页面生命周期触发顺序？

微信小程序应用和页面生命周期的触发顺序如下：

1. 应用生命周期

• onLaunch：小程序初始化时触发，只会触发一次。
• onShow：小程序启动或从后台进入前台时触发。
• onHide：小程序从前台进入后台时触发。
• onError：小程序发生脚本错误或 API 调用失败时触发。

2. 页面生命周期

• onLoad：页面加载时触发，只会触发一次。
• onShow：页面显示时触发。
• onReady：页面初次渲染完成时触发。
• onHide：页面隐藏时触发。
• onUnload：页面卸载时触发。

需要注意的是，当小程序从后台进入前台时，会先触发应用的onShow生命周期，然后再触发当前页面的onShow生命周期。当小程序从前台进入后台时，会先触发当前页面的onHide生命周期，然后再触发应用的onHide生命周期。

21.微信小程序如何使用sass预编译？

微信小程序支持使用sass预编译器，可以通过以下步骤进行配置：

1）在项目根目录下创建一个名为sass的文件夹，用于存放sass文件。

2）在项目根目录下创建一个名为gulpfile.js的文件，用于配置gulp任务。

3）在gulpfile.js中引入gulp和gulp-sass模块，并配置sass任务：

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist'));
});
1
2
3
4
5
6
7
8

4）在命令行中执行gulp sass命令，即可将sass文件编译成wxss文件，并输出到dist目录下。

22.微信小程序开发文档界面都有哪些操作，列举几项？

• 搜索框：可以通过关键词搜索相关文档。

• 目录栏：可以浏览文档的目录结构，快速定位到需要的内容。

• 内容区域：显示文档的具体内容，包括文字、图片、代码等。

• 代码示例：提供实际的代码示例，方便开发者理解和使用。

• 评论区：开发者可以在这里提出问题、分享经验，与其他开发者交流。

23.微信小程序自定义组件的使用？

1. 创建自定义组件：在小程序项目中创建一个新的文件夹，命名为组件名，然后在该文件夹中创建一个.wxml文件、一个.wxss文件、一个.js文件和一个.json文件，分别用于定义组件的结构、样式、逻辑和配置。

2. 在需要使用组件的页面中引入组件：在页面的.wxml文件中使用<组件名></组件名>的方式引入组件。

3. 在页面的.js文件中注册组件：使用Component()方法注册组件，并定义组件的属性、方法和生命周期函数。

4. 在组件的.wxml文件中定义组件的结构：使用标签定义插槽，用于接收页面传递的内容。

5. 在组件的.js文件中定义组件的逻辑：使用this.data和this.setData()方法管理组件的数据，使用this.triggerEvent()方法触发组件的自定义事件。

24.微信小程序事件通道的使用？

1. 在需要接收事件的页面中创建事件通道：使用wx.createInnerAudioContext()方法创建一个内部音频上下文对象，并使用该对象的onCanplay()方法监听音频可以播放的事件。
2. 在需要触发事件的页面中获取事件通道：使用wx.createInnerAudioContext()方法创建一个内部音频上下文对象，并使用该对象的emit()方法触发自定义事件。
3. 在事件通道的回调函数中处理事件：当事件通道接收到事件时，会触发回调函数，开发者可以在回调函数中处理事件。

25.微信小程序如何使用vant组件库？

1. 在小程序项目中安装vant组件库：使用npm install vant-weapp命令安装vant组件库。
2. 在app.json文件中配置vant组件库：在"usingComponents"字段中添加vant组件库的组件名和路径。
3. 在需要使用vant组件的页面中引入组件：在页面的.wxml文件中使用<组件名></组件名>的方式引入vant组件。
4. 在页面的.js文件中注册组件：使用Component()方法注册组件，并定义组件的属性、方法和生命周期函数。
5. 在组件的.wxml文件中定义组件的结构：使用标签定义插槽，用于接收页面传递的内容。
6. 在组件的.js文件中定义组件的逻辑：使用this.data和this.setData()方法管理组件的数据，使用this.triggerEvent()方法触发组件的自定义事件。

26.微信小程序自定义组件父传子子传父？

• 父组件向子组件传递数据：在父组件的.wxml文件中使用<子组件名 属性名=“{{数据}}”></子组件名>的方式向子组件传递数据，在子组件的.js文件中使用this.properties.属性名获取父组件传递的数据。

• 子组件向父组件传递数据：在子组件的.js文件中使用this.triggerEvent(‘事件名’, {数据})方法触发自定义事件，并在父组件的.wxml文件中使用<子组件名 bind:事件名=“回调函数”></子组件名>的方式监听自定义事件，在父组件的.js文件中使用event.detail获取子组件传递的数据。

27.微信小程序自定义组件生命周期有哪些？

• created：组件实例化时触发，可以在该阶段进行组件的初始化操作。
• attached：组件被添加到页面中时触发，可以在该阶段进行组件的渲染操作。
• ready：组件渲染完成时触发，可以在该阶段进行组件的交互操作。
• moved：组件被移动到另一个节点时触发。
• detached：组件被从页面中移除时触发，可以在该阶段进行组件的清理操作。

28.微信小程序授权登录流程？

1. 在小程序中调用wx.login()方法获取用户的临时登录凭证code。
2. 将code发送到开发者服务器，使用code和开发者的AppID和AppSecret调用微信的接口，获取用户的openid和session_key。
3. 将openid和session_key保存到开发者服务器中，用于后续的业务逻辑。
4. 在小程序中调用wx.getUserInfo()方法获取用户的基本信息，包括昵称、头像等。
5. 如果用户未授权，需要调用wx.authorize()方法获取用户授权。
6. 将用户的基本信息和openid发送到开发者服务器，用于后续的业务逻辑。

29.web-view

1. 在小程序的.wxml文件中使用的方式引入网页，其中url是网页的地址。
2. 在小程序的.js文件中定义url变量，用于存储网页的地址。
3. 在小程序的.wxml文件中使用的方式定义一个输入框，用于输入网页的地址。
4. 在小程序的.js文件中定义onInput()方法，用于获取输入框中的内容，并将其赋值给url变量。
5. 在小程序的.js文件中使用this.setData()方法更新页面的数据，将url变量的值传递给web-view组件的src属性。