vue面试题（day06）

---

前言

请谈谈WXML与标准的html的异同？

WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中HTML。

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

请谈谈WXSS和CSS的异同？

首先新增了 rpx尺寸单位
CSS中需要手动进行像素单位换算，例如rem
WXSS支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
项目根目录中的app.wxss会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效
WXSS仅支持部分CSS选择器.类选择器和id选择器元素选择器并集选择器、后代选择器::after和::before等伪类选择

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

project.config.json： 项目配置文件，用得最多的就是配置是否开启https校验；
App.js ：设置一些全局的基础数据等，页面的脚本文件，存放页面的数据、事件处理函数等；
App.json ：当前页面的配置文件，配置窗口的外观 、表现等，页面中的配置项会覆盖 app.json的；
App.wxss ：公共样式，引入iconfont等；
pages： 里面包含一个个具体的页面；
index.json： (配置当前页面标题和引入组件等)；
index.wxml：页面的模板结构文件；
.wxss文件：当前页面的样式表文件；
index.js ：(页面的逻辑，请求和数据处理等)；

请谈谈小程序的双向绑定和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方法进行设置。

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

1.WXML(weixin Markup Language) 是框架设计的一套标签语言，结合基础组件，事件系统，可以构建出页面的结构。内容主要事微信自己定义的一套组件。

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

3.JS 逻辑处理，网络请求

4.json 小程序设置，静态配置

主要文件

app.json 必须要有这个文件，此文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置tabBar 最少两个。

4个配置项的作用
pages：用来记录当前小程序所有页面的路径
window ：全局定义小程序所有页面 的背景色、文件颜色等
style：全局定义小程序组件所使用的样式版本
sitemapLocation：用来指明sitemap.json的位置

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

• 使用全局变量传递数据

   利用app.js 中的 globalData 将数据存储为全局变量，在需要使用的页面通过getApp().globalData获取数据例如：	App({globalData:{data: { name: 'demo' }}})使用组件  app.globalData.data
  

• 使用本地存储数据传递

   使用小程序提供缓存：同步缓存：wx.setStorageSync 与 wx.getStorageSync 异步缓存：wx.setStorage 与 wx.getStorage移除本地缓存：wx.removeStorageSync（同步）、wx.removeStorage（异步）// 将数据存储在本地缓存中指定的 key 中例如：wx.setStorgaeSync('data','hello')// 从本地缓存中同步获取指定 key 的内容wx.getStorageSync('data')// 从本地缓存中移除指定 keywx.removeStorgae('data')
  

• 使用路由传递数据

   详细解释：如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。传递组件wx.navigateTo({url: 'test?id=1',success: (res)=> {// 通过 eventChannel 向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })}})
  

bindtap和catchtap的区别？

概念： bindtap和catchtap都属于点击事件函数，将事件绑定到组件上，点击组件后可以触发函数。

• bindtap ：子元素使用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父元素上绑定的bingtap事件）

• catchtap ：不会冒泡到父元素上，阻止事件冒泡
  二者区别：

   bindtap : 向上冒泡catchtap：向上不冒泡
  

wxml:

 <view><button bindtap="tagName">点击事件</button></view>

.js 页面写入

tagName: function(e){console.log(e);
}

wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

常见的微信小程序页面跳转方式有如下：

• wx.navigateTo(Object)

   对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用
  

• wx.redirectTo(Object)

   wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间
  

  wx.switchTab(Object)

   跳转到 tabBar页面，并关闭其他所有非 tabBar 页面
  

  wx.navigateBack(Object)

   wx.navigateBack() 用于关闭当前页面，并返回上一页面或多级页面，开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层则设置对象的delta属性即可
  

  wx.reLaunch(Object)

   关闭所有页面，打开到应用内的某个页面，返回的时候跳到首页
  

总结
关于上述五种跳转方式，做下总结：

navigateTo 保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页

redirectTo 关闭当前页面，跳转到应用内的某个页面

switchTab 跳转到 tabBar 页面，同时关闭其他非 tabBar 页面

navigateBack 返回上一页面

reLanch 关闭所有页面，打开到应用内的某个页面

其中关于它们的页面栈的关系如下：

avigateTo 新页面入栈

redirectTo 当前页面出栈，新页面入栈

navigateBack 页面不断出栈，直到目标返回页，新页面入栈

switchTab 页面全部出栈，只留下新的 Tab 页面

reLanch 页面全部出栈，只留下新的页面

微信小程序与H5的区别？

从开发的角度

H5和小程序的开发工具就非常不同，小程序都是依赖于微信客户端的，所以相对来说开发工具没有H5那么多；
与标准的H5语言是不一样的；而且还独立了很多的原生app的组件，所以它在组件封装上与H5也都是有所不同

从运行环境来看

​网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要
面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者
工具，小程序中三大运行环境也是有所区别的。

服务器配置：

因为小程序的性能会比H5 高一些，所以服务器的配置要求上来说，小程序的要求要比H5更高一些

系统权限

因为微信能获取到更多的系统权限，如网络通信状态、数据缓存能力等，这些系统级权限都能与微信小程序无缝衔接，
这也就是官方宣称的微信小程序能够拥有Native App（原生APP）的流畅性能。而H5 web应用对系统本身的权限的获取则相对少了很多，这一点恰巧是H5 web应用经常被诟病的地方。也因此，
H5的大多数应用被圈定在业务逻辑简单、功能单一的范围上。

标签名字有点不一样

写 HTML 的时候，经常会用到的标签是 div, p, span，
小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力。小程序多了
一些 wx:if 这样的属性以及 {{ }} 这样的表达式
在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化
响应用户的行为。

操作方面来说：
网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而
缺少相关的DOM API和BOM API。
这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。
同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的

小程序和Vue写法的区别？

事件定义区别

vue事件绑定：vue用@来绑定事件<button @click="dl">登陆</button><input type="text" @input="input"/>微信小程序绑定：微信小程序原声写法前面加bind后面加事件名<button bindtap="dl">登陆</button><input type="text" bindinput="input"/>

事件函数传值

vue事件函数传值：vue传值直接写在函数括号中<button @click="dl(index)">登陆</button>微信小程序事件函数传值：微信小程序传值需要用data-自定义名字={{需要传递的值}}<button bindtap="dl" data-index="{{index}}">登陆</button>

if语句

vue的if语句：if语句前加 “v-”<div v-if="index == 1">1<div><div v-else-if="index == 2">2<div><div v-else>3<div>
微信小程序if语句：微信小程序if语句前加 “wx:”，而且判断内容需要用 {{双大括号}} 包起来，第二行的else-if，直接省略成elif<view wx:if="{{index == 1}}">1<view><view wx:elif="{{index == 2}}">2<view><view wx:else>3<view>

关键字引用

vue的关键字引用：vue中属性名前面加 “:” 或者 v-bind<img :src="src" />
微信小程序关键字引用：微信小程序中只需要属性值加“{{}}”包起来就行<image src="{{src}}" />

for列表渲染

vue的for列表渲染：vue的for语法=(每一项数据名，索引名) in 数据名<block v-for="(item,i) in list" :key="i"><div>{{item.text}}</div></block >
微信小程序的for列表渲染：微信小程序的for里只写数据名， 如果需要修改当前元素的数据名：wx:data-item=“自定义的数据名” 如果需要修改当前元素的索引名：wx:data-index=“自定义的索引名” 默认数据名是item，默认索引名是index

rpx的理解？

简介：
rpx （ responsive pixel）响应单位。

• rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
• 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
• 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

rpx 和 px之间的换算
在普通网页开发中，最常用的像素单位是px
在小程序开发中，推荐使用rpx这种响应式的像素单位进行开
1 rpx = 0.5 px = 1 物理像素

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

微信小程序不支持document.querySelect获取元素，因为微信小程序的渲染层和逻辑层是独立的，但是它内置了获取元素的两种方法，第一种是通过
wx.createSelectorQuery()获取dom元素，第二种时给想要使用的对象绑定事件，输出e对象，就能拿到该对象的一些信息。

.创建选择器

    var query = wx.createSelectorQuery();

2.查询

   集合：query.selectAll('.traffic').boundingClientRect(()=>{}).exec()单个： query.select('.tripinfotitlelist').boundingClientRect(()=>{}).exec()

二、获取dom节点场景

1.与数据渲染无关（dom节点挂载结束即可获取，根据页面生命周期选择合适的时间获取）

2.与数据相关（数据渲染结束获取即可）

    this.setData({},{setTimeout(()=>{//获取即可},300)})

微信小程序与vue区别？

生命周期不一样，微信小程序生命周期比较简单
数据绑定也不同，微信小程序数据绑定需要使用{{}}，vue 直接:就可以
显示与隐藏元素，vue中，使用 v-if 和 v-show 控制元素的显示和隐藏，小程序中，使用wx-if 和hidden 控制元素的显示和隐藏
事件处理不同，小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event) 绑定事件,vue：使用 v-on:event 绑定事件，或者使用@event 绑定事件
数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是 vue非常 nice 的一点。微信小程序必须获取到表单元素，改变的值，然后再把值赋给一个 data中声明的变量。