微信小程序面试题

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

答：微信小程序项目结构主要有四个文件类型,如下
.json 、.wxml 、.wxss、.js 、
json主要是小程序设置，如页面的tabBar,页面标题，页面注册等
js主要是业务逻辑以及数据请求
wxss是样式语言
wxml是微信官方开发的一套组件框架

2、app.json

这个文件必须要有，他是微信框架的配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，默认标题等

pages配置页面路径、window配置小程序的自定义颜色默认标题等、

3、app.js

必须要有这个文件，他里面有生命周期，onlaunch在这个文件中

4、app.wxss

全局样式配置，非必须文件

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

答：将所有的接口放在统一的js文件中；在app.js中创建封装请求数据；在子页面中调用封装的方法请求数据

6、有哪些参数传值的方法？

答：a、给HTML元素添加data-属性来传递所需要的值，然后通过e.currentTarget.dataset或者onload的param参数object获取，但是data-名称不能有大写字母以及不能存放对象

b、设置id表标识来传值，通过e.currentTarget.id来获取id的值，然后通过设置全局对象来传值（app.globalData）

c、在navigator中添加参数传值

7、你使用过哪些方法，来提高小程序的应用速度？

答：a、提高页面加载速度

b、用户应为预测

c、减少默认data的大小

d、组件化方案

8、小程序与原生APP哪个好？

答：小程序除了拥有公众号的低开发成本、低获客成本以及无需下载等优势，随着小程序官方的优化升级，现在他的用户体验能够更好以及服务功能能够更复杂了

9、简述微信小程序原理？

答：小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理

10、分析微信小程序的优劣势？

答：优势：
1、无需下载，通过搜索和扫一扫就可以打开。
2、良好的用户体验：打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面，与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。

劣势：
1、依托微信，不能开发后台管理功能；
2、大小限制不能超过2M，不能打开超过5个层级的页面

11、微信小程序与H5的区别？

答：
第一条是运行环境的不同:

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

第二条是开发成本的不同:

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

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

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

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

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

12、怎么解决小程序的异步请求问题？

使用promise或者响应请求阻塞async和await

13、小程序的wcss和css有哪些不一样的地方？

wxss图片的引用需要使用外链地址，样式直接用import导入

14、webview中的页面怎么跳回小程序中？

答：先在管理后台配置域名白名单，再要引入最新版的jweixin-1.3.2.js，然后

wx.miniProgram.navigateTo({ url: '/pages/login/login'+'$params' })

15、小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。

16、小程序和小程序之间的跳转

wx.navigateToMiniProgram,参数需要目标小程序的appid

17、如何实现下拉刷新

先在app.json或page.json中配置enablePullDownRefresh:true

page里用onPullDownRefresh函数，在下拉刷新时执行

在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

18、bindtap和catchtap的区别是什么？

bindtap不会阻止冒泡，catchtap会阻止冒泡

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

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

20、生命周期函数

onLoad——页面加载，调一次

onShow——页面显示，每次打开页面都调用

onReady——初次渲染完成，调一次

onHide——页面隐藏，当navigateTo或底部tab切换时调用

onUnload——页面卸载，当redirectTo或navigateBack时调用

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

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

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

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

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

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

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

index.wxml (页面结构)；

index.wxss (页面样式表)；

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

22 请谈谈wxml与标准的html的异同？

都是用来描述页面的结构；

都由标签、属性等构成；

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

多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

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

组件封装不同， WXML对组件进行了重新封装，

小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

23 请谈谈WXSS和CSS的异同？

都是用来描述页面的样子；

WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；

WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；

WXSS 仅支持部分 CSS 选择器；

WXSS 提供全局样式与局部样式

24 你是怎么封装微信小程序的数据请求的？

在根目录下创建utils目录及api.js文件和apiConfig.js文件；

在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；

在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；

在具体的页面中导入；

25 小程序页面间有哪些传递数据的方法？

使用全局变量实现数据传递

页面跳转或重定向时，使用url带参数传递数据

使用组件模板 template传递参数

使用缓存传递参数

使用数据库传递数据

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

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

27 请谈谈小程序的生命周期函数？

onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。

onShow() 页面显示/切入前台时触发，一般用来发送数据请求；

onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。

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

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

28 简述微信小程序原理？

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；

它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；

它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；

功能可分为webview和appService两个部分；

webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；

两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

29 请谈谈原生开发小程序、wepy、mpvue 的对比？

个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。

而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。

而如果如果团队前端强大，自己做一套框架也没问题。

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

1、①.wxml 模板文件，是框架设计的一套标签语言，结合基础组件、事件系统、可以构建出页面的结构

②.wxss 样式文件，是一套样式语言，用于描述WXML的组件样式

③.js 脚本逻辑文件，逻辑处理网络请求

④.json 配置文件，小程序设置，如页面注册，页面标题及tabBar

2、 app.json 整个小程序的全局配置，包括：

pages:[所有页面路径]

网络设置（网络超时时间）

界面表现（页面注册）

window:{背景色、导航样式、默认标题}

底部tab等

3、app.js 监听并处理小程序的生命周期函数、声明全局变量

4、app.wxss 全局配置的样式文件

二.怎么封装微信小程序的数据请求？

1、将所有的接口放在统一的js文件中并导出

2、在app.js中创建封装请求数据的方法

3、在子页面中调用封装的请求数据

或

1、在根目录下创建utils目录及api.js文件和apiConfig.js文件；

2、在appConfig.js封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；

3、在api.js中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls，设置对应的方法并导出；

4、在具体页面导入；

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

1、给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取。

注：data-名称不能有大写字母、不可以存放对象

2、设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值

3、在navigator中添加参数数值

或

1、使用全局变量实现数据传递

2、页面跳转或重定向时，使用url带参数传递数据

3、使用组件模板template传递参数

4、使用缓存传递参数

5、使用数据库传递参数

四.哪些方法来提高微信小程序的应用速度？

1、提高页面的加载速度

2、用户行为预测

3、减少默认data的大小

4、组件化方案

五.微信小程序的原理？

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

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

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

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

微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

小程序功能分为webview和APPservice，webview主要用来展示UI，appservice用来处理业务逻辑、数据及接口调用。它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染、事件处理。

六.分析微信小程序的优劣势？

优势：

①容易上手，基础组件库比较全，基本上不需要考虑兼容问题；

②开发文档比较完善，开发社区比较活跃，支持插件式开发；

③良好的用户体验：无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多；

④开发成本比APP要低；

⑤为用户提供良好的安全保障（小程序发布 严格的审查流程）

劣势：

①限制较多，页面大小不能超过1M，不能打开超过5个层级的页面；

②样式单一，部分组件已经是成型了的，样式不可修改，例如：幻灯片、导航

③推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广

④依托于微信，无法开发后台管理功能

⑤后台调试麻烦，因为api接口必须https请求且公网地址

⑥真机测试，个别功能安卓和苹果表现迥异，例如安卓的定位功能加载很慢

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

①运行环境不同（小程序在微信运行，h5在浏览器运行）；

②开发成本不同（h5需要兼容不同的浏览器）；

③获取系统权限不同（系统级权限可以和小程序无缝衔接）；

④应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

八.怎么解决微信小程序的异步请求问题？

在回调函数中调用下一个组件的函数：

//app.js
success:function(info){
    that.apirtnCallback(info)
}

//index.js
onLoad:function(){
    app.apirtnCallback = res =>{
        console.log(res)
    }
}

九.小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。

十.使用webview直接加载要注意哪些事项？

①必须要在小程序后台使用管理员添加业务域名；

②h5页面跳转至小程序的脚步必须是1.3.1以上；

③微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上；

④h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的

十一.小程序调用后台接口遇到哪些问题？

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

②小程序不可以直接渲染文章内容这类型的html文本，显示需借助插件

注：插件渲染会导致页面加载变慢，建议在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签。然后其他的标签让插件来做。

十二.微信小程序如何实现下拉刷新？

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

十三.webview中的页面怎么跳转回小程序？

wx.miniProgram.navigateTo({

url:’pages/login/login’+’$params’

})

//跳转到小程序导航页面

wx.miniProgram.switchTab({

url:’/pages/index/index’

})

十四.bindtap和catchtap的区别？

①bind事件绑定不会阻止冒泡事件向上冒泡

②catch事件绑定可以阻止冒泡事件向上冒泡

十五.简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

①在wxml页面中：

跳转新页面

在当前页打开

切换到首页Tab

②在js页面中：分为‘应用内的页面’和‘tabBar页面’；

③如果上述跳转遇到跳转失败或者无效的问题，请访问：wx.navigateTo/wx.redirectTo无效

十六.小程序的生命周期函数？

1、onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数

2、onShow()页面显示/切换前台时触发，一般用来发送数据请求

3、onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互

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

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

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

①遍历的时候：小程序wx:for = "lists",而Vue是v-for = "item in lists"

②调用data模型（赋值）的时候：

小程序：this.data.item //调用

this.setData({item:1}) //赋值

vue: this.item //调用

this.item =1 //赋值

常见问题

1、rpx:小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率的屏幕。

2、本地资源无法通过wxss获取

RE：background-image：可以使用网络图片，或者base64，或者使用标签

3、wx.navigateTo无法打开页面

RE：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo

4、tabBar设置不显示

RE：①tabBar的数量少于2项或超过5项都不会显示；

②tabBar写法错误导致不显示；

③tabBar没有写pagePath字段（程序启动后显示的第一个页面）