前端微信小程序开发面试题（小程序前端面试题2021）微信小程序开发面试问题，居然可以这样，

1.前端微信小程序开发面试题

微信小程序 的官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#小程序简介1 、如何获得用户的授权信息？（必会）

2.微信小程序前端面试题答案

通过绑定按钮 bindgetuserinfo 事件和小程序 wx.getSetting() 方法获取2、数据绑定如何实现？（必会）在 minapp 中，你只需要在 wxml 模板中给组件的属性名后加上

3.小程序前端面试题2021

.sync 就可以实现双向绑定3、列表渲染如何实现？（必会）在 wxml 标签添加 wx:for 属性并赋值循环数据即可渲染4、条件渲染如何实现？（必会）在 wxml 标签添加 wx:if 属性并赋值判断变量即可渲染

4.微信小程序开发面试问题

5、公共模板怎样建立？（必会）使用 name 属性，作为模板的名字然后在内定义代码片段，如 {{index}}: {{msg}} 。

5.前段小程序面试题

Time: {{time}} 6、事件及事件绑定是什么？（必会）事件是视图层到逻辑层的通讯方式事件可以将用户的行为反馈到逻辑层进行处理

6.微信小程序前端开发技术

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数事件对象可以携带额外信息，如 id, dataset, touches事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递

7.微信小程序面试题2019

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递事件绑定的写法类似于组件的属性，如 Click here! 7、页面跳转的方式有哪些？（必会）。

8.小程序开发工程师面试题

使用导航组件实现，例如 跳转通过内置 api 实现，例如 wx.redirectTo({url: /pages/home/home})

9.前端小程序面试题及答案2019

、 wx.navigateBack({delta: 1})、wx.navigatorTo({url:/pages/home/home})8、如何获取用户收货地址？（必会）微信小程序内置接口 wx.chooseAddress()

10.web前端小程序面试题

实现9、tabBar配置参数有哪些？（必会）10、页面生命周期包含那几个？（必会）官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

onload() 页面加载时触发一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数 onShow() 页面显示/切入前台时触发 onReady() 页面初次渲染完成时触发一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互 。

onHide() 页面隐藏/切入后台时触发 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等 onUnload() 页面卸载时触发如 redirectTo 或 navigateBack。

到其他页面时11、转发分享如何实现？（必会）官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

转发: 获取更多转发信息 通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息，例如群的标识现在通过调用 wx.showShareMenu 并且设置withShareTicket 为 true。

，当用户将小程序转发到任一群聊之后，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket通过调用 wx.getShareInfo。

接口传入此 shareTicket 可以获取到转发信息页面内发起转发 基础库 1.2.0 开始支持，低版本需做兼容处理通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 。

Page.onShareAppMessage 事件，相关组件：button12、如何获取地理位置？（必会）第一步：要通过 wx.openSetting 接口拿到用户的授权， 第二步：在拿到用户授权以后，使用微信的 。

wx.getLocation 接口获取当前位置的经纬度， 第三步：结合第三方地图接口查询区域信息13、如何封装自定义组件？（必会）文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

自定义组件 从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程所有自定义组件相关特性都需要基础库版本 1.6.3 或更高开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

自定义组件在使用时与基础组件非常相似创建自定义组件 类似于页面，一个自定义组件由 jsonwxmlwxssjs 4个文件组成要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component

字段设为 true 可将这一组文件设为自定义组件）：{ "component": true }同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

具体细节和注意事项参见 组件模板和样式 14、 webview是什么？（必会）承载网页的容器会自动铺满整个小程序页面，个人类型的小程序暂不支持使用15、微信小程序支付需要哪些参数？（必会）文档：https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPayment.html。

API：wx.requestPayment(Object object)wx.requestPayment({ timeStamp: , nonceStr: , package: , signType

: MD5, paySign: , success (res) { }, fail (res) { } })16、简单描述下微信小程序的相关文件类型？（必会）1、WXML 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

内部主要是微信自己定义的一套组件2、WXSS 是一套样式语言，用于描述 WXML 的组件样式，3、js 逻辑处理，网络请求4、json 小程序设置，如页面注册，页面标题及 tabBar5、app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题6、app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写，以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量17、小程序有哪些参数传值的方法？（必会）1、给 HTML

元素添加 data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset或 onload 的 param 参数获取但 data-名称不能有大写字母和不可以存放对象2、设置 。

id 的方法标识来传值通过 e.currentTarget.id 获取设置的 id 的值,然后通过设置全局对象的方式来传递数值3、在 navigator 中添加参数传值18、简述微信小程序原理？（必会）

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

App 中的，并不是运行在浏览器中，因此一些 H5 技术的应用，需要微信 App 提供对应的 API 支持，而这限制住了 H5 技术的应用，且其不能称为严格的 H5，可以称其为伪 H5 ，同理，微信提供的独有的某些

API，H5也不支持或支持的不是特别好3、 WXML ： WXML 微信自己基于 XML 语法开发的，因此开发时，只能使用微信提供的现有标签， HTML 的标签是无法使用的4、 WXSS ： WXSS 具有

CSS 的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档5、微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现6、小程序分为两个部分

webview 和 appService 其中 webview 主要用来展现 UI ， appService 有来处理业务逻辑、数据及接口调用它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 。

UI 的渲染、事件的处理19、小程序的双向绑定和 vue哪里不一样？（必会）小程序直接 this 、 data 的属性是不可以同步到视图的，必须调用：小程序：Page({ data: {

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

：newVue({data: {items: []},mounted() {this.items = [1, 2, 3]}})20、小程序的 wxss和 css有哪些不一样的地方？（必会）1、wxss 的图片引入需使用外链地址

2、没有 Body，样式可直接使用 import 导入21、分析下微信小程序的优劣势？（必会）优势：1、无需下载，通过搜索和扫一扫就可以打开 2、良好的用户体验：打开速度快 3、开发成本要比 App 要低 4、安卓上可以添加到桌面，与原生

App 差不多 5、为用户提供良好的安全保障小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的劣势：1、限制较多页面大小不能超过 1M不能打开超过 5 个层级的页面 2、样式单一。

小程序的部分组件已经是成型的了，样式不可以修改例如：幻灯片、导航 3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广其中附近小程序也受到微信的限制 4、依托于微信，无法开发后台管理功能22、微信小程序与 H5的区别？（必会）

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

第二条是 开发成本的不同，只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙 BUG第三条是 获取系统级权限的不同，系统级权限都可以和微信小程序无缝衔接第四条便是 应用在生产环境的运行流畅度

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

相同点：首先他们都是作为点击事件函数，就是点击时触发在这个作用上他们是一样的，可以不做区分不同点：他们的不同点主要是 bindtap 是不会阻止冒泡事件的，catchtap 是阻止冒泡的24、简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(),wx.navigateBack(), wx.reLaunch()的区别？（必会）。

wx.navigateTo()： 保留当前页面，跳转到应用内的某个页面但是不能跳到 tabbar 页面 wx.redirectTo()： 关闭当前页面，跳转到应用内的某个页面但是不允许跳转到 tabbar。

页面 wx.switchTab()： 跳转到 abBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateBack(): 关闭当前页面，返回上一页面或多级页面可通过 getCurrentPages()。

获取当前的页面栈，决定需要返回几层 wx.reLaunch()： 关闭所有页面，打开到应用内的某个页面25、小程序与原生 App哪个好？（必会）小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验

26、怎么解决小程序的异步请求问题？（必会）小程序支持大部分 ES6 语法,在返回成功的回调里面处理逻辑或者使用 Promise27、样式导入（WeUI for）？（必会）下载 weUI、导入文件夹到

app.js同级目录下、在 app.wxss 里面引入 weui.wxss、在需要引入 weUI 插件样式的页面的 json 文件中引入、 然后就可以在对应页面的 wxml 中直接使用该组件28、小程序尺寸单位 rpx？（必会）

文档： https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.htmlWXSSWXSS (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物理像素29、小程序文件的作用域？（必会）JavaScript。

文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响通过全局函数 getApp 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置30、小程序选择器有哪些？（必会）

选择器 目前支持的选择器有：选择器样例样例描述.class.intro选择所有拥有 class="intro" 的组件#id#firstname选择拥有 id="firstname" 的组件element

view选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view

组件后边插入内容::beforeview::before在 view 组件前边插入内容全局样式与局部样式 定义在 app.wxss中的样式为全局样式，作用于每一个页面 在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 。

app.wxss 中相同的选择器31、小程序常用组件？（必会）view、swiper、scroll-view、text、button、input、image 等32、微信小程序长按识别二维码（必会）image

组件中二维码/小程序码图片不支持长按识别仅在 wx.previewImage 中支持长按识别示例代码33、列表页向详情页跳转（动态修改 title）（必会）微信小程序的 setNavigationBarTitle。

方法可以实现 title 的动态配置，这个方法可以写在 onLoad 里面或者 onSHow 里面 title 可以调接口动态获取、也可以在上一个页面 url 传参这个页面接收34、input组件 placeholder字体颜色（必会）

placeholder-style 和 placeholder-class 就是微信小程序里用来给 placeholder 设置样式的属性35、如何封装微信小程序的数据请求(http-promise)？（高薪常问）

1、将所有的接口放在统一的 js 文件中并导出2、在 app、js中创建封装请求数据的方法3、在子页面中调用封装的方法请求数据36、小程序关联微信公众号如何确定用户的唯一性？（高薪常问）使用 wx.getUserInfo

方法 withCredentials 为 true 时可获取 encryptedData ，里面有 UnionID 后端需要进行对称解密37、小程序申请微信支付？（了解）微信支付支持在公众平台注册并完成微信认证的小程序接入支付功能。

小程序接入支付后，可以通过小程序支付产品来完成在小程序内销售商品或内容时的收款需求具体申请流程，可以直接根据注册流程提供相关信息即可38、客服电话？（了解）wx.makePhoneCall({ phoneNumber

: 1340000 //仅为示例，并非真实的电话号码 }) 39、小程序插槽的使用 slot？（了解）微信官方文档--slot：组件模板和样式: 类似于页面，自定义组件拥有自己的 wxml 模板和 wxss

样式组件模板:组件模板的写法与页面模板相同组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点代码示例：

这里是组件的内部节点

> 这里是插入到组件 slot 中的内容 注意,在模板中引用到的自定义组件及其对应的节点名需要在

json 文件中显式定义，否则会被当作一个无意义的节点除此以外，节点名也可以被声明为抽象节点40、如何给微信小程序给按钮添加动画？（了解）主要是通过书写 css3 动画样式实现41、小程序页面怎么跳转第三方？（了解）。

使用 web-view 可以嵌入需要跳转的网页，但是这个需要企业账号以及放置验证文件到网站根目录，另外就是在网页中利用微信提供的 js 文件，调用微信小程序的跳转方法即可42、如何检测用户的微信版本是否支持某项功能？（了解）

wx.checkJsApi 接口检查43、APP打开小程序流程？（了解）本部分操作涉及到原生 app 的技术栈，一般不由前端完成，具体实现步骤如下：下载微信SDK、根据文档手动集成 SDK、编写对接小程序代码

44、如何获取微信群名称？（了解）首先开启页面分享功能，然后在 App.onLaunch() 跟 App.onShow() 中编写页面逻辑，通过分享之后的回传参数获取45、如何分包加载？分包加载的优势在哪？（了解）

微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持开发者工具请使用 1.01.1712150 及以上版本某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包每个使用分包小程序必定含有一个主包所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示目前小程序分包大小有以下限制：整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

点击官方文档——分包加载了解46、哪些方法可以用来提高微信小程序的应用速度？（了解）1、提高页面加载速度2、用户行为预测3、减少默认 data 的大小4、组件化方案47、webview中的页面怎么跳回小程序中？（了解）

网页中可使用 JSSDK 提供的接口返回小程序页面 例如： wx.miniProgram、 navigateTo({url: /path/to/page})48、小程序如何实现下拉刷新？（了解）。

用 view 代替 scroll-view ,设置 onPullDownRefresh 函数实现1、在 json 文件中配置 enablePullDownRefresh 为 true ( app.json

中在 window 中设置 enablePullDownRefresh ) 2、在 js 文件中实现 onPullDownRefresh 方法,在网络请求完成后调用 wx.stopPullDownRefresh()

来结束下拉刷新49、小程序调用后台接口遇到哪些问题？（了解）1、数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；2、小程序不可以直接渲染文章内容页这类型的 html 文本内容，若需显示要借助插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的

html 进行过滤，后台直接处理批量替换 p 标签、div 标签为 view 标签，然后其它的标签让插件来做，减轻前端的时间