微信小程序面试题【1-4】

1.请谈谈wxml与标准的html的异同？

wxml的介绍：

WXML提供两种文件引用方式import和include。

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

• 数据绑定：

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

• 列表渲染 ：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

• 条件渲染：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

• 模板：

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

wxml与标准的html的异同

1、标签名字有点不一样
2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
3、开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
4、组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
5、没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。

相同：

• 都是用来描述页面的结构；
• 都由标签、属性等构成；

不同：

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

2.请谈谈WXSS和CSS的异同？

什么是WXSS？

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位

  rpx（responsive pixel）：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx；如在Iphone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。

  

  建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

  注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

• 样式导入

  使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

  /** common.wxss **/
  .small-p {
    padding:5px;
  }
  
  /** app.wxss **/
  @import "common.wxss";
  .middle-p {
    padding:15px;
  }
  

内联样式：

框架组件上支持使用style、class属性来控制组件的样式。

• style：静态的样式统一写到class中，style接受动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。

  <view style="color:{{color}};" />
  

• class:用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

  <view class="normal_view" />
  

选择器：

全局样式与局部样式：

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

---

WXSS和CSS的相同之处

• 对选择器的支持
• 提供内联样式
• 语法简单
• 编写难度小

WXSS和CSS的不同之处

• wxss尺寸单位rpx的引入，来提升不同屏幕的适配体验。
• wxss以为大量使用原生组件的缘故，在选择器的支持上进行了阉割。
• wxss为用户提供了全局样式，让开发者可以以更简单的方式进行全局样式的定义。
• wxss在运行前会进行一次优化，提升wxss的渲染效果

3. 请谈谈微信小程序主要目录和文件的作用？

主体部分三个文件：

• app.js 小程序逻辑文件，主要用来注册小程序全局实例，编译时会和其他页面的逻辑文件打包成一个JavaScript文件，项目中不可缺少。

• app.json 小程序公共设置文件，配置小程序全局设置，项目中不可缺少。

• app.wxss 小程序主样式表文件，类似于HTML的css文件，主样式表文件中设置的样式，在其他页面文件中同样有效，该文件不是必需的。

小程序的4个页面文件：

• .js文件 页面逻辑文件，在该文件中编写javascript代码以控制页面逻辑，其在页面中不可缺少。
• .wxml文件 页面的结构文件，用来设计页面的布局、数据绑定等，相当于HTML页面中扩展名为html文件，其在页面中不可缺少。
• .wxss文件 页面样式表文件，用来定义页面中用到的各类样式表。若.wxml文件内联样式及app.wxss文件内的样式表定义同本页面的样式表定义相同时，内联样式优先于.wxss文件样式，.wxss文件样式优先于app.wxss文件样式，该文件不是必需的。
• .json文件 页面配置文件，其在页面中不可缺少。

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

微信小程序项目结构主要有四个文件类型：wxml；wxss；json；js

• .WXML：是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
  内部主要是微信自己定义的一套组件

• .WXSS：(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
  但是他跟css有一定的区别，例如单位、css使用px、wxss使用rpx

• .js：逻辑处理，网络请求。

• .json：小程序设置，如页面注册，页面标题及tabBar