微信小程序面试题

1：简单描述下微信小程序的相关文件类型

答：微信小程序的相关文件类型包括：wxml、wxss、js、json、wxs、图片、音频、视频等。其中，wxml文件用于描述小程序的结构，wxss文件用于描述小程序的样式，js文件用于描述小程序的逻辑，json文件用于配置小程序的全局配置，wxs文件用于编写小程序的模块化脚本，图片、音频、视频等文件用于展示小程序的内容。

2：你是怎么封装微信小程序的数据请求的？

答：

// 封装微信小程序的数据请求
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 使用封装的请求方法
request('https://example.com/api', 'GET', {id: 1})
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.error(err)
  })

3：有哪些参数传值的方法？小程序页面间有哪些传递数据的方法？

答：

在小程序中，有以下几种参数传值的方法：

1. URL传参：通过在URL中添加参数来传递数据，如：/pages/index/index?id=123&name=test。
2. Storage传参：通过wx.setStorageSync()或wx.setStorage()方法将数据存储在本地缓存中，然后在另一个页面中通过wx.getStorageSync()或wx.getStorage()方法获取数据。
3. 全局变量传参：通过在app.js中定义全局变量，在不同的页面中可以直接调用该变量。
4. EventChannel传参：通过创建一个事件通道，将数据传递给另一个页面，如：在页面A中创建事件通道，然后在页面B中监听该事件通道，当页面A触发该事件时，页面B就可以获取到传递的数据。

小程序页面间传递数据的方法有：

1. URL传参：通过在URL中添加参数来传递数据，如：/pages/index/index?id=123&name=test。
2. Storage传参：通过wx.setStorageSync()或wx.setStorage()方法将数据存储在本地缓存中，然后在另一个页面中通过wx.getStorageSync()或wx.getStorage()方法获取数据。
3. 全局变量传参：通过在app.js中定义全局变量，在不同的页面中可以直接调用该变量。
4. EventChannel传参：通过创建一个事件通道，将数据传递给另一个页面，如：在页面A中创建事件通道，然后在页面B中监听该事件通道，当页面A触发该事件时，页面B就可以获取到传递的数据。

4：怎么解决小程序的异步请求问题？你是怎么封装微信小程序的数据请求的？

答：

小程序的异步请求问题可以通过以下方法解决：

1. 使用Promise对象进行异步操作，可以使用wx.proimse()方法将wx.request()方法转换为Promise对象，从而可以使用async/await语法进行异步操作。
2. 使用回调函数进行异步操作，可以在wx.request()方法中传入success和fail回调函数，分别处理请求成功和失败的情况。
3. 使用事件监听器进行异步操作，可以使用wx.onSocketOpen()、wx.onSocketMessage()等方法监听WebSocket事件，从而实现异步操作。

// 使用Promise封装wx.request
function request(url, method, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 调用request函数
request('https://example.com/api', 'GET', {id: 1})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

5：小程序的双向绑定和vue哪里不一样？

答：小程序的双向绑定和vue的不同之处在于，小程序的双向绑定需要使用setData()方法来更新数据，而vue则可以直接使用v-model指令来实现双向绑定。此外，小程序的双向绑定只能在组件内部进行，而vue可以在整个应用程序中使用。

// 小程序双向绑定示例
Page({
  data: {
    inputValue: ''
  },
  bindInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  }
})

// Vue双向绑定示例
<template>
  <div>
    <input v-model="inputValue">
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

6：小程序的wxss和css有哪些不一样的地方？

答：

小程序的wxss和css有以下不同之处：

1. 选择器的定义：wxss中只支持部分选择器，如class、id、标签名等，不支持伪类选择器和后代选择器等。
2. 尺寸单位：wxss中支持rpx单位，可以根据屏幕宽度自适应调整大小，而css中只支持px、em、rem等固定单位。
3. 样式导入：wxss中可以通过@import导入外部样式表，而css中只能通过标签引入。
4. 样式覆盖：wxss中可以通过!important关键字强制覆盖样式，而css中只能通过优先级和继承规则来实现样式覆盖。
5. 样式继承：wxss中不支持样式继承，而css中可以通过继承规则实现样式继承。

7：小程序关联微信公众号如何确定用户的唯一性？

答：小程序关联微信公众号可以通过用户的openid来确定用户的唯一性。每个微信用户都有一个唯一的openid，可以通过小程序的API获取到用户的openid，然后将其与公众号的用户信息进行关联，从而确定用户的唯一性。

8：如何实现下拉刷新？

答：

Page({
  onPullDownRefresh() {
    // 下拉刷新时执行的操作
  }
})

9：使用webview直接加载要注意哪些事项？

答：

使用webview直接加载要注意以下事项：

1. 安全性问题：webview直接加载可能存在安全隐患，需要注意防范XSS攻击、CSRF攻击等。
2. 兼容性问题：不同的webview可能存在兼容性问题，需要进行充分测试。
3. 性能问题：webview直接加载可能会影响应用的性能，需要注意优化。
4. 用户体验问题：webview直接加载可能会影响用户体验，需要注意界面设计和交互设计。

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

答：

小程序和Vue写法的区别主要在以下几个方面：

1. 语法不同：小程序使用的是WXML和WXSS，而Vue使用的是HTML和CSS。
2. 数据绑定方式不同：小程序使用的是双向数据绑定，而Vue使用的是单向数据流。
3. 组件化方式不同：小程序的组件化方式是基于模板的，而Vue的组件化方式是基于组件的。
4. 生命周期不同：小程序和Vue的生命周期有所不同，需要开发者注意区别。
5. 调试方式不同：小程序需要使用微信开发者工具进行调试，而Vue可以使用浏览器进行调试。

11：小程序写在标签的属性data值，要注意哪些方面？

答：

在写小程序标签的属性data值时，需要注意以下几个方面：

1. data值必须是字符串类型，不能是其他类型；
2. data值的命名要符合小程序的命名规范，不能使用特殊字符和中文；
3. data值的命名要有意义，方便后期维护和开发；
4. data值的大小不能超过1024KB，否则会导致小程序运行缓慢。

12：简述微信小程序原理？

答：微信小程序是一种轻量级的应用程序，它可以在微信客户端内部运行，不需要下载和安装。小程序的原理是通过微信客户端内置的小程序引擎来解析和运行小程序代码，实现小程序的展示和交互功能。小程序代码采用的是类似于网页开发的技术，主要是HTML、CSS和JavaScript，同时也支持一些特定的API和组件，如微信登录、支付、地图等。小程序的运行环境是在微信客户端内部，因此具有较高的安全性和稳定性，同时也能够充分利用微信社交平台的优势，实现更好的用户体验和推广效果。

13：小程序有哪些参数传值的方法？

答： 小程序有以下几种参数传值的方法：

1. URL传参：通过在跳转链接中添加参数，如：/pages/index/index?id=123，在目标页面中可以通过options.id获取传递的参数。
2. 全局变量：在app.js中定义全局变量，在需要传递参数的页面中可以通过getApp().globalData获取全局变量。
3. 缓存传参：使用wx.setStorageSync()方法将参数存储在本地缓存中，在目标页面中可以通过wx.getStorageSync()方法获取传递的参数。
4. 事件传参：通过triggerEvent()方法触发自定义事件，并在事件中传递参数，如：this.triggerEvent('myevent', {id: 123})，在父组件中可以通过bind:myevent监听事件并获取传递的参数。

14：你使用过哪些方法，来提高微信小程序的应用速度？

答：

1. 使用小程序自带的性能分析工具，对小程序进行性能分析，找出性能瓶颈并进行优化。
2. 减少小程序的请求次数，尽量使用缓存，减少网络请求的时间。
3. 对小程序进行代码压缩，减少代码体积，提高加载速度。
4. 使用小程序提供的组件和API，避免自己写复杂的组件和逻辑，提高小程序的运行效率。
5. 对小程序进行分包加载，将不常用的页面和组件分离出来，减少首次加载时间。

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

答：

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

1. app.js：小程序的入口文件，用于初始化小程序。
2. app.json：小程序的全局配置文件，包括小程序的页面路径、窗口背景色、导航栏样式等。
3. app.wxss：小程序的全局样式文件，定义小程序的公共样式。
4. pages/：小程序的页面目录，包含小程序的所有页面。
5. utils/：小程序的工具目录，包含小程序的所有工具函数。
6. project.config.json：小程序的项目配置文件，包括小程序的appid、编译设置等。

16：请谈谈wxml与标准的html的异同？

答： wxml与标准的html有以下几点异同：

1. wxml是微信小程序的模板语言，而html是网页的标记语言。
2. wxml的标签和属性与html有些不同，例如wxml中使用的是wx:bind而不是html中的onchange。
3. wxml中的样式使用的是wxss，而html中使用的是css。
4. wxml中的数据绑定使用的是{{}}，而html中使用的是{{}}。
5. wxml中的事件绑定使用的是bind，而html中使用的是on。
6. wxml中的组件使用的是自定义组件，而html中使用的是标准的html标签。

17：请谈谈小程序的生命周期函数？

答：

小程序的生命周期函数包括：onLaunch、onShow、onHide、onError、onPageNotFound、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage、onTabItemTap等。其中，

onLaunch是小程序初始化时执行的函数，

onShow是小程序启动或从后台进入前台时执行的函数，

onHide是小程序从前台进入后台时执行的函数，

onError是小程序发生错误时执行的函数，

onPageNotFound是小程序页面不存在时执行的函数，

onUnload是小程序页面卸载时执行的函数，

onPullDownRefresh是下拉刷新时执行的函数，

onReachBottom是上拉触底时执行的函数，

onShareAppMessage是用户点击分享按钮或右上角菜单分享时执行的函数，

onTabItemTap是用户点击tab时执行的函数。

这些生命周期函数可以帮助开发者更好地掌握小程序的运行状态，从而更好地进行开发和调试。

// 小程序生命周期函数
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

Page({
  onLoad: function () {
    console.log('Page Load')
  },
  onReady: function () {
    console.log('Page Ready')
  },
  onShow: function () {
    console.log('Page Show')
  },
  onHide: function () {
    console.log('Page Hide')
  },
  onUnload: function () {
    console.log('Page Unload')
  }
})

18：微信小程序五种路由使用和区别？

答：微信小程序有五种路由：navigateTo、redirectTo、switchTab、reLaunch和navigateBack。其中，navigateTo和redirectTo都是跳转到新页面，navigateTo可以打开非 tabBar 页面，而redirectTo只能打开 tabBar 页面；switchTab是跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；reLaunch是关闭所有页面，打开到应用内的某个页面；navigateBack是返回上一页面或多级页面。

// navigateTo示例
wx.navigateTo({
  url: '/pages/index/index'
})

// redirectTo示例
wx.redirectTo({
  url: '/pages/index/index'
})

// switchTab示例
wx.switchTab({
  url: '/pages/index/index'
})

// reLaunch示例
wx.reLaunch({
  url: '/pages/index/index'
})

// navigateBack示例
wx.navigateBack({
  delta: 1
})