面试题 - 前端 - 微信小程序

发表于 更新于 分类于 阅读次数：

简述微信小程序原理

微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现 小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

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

  • WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件
  • WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
  • js 逻辑处理，网络请求
  • json 小程序设置，如页面注册，页面标题及tabBar

主要文件

  • app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题
  • app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量
  • app.wxss 可选

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

1、小程序直接修改 this.data 的属性是不可以同步到视图的，必须调用：

1
2
3
this.setData({
  // 这里设置
});

2、在 vue 中,只需要再表单元素上加上 v-model,然后再绑定 data 中对应的一个值，当表单元素内容发生变化时，data 中对应的值也会相应改变，这是 vue 非常 nice 的一点。 但是在小程序中，却没有这个功能。那怎么办呢？当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 this.setData({key:value})来将表单上的值赋值给 data 中的对应值。下面是代码，可以感受一下:

1
2
3
4
5
6
7
8
9
10
11
<input bindinput="bindReason" placeholder="填写理由" class="reason" value="{{reason}}" name="reason" />;
Page({
  data: {
    reason: '',
  },
  bindReason(e) {
    this.setData({
      reason: e.detail.value,
    });
  },
});

当页面表单元素很多的时候，更改值就是一件体力活了。和小程序一比较，vue 的 v-model 简直爽的不要不要的。

3、取值

  • vue 中，通过 this.reason 取值

  • 小程序中，通过 this.data.reason 取值

如何自定义小程序的 navigationBar

  • 思路

    隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面

参考这里

说说小程序中 wx:if 和 hidden 的区别

相同点：

wx:if 与 hidden 都用来控制小程序元素的显示

不同点

wx:if：

  • 1、条件为 true 时显示
  • 2、当元素显示时渲染
  • 3、元素变为不显示时销毁元素

hidden：

  • 1、条件为 false 时显示
  • 2、当元素显示时渲染
  • 3、元素变为不显示时保留元素
  • 4、相当于使用了 dispaly

总结： 1、当元素频繁切换是否显示时使用 hidden ，因为 wx:if 会频繁地销毁渲染元素 2、当元素不频繁切换是否显示时使用 wx:if，因为 wx:if 会避免页面加载时渲染过多，导致页面加载缓慢

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

WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改

  • 尺寸单位 rpx

rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

  • 使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束
1
2
3
4
5
6
/** index.wxss **/
@import './base.wxss';

.container {
  color: red;
}

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

  • 使用全局变量实现数据传递

在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面

1
2
3
4
5
6
7
8
// app.js

App({
  // 全局变量
  globalData: {
    userInfo: null,
  },
});

使用的时候，直接使用 getApp() 拿到存储的信息

  • 使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})


// pageB.js
...
Page({
  onLoad: function(option){//option里面可以拿到路由参数
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

需要注意的问题：

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面

onLoad 只执行一次

  • 使用本地缓存 Storage 相关

小程序的生命周期函数

  • onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数,建议在此调接口
  • onShow() 页面显示/切入前台时触发，不建议在此调接口
  • onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
  • onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
  • onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

详见 生命周期回调函数

哪些方法可以用来提高微信小程序的应用速度

1、提高页面加载速度

2、用户行为预测

3、减少默认 data 的大小

4、组件化方案

微信小程序的优劣势

优势

  • 即用即走，不用安装，省流量，省安装时间，不占用桌面
  • 依托微信流量，天生推广传播优势
  • 开发成本比 App 低

缺点

  • 用户留存，即用即走是优势，也存在一些问题
  • 入口相对传统 App 要深很多
  • 限制较多,页面大小不能超过 2M。不能打开超过 10 个层级的页面

怎么解决小程序的异步请求问题

小程序支持大部分 ES6 语法

  • 在返回成功的回调里面处理逻辑
  • Promise 异步

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

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的

如何实现下拉刷新

  • 首先在全局 config 中的 window 配置 enablePullDownRefresh
  • 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法
  • 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新

参考 这里

bindtap 和 catchtap 的区别是什么

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是 bindtap 是不会阻止冒泡事件的，catchtap 是阻止冒泡的

简述微信支付的业务流程

  • 步骤 1：用户在商户 APP 中选择商品，提交订单，选择微信支付。

  • 步骤 2：商户后台收到用户支付单，调用微信支付统一下单接口。参见统一下单 API。

  • 步骤 3：统一下单接口返回正常的 prepay_id，再按签名规范重新生成签名后，将数据传输给 APP。参与签名的字段名为appid，partnerid，prepayid，noncestr，timestamp，package。注意：package 的值格式为Sign=WXPay

  • 步骤 4：商户 APP 调起微信支付。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    wx.requestPayment({
      timeStamp: '',
      nonceStr: '',
      package: '',
      signType: 'MD5',
      paySign: '',
      success(res) {},
      fail(res) {},
    });

  • 步骤 5：商户后台接收支付通知。api参见支付结果通知 API

  • 步骤 6：商户后台查询支付结果。，api参见查询订单 API（查单实现可参考：支付回调和查单实现指引） 详情参考这里

什么是小程序自定义组件样式隔离,他有哪几种隔离模式？

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

  • app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
  • 指定特殊的样式隔离选项 styleIsolation 。
1
2
3
4
5
Component({
  options: {
    styleIsolation: 'isolated',
  },
});

在开发者工具中预览效果

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：

  • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
  • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
  • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

在小程序中又哪些方法让图片宽高比例保持不变？

使用 mode：widthFix

widthFix：宽度不变，高度自动变化，保持原图宽高比不变。 首先我们先设置 image 的 mode 为widthFix，然后给图片加一个固定rpx的宽度，比如：730rpx。 这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位

小程序组件传参(父子，子父)

  • 父传子

    自定义属性，属性的值来自声明式变量 子组件通过 props 接收

  • 子传父

    自定义事件，父组件通过事件接收子组件传过来的值 自定义封装组件的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<component-tag-name inner-text="Some text"></component-tag-name>
Component({
  properties: {
    // 这里定义了 innerText 属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})



<component-tag-name bind:myevent="onMyEvent" />
Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

小程序组件生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function () {
    // 在组件实例进入页面节点树时执行
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
});

小程序页面生命周期

  • 1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。
  • 2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。
  • 3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
  • 4、当小程序后台运行或跳转到其他页面时，触发onHide方法。
  • 5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
  • 6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

小程序怎么样实现路由传参

  • wx.navigateTo
1
2
3
4
wx.navigateTo({
  url: '../placeIntroduce/placeIntroduce?placeId=2',//在路径后面拼接
})
  另外一个页面通过onload(options)这个生命周期获取到placeId
  • wx.redirectTo
1
2
3
wx.redirectTo （非 tabBar 的页面的路径，不能返回来，不限层）
  wx.redirectTo ({
  url: '../placeIntroduce/placeIntroduce?placeId=2',//在路径后面拼接

小程序中的路由跳转 switchTab navigateTo redirectTo 的区别

  • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
  • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  • wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面
  • wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
  • wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

小程序 tabbar 实现原理

要实现 tabbar 的导航条其实很简单，我们要实现全局的 tabbar 只需要在 app.json 文件中定义即可，局部的就在局部的 tabbar 文件中实现。

来看看 app.json 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
export default {
  pages: [
    'pages/index/index',
    'pages/search/search',
    'pages/news/news',
    'pages/attention/attention',
    'pages/collect/collect',
    'pages/comment/comment',
    'pages/my/my',
    'pages/detail/detail',
    'pages/chat/chat',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '小红书',
    navigationBarTextStyle: 'black',
    enablePullDownRefresh: true,
  },
  tabBar: {
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
        iconPath: 'assets/tabbar/1.png',
        selectedIconPath: 'assets/tabbar/2.png',
      },
      {
        pagePath: 'pages/news/news',
        text: '消息',
        iconPath: 'assets/tabbar/news1.png',
        selectedIconPath: 'assets/tabbar/news2.png',
      },
      {
        pagePath: 'pages/my/my',
        text: '我的',
        iconPath: 'assets/tabbar/3.png',
        selectedIconPath: 'assets/tabbar/4.png',
      },
    ],
  },
  permission: {
    'scope.userLocation': {
      desc: '为了更好的为你服务，请允许访问你的地址',
    },
  },
};

参考这里

小程序性能为什么那么好，为什么能做到即用即走的效果

  • 因为是轻量级的，代码包体积限制在 2M 以内，如果超过 2M 还可以进行分包，提高性能优化
  • 运行在微信端,很多功能只需要使用 API 来实现，就可以实现跟 APP 的一样的功能
  • 是基于微信宿主环境的，微信客户端提供双线程去执行 wxml, wxss, js 文件，让小程序可以快速的一下将数据渲染出来呈现在用户的面前