面试题总结二

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

WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。

没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API

WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码

标签名字不一样，且小程序标签更少，单一标签更多；

相同点：

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

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

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。 2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

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

• project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；

• App.js 设置一些全局的基础数据等；

• App.json 底部tab, 标题栏和路由等设置；

• App.wxss 公共样式，引入iconfont等；

• pages 里面包含一个个具体的页面；

• index.json (配置当前页面标题和引入组件等)；

• index.wxml (页面结构)；

• index.wxss (页面样式表)；

• index.js (页面的逻辑，请求和数据处理等)；

52.请谈谈小程序的双向绑定和vue的异同？

小程序中的数据双向绑定
    . 首先通过 bindinput 绑定文本框的输入事件
    . 在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值
    . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值
    . 通过 this.setData 将文本框最新的  value 值 赋值给 动态绑定的value值 content  即可实现数据的双向绑定

vue中的数据双向绑定
    . 首先为文本框绑定 @input 监听文本框的输入事件
    . 为文本框动态绑定 value 属性，其值是在data中定义的变量
    . 在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值
    . 将其重新获取到的 value 赋值给 value值动态绑定的那个变量

区别：
大体上区别不大，绑定事件不同，以及获取value值的具体方式不同，以及在小程序中设置data中的数据，需要调用 this.setData方法进行设置

在vue中进行数据绑定后,当数据修改了会直接更新到视图上，但是在小程序中呢,data数据修改是不会直接同步到,必须调用this.setData()这个方法

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

.wxml

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

.wxss

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

.js

逻辑处理，网络请求。

.json

小程序设置，如页面注册，页面标题及tabBar。

54.微信小程序有哪些传值(传递数据)方法？

第一种：通过navigateTo跳转可以携带数据

例如：wx.navigateTo({ url: '../1111?id=1' })

第二种：通过本地存储的方式来实现使用setStorage，最多缓存10M的数据

例如：wx.setStorage({ key: "key", data: "很多的数据" })

第三种：全局变量在app.js种

const app = getApp()
app.datakey='sks';
 
const app = getApp()
var sks = app.datakey;
console.log(sks)

在需要获取值得地方赋值如：

url:app.globalData.host

55.bindtap和catchtap的区别？

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

　(2) 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。

56.简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),

wx.navigateBack(),wx.reLaunch()的区别？

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

57.微信小程序与H5的区别？

本质上的区别就是：

小程序是基于特定平台APP基础上的一个轻应用，不能脱离其所在的平台单独运行。换而言之，微信小程序只能在微信APP中运行；同理，支付宝小程序也只能在支付宝APP中运行，其他小程序也是一样的道理。本文中的小程序泛指微信小程序。

H5可以简单的将它理解为网页，微信H5是国内营销圈对于手机微网站的一个泛称。除了一些特定情况外，比如添加了微信授权功能，H5是可以在手机和PC浏览器中打开的。

58.小程序和Vue写法的区别？

数据绑定方式不同：

小程序   绑定某个变量值作为元素属性时，用{{ }}不加括号会被认为是字符串。

vue中的话：v-bind指令可以在名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML的一个属性。例如：v-bind:class

生命周期函数不一样：
-微信小程序为onLoad：页面加载，onShow：页面显示，onReady：页面初次渲染完成，onHide：页面隐藏，onUnload：页面卸载。
 Vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。beforecreate、created适合做网络请求、beforemout更新data、mouted、beforeupdate、updated、beforedestory、destroyed。

数据请求时间不一样：
在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在 created或者 mounted中请求数据，而在小程序，会在 onLoad或者 onShow中请求数据。

显示与隐藏元素不一样：
vue中，使用 v-if 和 v-show控制元素的显示和隐藏。小程序中，使用 wx-if和 hidden控制元素的显示和隐藏

59.rpx的理解？

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应

并且rpx是微信小程序独有的、解决屏幕自适应的尺寸单位

通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

60.微信小程序可以进行dom操作吗？

不能

小程序不能使用各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作

原因：在小程序中，渲染层和逻辑层是分开的，分别运行在不同的线程中，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。