微信小程序面试知识总结

leafnote
45 阅读5分钟

小程序框架系统‌

  • ‌视图层‌：负责页面渲染。由 WXML 与 WXSS 编写，由组件来进行展示。

    • 数据绑定：{{data}}，支持简单运算和三元表达式。
    • 条件渲染:wx:if
    <view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
    • 列表渲染:wx:for
    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

  • ‌逻辑层‌： 也称App Service，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 逻辑层并非运行在浏览器中，如 window，document 等无法使用。

    • setData
      1. 组件的 setData 只会引起当前组件和子组件的更新。
      2. setData 应只传入发生变化的字段
      3. 小程序逻辑层是单线程运行的，后台态页面去 setData 也会抢占前台页面的运行资源

‌文件结构‌：

  • app.json：全局配置（页面路径、窗口样式、网络超时、底部 tab等）。

  • app.js：全局逻辑（生命周期、全局变量）。

  • app.wxss：全局样式（CSS）。

  • 页面或组件：.wxml（结构）、.wxss（样式）、.js（逻辑）、.json（配置）。

    默认情况下，自定义组件的样式配置为"styleIsolation": "isolated",只受当前wxss 的影响。
    而页面默认配置为shared则会收到app.wxss的影响。
    注意：在 app.wxss 或页面的 wxss 中使用标签名选择器（或一些其他特殊选择器）来直接指定样式会影响到页面和全部组件。

‌事件‌：

  • 事件绑定：
    1. bindtap 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
    2. catchtap 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
  • 事件传参：通过 data-* 属性传递参数。（ event.currentTarget.dataset.**）

‌路由跳转‌：

  • wx.navigateTo（保留当前页面）
  • wx.redirectTo（关闭当前页面）
  • wx.switchTab（切换 Tab 页）
  • navigateBack （返回上个页面）
  • reLaunch （用户触发）、autoReLaunch（小程序处于后台时，用户从扫码或分享等场景重新进入小程序）：仅代表一种路由，并不等于小程序重启。所有页面弹出，仅目标页被创建。

 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。

‌生命周期‌：

  • ‌应用生命周期‌：onLaunch、onShow、onHide。
  • ‌页面生命周期‌：onLoad、onShow、onReady、onHide、onUnload。

自定义组件

  1. 文件结构与声明‌

    • json 文件声明：设置 "component": true
    • wxml：编写组件模板（支持 <slot> 插槽占位）
    • wxss：定义组件私有样式（禁用 ID 选择器、标签名选择器）
    • js：通过 Component() 构造器声明组件逻辑

  2. ‌组件注册与使用‌

    • ‌引入组件‌：在页面 json 中配置组件路径

      {
  "usingComponents": {
    "my-component": "/components/my-component"
  }
}

    • ‌页面中使用‌：通过标签 <my-component> 直接嵌入模板

  3. 组件间通信

    • ‌父 → 子传递数据‌ 定义 properties 接收父组件数据
    • ‌子 → 父触发事件‌
      • 子组件调用 this.triggerEvent('事件名', detail) 触发自定义事件
      • 父组件监听事件： 
        <my-component bind:myevent="handleEvent"></my-component>

  4. ‌插槽（Slot） ‌

    • 使用 <slot> 标签接收父组件插入的内容
    • 支持具名插槽：通过 name 属性指定插槽位置

  5. ‌生命周期与页面交互 ‌

    • ‌组件生命周期‌ lifetimes：created、attached、ready、moved、detached
      注意：created中不能setData,请在attached中进行初始化操作

    • ‌组件所在页面的生命周期‌ pageLifetimes：show、hide、resize、routeDone(页面路由动画完成时)
      注意：自定义 tabBar 的 pageLifetime 不会触发

分包

每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

  • 整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
  • 单个分包/主包大小不能超过 2M

登录

  1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。 code 只能使用一次。
  2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

授权

部分接口需要经过用户授权同意才能调用：

  • 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口；
  • 如果用户已授权，可以直接调用接口；
  • 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。
    一旦用户明确同意或拒绝过授权，其授权关系会记录在后台，直到用户主动删除小程序。

支持一下

本人正在找工作，如在长三角有合适岗位，请联系我

热情地欢迎各位兄弟姐妹的大力支持！
github: github.com/leafio?tab=…
期待至少一个项目能达成1000个star
期待至少一个npm能达成每周1000次下载

avatar
文章
阅读
粉丝