Web前端面试题分享—微信小程序篇

随便打开一个招聘网站，你会发现市场对于小程序的需求还是蛮高的，有些公司可能就只需要写小程序的前端人员。故此，有了这样一篇小程序面试题的总结。

整理了关于小程序面试常问的一些面试题，分享给大家。

![](http://5coder.cn/img/1668657080_f23810e5f8d650ccc0e61cd6761e0c32.jpg)

## **1、简单谈谈微信小程序**

**在结构和样式方面**，小程序提供了一些常用的标签与控件，比如：

`view`，小程序主要的布局元素，类似于`html`标签的`div`，你也完全可以像控制`div`那样去控制`view`。

`scroll-view`，你要滚动内容的话，没必要用`view`去做`overflow`，`scroll-view`提供了更为强大的功能，通过参数的调整，你可以控制滚动方向，触发的事件等等。

配置文件`app.json`平级的还有一个`app.js`文件，是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，在每个`page`目录里的`js`做当前页面的业务操作。但是小程序的页面的脚本逻辑是在`JsCore`中运行，`JsCore`是一个没有窗口对象的环境，所以不能在脚本中使用`window`，也无法在脚本中操作组件，所以我们常用的`zepto/jquery` 等类库也是无法使用的。

另一个`app.wxss`文件，这个是全局的样式，所有的页面都会调用到，每个项目目录下面的`wxss`是局部样式文件，不会和其他目录产生污染，可以放心使用样式名。

他提供的`WXSS(WeiXin Style Sheets)`是一套样式语言，具有 `CSS` 大部分特性，可以看作一套简化版的`css`。

同时为了更适合开发微信小程序，还对 `CSS` 进行了扩充以及修改，直接帮我们把适配的一部分工作都做了，比如他的`rpx`（responsive pixel），可以根据屏幕宽度进行自适应，规定屏幕宽为`750rpx`。如在 iPhone6 上，屏幕宽度为`375px`，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

在调用微信生态系统功能时，微信小程序提供了相应的api，比如你要修改一个头像，可以使用`wx.chooseImage`等 。

## **2、小程序的原生组件有哪些？**

以微信小程序为例，可以分成容器组件、基础组件、表单组件、媒体组件、开放能力组件等。

## **3、小程序的安卓版和ios版是怎么开发出来？**

小程序开发基于`html、css、javascript`，与`web`开发一样具有跨平台特性，一次开发即可在安卓和`iOS`等平台访问。但与普通`web`开发不同，小程序运行环境并不是浏览器，而是依附于各自的软件`App`。如微信小程序必须在微信中访问，支付宝小程序必须在支付宝中访问等，小程序的开发流程也有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目、开发、调试、上线发布等过程方可完成。

## **4、uni-app弹窗被覆盖怎么解决？**

如果弹窗被别的内容覆盖，且设置很大的`z-index`也无法解决，这种情况多半是被一些如`map`、`video`、`textarea`、`canvas`等原生组件遮盖，因为原生组件层级高于前端组件，我们可以使用`cover-view`组件解决。

## **5、小程序生命周期**

`onReady` 生命周期函数--监听页面初次渲染完成

`onShow` 生命周期函数--监听页面显示

`onHide` 生命周期函数--监听页面隐藏

`onUnload` 生命周期函数--监听页面卸载

`onPullDownRefresh` 页面相关事件处理函数--监听用户下拉动作

`onReachBottom` 页面上拉触底事件的处理函数

`onShareAppMessage` 用户点击右上角转发

`onPageScroll` 页面滚动触发事件的处理函数

`onTabItemTap` 当前是 tab 页时，点击 tab 时触发

## **6、小程序路由跳转**

（1）通过组件`navigator`跳转，设置`url`属性指定跳转的路径，设置`open-type`属性指定跳转的类型（可选），`open-type`的属性有 `redirect`, `switchTab`, `navigateBack`

![](http://5coder.cn/img/1668657109_a9c14b5ff9926f53d78ddd525e3b7463.jpg)

（2）通过`api`跳转，`wx.navigateTo()` , `wx.navigateBack()`, `wx.redirectTo()` , `wx.switchTab()`, `wx.reLanch()`

![](http://5coder.cn/img/1668657119_a9c14b5ff9926f53d78ddd525e3b7463.jpg)

## **7、小程序的兼容问题有哪些？**

遇到的如下：

- 1，`ios`下的`zIndex`层级问题，主要发生在iphone7和iphoneX下 绝对定位必须有一个共同的父元素。
- 2，左右边框不生效 当边框的宽度设置为奇数的时候，可能会不生效 解决方法：将宽度设置为偶数的时候，在ios下就可以解决
- 3，还有尽量不要用`margin-bottom` ，当元素是在整个页面的最底部的时候，在ios下可能`margin-bottom`会失效，所以建议，都使用`padding-bottom`

**new Date跨平台兼容性问题**

在Andriod使用`new Date`(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。

因为IOS下面不能识别这种格式，需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。

`var iosDate= date.replace(/-/g, '/');`

**wx.getUserInfo()接口更改问题**

微信小程序最近被吐槽最多的一个更改，就是用户使用`wx.getUserInfo`（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。

## **8、小程序框架都掌握哪一些？uniapp都会哪一些**？**平时开发遇到的困难**？

- `Taro`
- `uni-app`
- `WeUI`
- `mpvue`
- `iView Weapp`

开发`uni-app`遇到的坑

- **上传图片**

小程序时必须要写`header:{“Content-Type”: “multipart/form-data”}`, h5是必须省略

- **uni-app h5 端的ios图片不能加载问题**

uni-app h5端 ios只能加载https的图片

- **uni-app 使用deep 穿透微信小程序生效 h5无作用**

需要在methods同级下加一个 ：

`options: { styleIsolation: ‘shared’ },`

- **uni-app post请求如何传递数组 参数**

在开发中我们接口上传图片是post请求 无法传递一个数组 解决方法如下

我们可以把数据转换成字符串 然后拼接到请求地址后后面

拼接字符串格式：`image[]=arr[0]&image[]=arr[1]`

```js
imgURlClick(imgArr){ 
    return '?images[]='+imgArr.join('&images[]=') 
} 
```

## 9、**小程序怎么获取手机号？**

准备一个button组件, 将 `button`组件 `open-type`的值设置为 `getPhoneNumber`，当用户点击并同意之后，可以通过 `bindgetphonenumber`事件回调获取到动态令牌`code`;

```html
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> 
Page({ 
  getPhoneNumber (e) { 
    console.log(e.detail.code) 
  } 
}) 
```

接着把`code`传到开发者后台，并在开发者后台调用微信后台提供的

`phonenumber.getPhoneNumber`接口，消费`code`来换取用户手机号。每个`code`

有效期为5分钟，且只能消费一次。

```js
getPhoneNumber: function (e) { 
    var that = this; 
    console.log(e.detail.errMsg == "getPhoneNumber:ok"); 
    if (e.detail.errMsg == "getPhoneNumber:ok") { 
      wx.request({ 
        url: 'http://localhost/index/users/decodePhone', 
        data: { 
          encryptedData: e.detail.encryptedData, 
          iv: e.detail.iv, 
          sessionKey: that.data.session_key, 
          uid: "", 
        }, 
        method: "post", 
        success: function (res) { 
          console.log(res); 
        } 
      }) 
    } 
 } 
```

注：`getPhoneNumber` 返回的 `code` 与 `wx.login` 返回的 `code` 作用是不一样的，不能混用.

注：从基础库 2.21.2 开始，对获取手机号的接口进行了安全升级, 需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。另外，新版本接口**不再**需要提前调用`wx.login`进行登录。

## 10、**小程序的登录流程**

登陆流程:

![](http://5coder.cn/img/1668657198_bad7151808f38db7f5db3514e31fadec.jpg)

**首次登录**

- - 调用小程序api接口 `wx.login()` 获取 临时登录凭证`code` ，这个`code`是有过期时间的.
  - 将这个`code`回传到开发者服务器（就是请求开发者服务器的登录接口，通过凭证进而换取用户登录态信息，包括用户的唯一标识（`openid`）及本次登录的会话密钥（`session_key`）等）
  - 拿到开发者服务器传回来的会话密钥（`session_key`）之后，前端需要保存起来.

```js
wx.setStorageSync('sessionKey', 'value') 
```

**再次登录的时候，就要判断存储的session_key是否过期了**

- - 获取缓存中的`session_key`，`wx.getStorageSync('sessionKey')`
  - 如果缓存中存在`session_key`，那么调用小程序`api`接口`wx.checkSession()`来判断登录态是否过期，回调成功说明当前 `session_key` 未过期，回调失败说明 `session_key` 已过期。登录态过期后前端需要再调用 `wx.login()`获取新的用户的`code`，然后再向开发者服务器发起登录请求.
  - 一般在项目开发，开发者服务器也会对用户的登录态做过期限制，所以这时在判断完微信服务器中登录态如果没有过期之后还要判断开发者服务器的登录态是否过期。（请求开发者服务器给定的接口进行请求判断就好）

参考官网: [小程序登陆流程](https://link.zhihu.com/?target=https%3A//developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html) [登陆态过期检测](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.checkSession.html)

## 11、**小程序如果版本更新了怎么通知用户？**

当小程序发布新的版本后，用户如果之前访问过该小程序，通过已打开的小程序进入（未手动删除），则会弹出提示，提醒用户更新新的版本。用户点击确定就可以自动重启更新，点击取消则关闭弹窗，不再更新.

**核心步骤:**

- 打开小程序, 检查小程序是否有新版本发布

```js
updateManager.onCheckForUpdate(function (res) {}) 
```

小程序有新版本，则静默下载新版本，做好更新准备

```js
updateManager.onUpdateReady(function () {}) 
```

新的版本已经下载好，调用 `applyUpdate`应用新版本并重启小程序

```js
updateManager.applyUpdate() 
```

- **更新版本的模拟测试**

微信开发者工具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试.

点击编译模式设置下拉列表，然后点击“添加编译模式”，在自定义编译条件弹窗界面，点击下次编译时模拟更新，然后点击确定，重新编译就可以了.

注: 需要注意的是，这种方式模拟更新一次之后就失效了，后边再测试仍需要对这种编译模式进行重新设置才可以.

- **核心代码如下**:

```js
App({ 
  onLaunch: function(options) { 
    this.autoUpdate() 
  }, 
  autoUpdate:function(){ 
    var self=this 
    // 获取小程序更新机制兼容 
    if (wx.canIUse('getUpdateManager')) { 
      const updateManager = wx.getUpdateManager() 
      //1. 检查小程序是否有新版本发布 
      updateManager.onCheckForUpdate(function (res) { 
        // 请求完新版本信息的回调 
        if (res.hasUpdate) { 
          //2. 小程序有新版本，则静默下载新版本，做好更新准备 
          updateManager.onUpdateReady(function () { 
            wx.showModal({ 
              title: '更新提示', 
              content: '新版本已经准备好，是否重启应用？', 
              success: function (res) { 
                if (res.confirm) { 
                  //3. 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 
                  updateManager.applyUpdate() 
                } else if (res.cancel) { 
                  //不应用 
                } 
              } 
            }) 
          }) 
          updateManager.onUpdateFailed(function () { 
            // 新的版本下载失败 
            wx.showModal({ 
              title: '已经有新版本了哟~', 
              content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~', 
            }) 
          }) 
        } 
      }) 
    } else { 
      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 
      wx.showModal({ 
        title: '提示', 
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' 
      }) 
    } 
  } 
}) 
```

## 12、**小程序嵌入H5页面怎么做？**

**解决方式 ：web-view**

webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

**具体实现步骤:**

- - 登陆小程序管理后台, 配置服务器域名(  h5页面所在的域名 )

- 在小程序里面嵌入h5

- - 在小程序里面定义一个你想要的H5入口

```html
<navigator url="/page/navigate/navigate" hover-class="navigator-hover">跳转到新页面</navigator> 
```

- 新建一个页面，放置 webview , src指向h5网页的链接.

```html
<web-view src="{{url}}" bindmessage="getMessage"></web-view> </block> 
```

注: 实际开发中在h5页面中有可能需要向小程序发送消息, 实现h5页面和小程序页面的通信

需要使用postMessage向小程序发送消息, 在h5中postMessage 注意，**key必须叫做data**,否则取不到。

## 13、**小程序的生命周期函数有哪些？分别有什么作用？**

小程序的生命周期函数大体分为三类:

- **小程序应用的生命周期**

| 属性     | 说明                             |
| -------- | -------------------------------- |
| onLaunch | 监听小程序初始化, 全局只触发一次 |
| onShow   | 监听小程序启动或切前台。         |
| onHide   | 监听小程序切后台。               |

参考官网: [应用的生命周期](https://link.zhihu.com/?target=https%3A//developers.weixin.qq.com/miniprogram/dev/reference/api/App.html)

- **小程序页面的生命周期**

| 属性     | 说明                                                 |
| -------- | ---------------------------------------------------- |
| onLoad   | 监听页面加载, 获取其他页面传过来的参数, 发起网络请求 |
| onShow   | 监听页面显示                                         |
| onReady  | 监听页面初次渲染完成                                 |
| onHide   | 监听页面隐藏                                         |
| onUnload | 监听页面卸载                                         |

参考官网: [页面的生命周期](https://link.zhihu.com/?target=https%3A//developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html)

- **小程序组件的生命周期**

| 定义段   | 描述                                                   |
| -------- | ------------------------------------------------------ |
| created  | 在组件实例刚刚被创建时执行，注意此时不能调用 setData ) |
| attached | 在组件实例进入页面节点树时执行)                        |
| ready    | 在组件布局完成后执行)                                  |
| moved    | 在组件实例被移动到节点树另一个位置时执行)              |
| detached | 在组件实例被从页面节点树移除时执行)                    |

以上就是关于微信小程序的一些面试题，希望能帮到正在找工作的一些小伙伴。后续还有更多前端或小程序的面试题也会持续更新上来的。