【前端--面试】常见面试题（十六）—— 微信小程序

百年孤独html
236 阅读4分钟

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

今天是31号，更文挑战的最后一天，自己也没想到竟然坚持到了最后，每天都记得的日子有27天，有四天是没有更新，其中第一天没开始，有两天是去医院了，还有一天，意外的想不起来，最后补上了，算是自己给自己一个交代吧；有那么一丢丢的强迫症，必须写够28这个数字，都说21天养成一个习惯，大概率是养成了，希望接下来依然可以坚持下去~~

简述微信小程序原理

  • 解释一：

  1. 微信小程序采用JavaScript、wxml、wxss三种技术进行开发，与现有前端开发的区别：

  2. JavaScript的代码是运行在微信APP中的，因此一些h5技术的应用需要微信APP提供对应的API支持；

  3. wxml微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的；

  4. wxss具有css的大部分特性，但并不是所有都支持没有详细文档（wxss的图片引入需使用外链地址，没有body，样式可直接使用import导入）。

解释二：

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

微信小程序各个文件的作用

  • project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
  • App.js 设置一些全局的基础数据等；
  • App.json 底部tab, 标题栏和路由等设置；
  • App.wxss 公共样式，引入iconfont等；
  • pages 里面包含一个个具体的页面；
  • index.json (配置当前页面标题和引入组件等)；
  • index.wxml (页面结构)；
  • index.wxss (页面样式表)；
  • index.js (页面的逻辑，请求和数据处理等)；

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

  • wxml 模板文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构
  • wxss 样式文件，是一套样式语言，用于描述WXML的组件样式
  • js 脚本逻辑文件，逻辑处理网络请求
  • json 配置文件，小程序设置，如页面注册，页面标题及tabBar
  • app.json 整个小程序的全局配置，包括： pages:所有页面路径； 网络设置（网络超时时间）； 界面表现（页面注册）；window:背景色、导航样式、默认标题；底部tab等。

wxml与标准的html的比较

  • 都是用来描述页面的结构；
  • 都由标签、属性等构成；
  • 标签名字不一样，且小程序标签更少，单一标签更多；
  • 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
  • WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
  • 组件封装不同， WXML对组件进行了重新封装，
  • 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象

WXSS和CSS的比较

  • 都是用来描述页面的样子；
  • WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
  • WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
  • WXSS 仅支持部分 CSS 选择器；
  • WXSS 提供全局样式与局部样式
  • WXSS 不支持window和dom 文档流
avatar
文章
阅读
粉丝