最新微信小程序面试题集结

1、微信小程序与H5的区别?

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BuG

第三条是获取系统级权限的不同

系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度

长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立

2、请谈谈小程序的双向绑定和vue的异同?

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法!

1.双向绑定:vue默认支持双向绑定，微信小程序需要借助data。

2.取值:vue 中，通过this.msg取值。小程序中，通过this.data.msg取值。

3.定义方法:小程序使用在app.js 中定义即可，vue的方法通过写在method中进行定义。

遍历的时候:

-小程序wx: for = "{{lists}}"

- Vue是v- for = "item in lists"

调用data模型(赋值)的时候:

-小程序:this.data.item //调用this.setData({item:1})//赋值

- vue: this.item//调用this.item =1//赋值

小程序的双向绑定实际上并不是双向绑定如果在小程序js文件中改变了某个变量的值那么页面上的值并不会跟着改变如果想要页面上的值也跟着改变的话需要通过setData来操作而vue默认就是双向绑定只改变了某个变量的值页面上也会跟着改变

3、简述五个路由的区别？

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

4、bindtap和catchtap的区别?

bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡

5、小程序如何实现下拉刷新?

用view代替scroll-view ,设置onPullDownRefresh函数实现。

1、在json文件中配置enablePullDownRefresh为true( app.json中在window中设置enablePullDownRefresh ,此效果作用于全局)。

2、在js文件中实现onPullDownRefresh方法,在网络请求完成后调用wx.stopPul1DownRefresh()来结束下拉刷新。

6、小程序的生命周期函数

1. onLoad页面加载时触发。一个页面只会调用一次，可以在onLoad 的参数中获取打开当前页面路径中的参数

2. onShow()页面显示/切入前台时触发

3. onReady()页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

4. onHide()页面隐藏/切入后台时触发。如navigateTo或底部|tab切换到其他页面，小程序切入后台等

5. onUnload()页面卸载时触发。如 redirectTo或navigateBack到其他页面时

7、小程序对wx:if和hidden使用的理解?

1. wx :if有更高的切换消耗。

2. hidden有更高的初始渲染消耗。

3.因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

8、你是怎么封装微信小程序的数据请求的?

1、创建一个js 文件文件中声明一个baseUr1(接口地址的公共部分)

2、创建一个api 函数里面可以接收接地址，请求方式，请求参数然后使用

wx.request友起请求并把结果使用promise返回

3、我们通常会在wx.request的请求中配置header和响应拦截，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

app.js必须要有这个文件，没有也是会报错!但是这个文件创建一下就行什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

9、小程序兼容问题(开发中遇到的问题)

1、input、textear层及比较高

要使用cover-view，不能渐变背景，可以使用渐变背景图web-view自动铺满整个小程序页面

2、text-indent 对input标签和text标签失效input可以用placeholder-class 实现

text可以直接打空格

3，左右边框不生效

当边框的宽度设置为奇数的时候，可能会不生效

解决方法:将宽度设置为偶数的时候，在ios下就可以解决

4，还有尽量不要用margin-bottom，当元素是在整个页面的最底部的时候，在ios下可能margin-bottom 会失效，所以建议，都使用padding-bottom 。

10、小程序与原生App哪个好?

小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

小程序也属于App的一种，那么它和我们现在流行的原生App (Ios、Android)相比，有什么区别和优势呢?

一、区别与优势

首先，从技术上来讲，目前App的主流开发方式有三种:web App 、Native App和Hybrid App。比如:

. Wweb App

在微信”发现“s里面有一个”购物“入口，点进去打开的是京东的移动购物页面，这个页面实际上就是一个Web App。支付宝的众多小服务也是web App，这类App其实就是我们经常在PC上浏览的网页，只不过加入了响应式的设计让它适合在移动端显示和运行，所采用的技术依然是Javascript 、css 和HTML。相对于其他两种APP，Web App具有开发简单、高效，更新灵活、跨平台、大量的网页应用稍作调整即可放在移动端运行。但缺点与优点并存，Web App性能、体验极差，无法使用照相机、系统通知、本地缓存等原生特性

- Native App

Native App也称原生App 。这种App不是采用avaScript 、CSS及HTML开发，而是使用Objective-C (IoS)或者Java (Android)开发。微信、支付宝等都属于这类App，是目前主流的开发方式。Native App具有性能、体验非常良好，组件支持完善、接口丰富等特点。但Native App最大的缺点在于，不能跨平台，有多少个平台就要开发多少版本，现在主要有IOS和Android两个主流平台，还好Windows Phone已没了踪影。

·Hybrid App

Hybrid App也称为混合式App 。Hybrid App 看上去像一个Native App，但实质上Native技术在这里只是作为一个容器，将 web App包裹了起来，在容器内部实质运行的还是网页。Hybrid App更像是Web App 与Native App的混合体。与纯粹的web App相比，Hybrid App会有一部分访问原生组件(相机、加速器）的能力。事实上，目前主流的应用中，纯粹的原生的App很少，绝大多数都属于混合式App。比如，常见的京东、淘宝等电商类App，由于商品及业务变化非常频繁，需要经常调整，所以这类App 的主要页面都是采用Web技术来构建，只是用Native包装了一下。Hybrid App具有接近于Native App的体验、开发效率高、跨平台等特性。

那我们如何界定，哪些App属于“原生”，哪些App属于

“混合”呢?这个要看Web页面在App中所占的比例，如果绝大多数页面都采用Web技术构建，那么我们称为混合式App ;

而如果只有少数页面采用Web技术，我们称为原生应用。

那么小程序属于以上三种的那一种?严格意义上来说，它不属于以上三种中的任何一种，在实现的技术上小程序同传统的Hybrid还是有很大的不同的。小程序采用avascript和

css这类常见的Web技术开发，但它又不使用HTML，E同Web没有直接的联系。小程序实际上是将一系列自己定义的组

件编译成了对应平台(Ios、Android、PC)的相应可运行组件，以提高运行性能。如果一定要将小程序归并到以上三类A

pp中，可能Hybrid App更合适:非原生，但使用到了Web技术(JavaScript和CSS)。

相比于Native App，小程序具有Hybrid App的一些优势:

·跨平台(对于iOS和Android两个平台只需要开发一套程序)

·具备接近于Native App 的体验·对原生组件有访问能力

·具备缓存能力

·上手容易，开发逻辑较为简单

同时，小程序还具有一些它独有的特点:

·小程序在设计时就做了很多约定式的规

·开发环境很干净，无需安装任何除开发工具外的其他的软件·发布和部署流程非常简单，几乎是“傻瓜式”，点击下就可以将应用发布到腾讯云

·小程序具有微信天然的关系链与获客能力(这也是小程序最大的优势)

但是，时间没有完美的事物，计算机世界里也没有完美的技术，你以为的优势在另一方面却成了缺点:

·小程序为了简化复杂性，做了一些UI上的设计规范，确实方便了很多对U要求不高的应用。但也限制了那些对UI要求极高的产品发挥

·不支持现有的HTML DOM结构，而是自己给出了一系列的组件，造就了一个封闭的开发环境

。小程序只实现了模块化，并没有实现自定义组件，这是最令人不满意的地方

二、小程序会淘汰原生APP么

不会。连Hybrid App都无法撼动(Native App的地位，又何况小程序本身只是 Hybrid App的一个子集，运行在微信这个[Native App 之下呢?除了Hybrid App本身与Native技术的差距，微信对小程序还附加了诸多限制和自身定位也非常明确——做低频和业务逻辑不复杂的应用。

11、移动App的拍照功能怎么实现

利用移动端对于文件上传时支持拍照上传在html中利用input标签设置类型为file

移动端点击该input标签可进行选择(相册选择图片、拍照等功能，该功能为提供扫码的app或系统定制)

可根据获取上传过后input输入框的files属性拿到拍照记录的照片信息数组

12、请你讲述一下微信小程序原理?

1、微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同

2、JavaScript:首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5s技术的应用，需要微信App提供对应的APr支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好

3、WXML: WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的

4、WxSS: WxSS具有css的大部分特性，但并不是所有的都支持，而且支持哪些，不支持那些并没有详细的文档5、微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现6、小程序分为两个部分webview和appService。其中webview主要用来展现UI,appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理

13、小程序的双向绑定和vue哪里不一样?

小程序直接this.data的属性是不可以同步到视图的，必须调用:

小程序:

Page({data: {items: []},onLoad: function(options) {this.setData({items : [1，2，3]})}
})

VUE

new vue({data: {items: []},mounted() {this.items = [1，2，3]}
})

14、小程序调用后台接口遇到哪些问题?

1、数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序;

2、小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，

所以最好在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其它的标签让插件来做，减轻前端的时间。

15、网页浏览页面如何跳转到小程序导航页面?

答案:小程序导航的页面可以通过switchTab，但默认不会重新加载到数据的。加载新数据，可以加入以下代码:

//成功:函数(e){
var page = getCurrentPages().pop();//如果(页面--未定义||页面-= null)返回;page.onLoad();
}
//网页浏览，通过
wx.miniProgram.switchTab ({网址: '/pages/index/index'
})

16、请谈谈原生开发小程序、wepy.mpvue的对比?

个人认为，如果是新项目，且没有l旧的h5项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。
而如果有老的h5项目是vue开发或者也有h5项目也需要小程序开发，则比较适合wepy 或者mpvue来做迁移或者开发，近期看wepy 几乎不更新了，所以推荐美团的mpvue )o
而如果如果团队前端强大，自己做一套框架也没问题。

17、请谈谈wxml与标准的html的异同?

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