小程序篇前端八股文面试题
2026-10-22 14:34:25
- 核心文件类型：微信小程序包含四种核心文件，分别为 .json、.wxss、.js、.wxml。
- app.json：必须存在的全局配置文件，用于页面注册、网络设置、窗口背景色、导航条样式及默认标题配置。若缺失会导致项目无法运行。
- app.js：必须存在的全局逻辑文件，用于监听小程序生命周期函数、声明全局变量。可空置但需保留文件结构。
- app.wxss：全局样式文件，用于配置公共CSS样式。
- 页面级文件：每个页面包含独立的 index.json（页面配置）、index.wxml（页面结构）、index.wxss（页面样式）、index.js（页面逻辑）。
- data- 属性传递*：通过为HTML元素添加 data-* 属性存储需要传递的值。
- 数据获取方式：
通过事件对象 e.currentTarget.dataset 获取。
通过页面跳转时的 onload 参数 param 获取。
- 命名限制：data-* 属性名不能包含大写字母或对象类型数据。
- 图片引入：WXSS需使用外链地址引入图片，不支持本地路径。
- 结构差异：WXSS无 body 标签，样式可直接通过 import 导入。
- 单位扩展：WXSS新增 rpx（响应式像素）单位，适配不同屏幕尺寸。
- 选择器限制：WXSS仅支持部分CSS选择器（如类选择器、ID选择器），不支持复杂选择器。
- union_id 机制：调用 wx.getUserInfo 方法时设置 withCredentials: true，可获取加密数据 encryptedData，其中包含 union_id。
- 后端解密：需通过后端服务对 encryptedData 进行对称解密，以获取唯一用户标识。
- 生命周期：小程序生命周期更简单，Vue生命周期更复杂且支持更多钩子函数。
- 数据绑定：
小程序使用 {{}} 插值表达式，Vue使用 : 或 v-bind。
双向绑定：Vue通过 v-model 实现，小程序需手动获取表单值并赋值给 data。
- 显示/隐藏控制：
Vue使用 v-if（条件渲染）和 v-show（切换显示）。
小程序使用 wx:if（条件渲染）和 hidden（切换显示）。
- 事件绑定：
小程序使用 bindtap 或 catchtap。
Vue使用 v-on:event 或 @event。
- project.config.json：项目配置文件，常用于配置HTTPS校验开关。
- App.js：全局逻辑文件，用于设置基础数据、监听生命周期。
- App.json：全局配置文件，用于设置底部导航栏（tabBar）、页面路由、窗口样式。
- App.wxss：全局样式文件，用于引入公共样式（如iconfont）。
- pages 目录：包含所有页面，每个页面包含：
index.json：页面配置（如标题、组件引入）。
index.wxml：页面结构。
index.wxss：页面样式。
index.js：页面逻辑（如数据请求、事件处理）。
- 相同点：均用于描述页面结构，由标签、属性构成。
- 不同点：
标签差异：WXML标签更少，单一标签更多（如 <view> 替代 <div>）。
表达式支持：WXML支持 wx:if 条件渲染和 {{}} 数据绑定，HTML无此特性。
预览环境：WXML需在微信开发者工具中预览，HTML可在浏览器中预览。
组件封装：WXML对组件重新封装，运行于JS Core，无DOM树和window对象。
- 相同点：均用于描述页面样式。
- 不同点：
单位扩展：WXSS新增 rpx 单位，支持响应式布局。
选择器限制：WXSS仅支持部分CSS选择器（如类选择器、ID选择器）。
样式作用域：WXSS支持全局样式（App.wxss）和局部样式（页面级wxss）。
导入方式：WXSS可直接通过 import 导入其他样式文件。
- 目录结构：
在根目录创建 utils 文件夹。
创建 api.js（请求方法封装）和 apiConfig.js（基础配置）。
- apiConfig.js：
封装 get、post、put、upload 等基础请求方法。
配置请求头（如token）、异常处理逻辑。
- api.js：
引入 apiConfig.js 的请求方法。
根据页面需求设置URL并导出对应方法。
- 页面调用：在具体页面中导入 api.js 并调用封装好的请求方法。
- 全局变量：通过 App.js 声明全局变量，各页面通过 getApp() 访问。
- URL参数：页面跳转时通过URL传递参数（如 wx.navigateTo({url: 'page?id=1'})）。
- 模板参数：使用 template 模板时通过属性传递数据。
- 缓存传递：通过 wx.setStorageSync 和 wx.getStorageSync 存储和读取数据。
- 数据库传递：通过云开发数据库存储和共享数据。
热门标签
