面试题（2020）微信小程序常见面试题

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

1、微信的小程序的主要文件

WXML——模板文件
JSON——配置/设置文件，如标题,tabbar,页面注册
WXSS——样式文件，样式可直接用import导入
JS——脚本逻辑文件，逻辑处理，网络请求
app.json——配置文件入口，整个小程序的全局配置，网络超时时间、底部tab、页面路径，window字段是小程序所有页面的顶部背景颜色、文字颜色
app.js——可以没有内容，可以在里边监听生命周期函数、声明全局变量
app.wxss——全局配置样式文件

2、数据请求怎么封装

将所有的接口放在统一的js文件中并导出（或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出）
在app.js创建封装请求数据的方法
在子页面中调用封装的方法请求数据

3、参数传递

给HTML元素中添加data-*属性来传递需要的值，之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母，不可以存放对象
跳转页面时通过navigator传递需要的参数值
设置id的方法标识，通过e.currentTarget.id获取设置的id值，然后通过设置全局变量的方法来传递数值

4、生命周期函数

onLoad——页面加载，调一次
onShow——页面显示，每次打开页面都调用
onReady——初次渲染完成，调一次
onHide——页面隐藏，当navigateTo或底部tab切换时调用
onUnload——页面卸载，当redirectTo或navigateBack时调用

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

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

6、1px = 2rpx

7、如何自定义组件（弹窗）

先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss

基本配置：

.json——进行自定义组件声明

{"component": true
}

使用组件：

假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明

{  "usingComponents": {  "toastdemo": "/components/toastdemo/toastdemo"  }
}

接着在index.wxml中引用
然后在index.js进行配置
使用时直接执行this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了

8、小程序内的页面跳转

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

9、小程序和Vue写法的区别

循环遍历：小程序是wx:for=“list”，vue是v-for=“inforin list”
调用data模型：小程序是this.data.unifo，vue是this.unifo
给模型赋值：小程序是this.setData({unifo:1})，vue是直接this.unifo=1

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

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

11、小程序的优点和缺点

小程序的优点

无需下载
打开速度快
开发成本低
为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线
服务请求快

小程序的缺点

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

12、简述小程序原理

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

13、提高小程序的应用速度的方法

减少默认data的大小
组件化方案，公用的如弹框等写个自定义的组件，然后调用

14、简述小程序原理

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

15、setData的回调函数

微信小程序的setData实现是和react的setData实现类似的，所以它也是一个异步函数，并且有回调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要用到setData后 data里的数据的步骤，请写入setData的回调函数中，如下示例：

this.setData({a: this.data.a++},()=>{
})

16、如何实现下拉刷新

先在app.json或page.json中配置enablePullDownRefresh:true
page里用onPullDownRefresh函数，在下拉刷新时执行
在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

17、bindtap和catchtap的区别是什么

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

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

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

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

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

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

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

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

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

先在管理后台配置域名白名单，
然后引入jweixin-1.3.2.js（https://res.wx.qq.com/open/js/jweixin-1.3.0.js）

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

21、webview的页面怎么跳转到小程序导航的页面？

小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {var page = getCurrentPages().pop();if (page == undefined || page == null) return;page.onLoad();
}
//webview的页面，则通过
wx.miniProgram.switchTab({url: '/pages/index/index'
})

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

在同一主体公众号上关联2个小程序appid，
用navigator，对应设置一些属性即可
target：miniProgram——其他小程序
target：self——当前小程序

感谢

万能的网络

以及勤劳的自己，个人博客，GitHub

面试题（2020）微信小程序常见面试题相关推荐

微信小程序常见面试题总结
1.阐述一下微信公众平台账号的分类? 微信公众账号分为订阅号.服务号.小程序(含小游戏).企业微信(原企业号) 2.阐述一下不同公众账号的特点? 订阅号: 为媒体和个人提供一种新的信息传播方式,主要功 ...
微信小程序常见面试题
1.小程序有几个文件 WXML:是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构: WXSS: 用于描述 WXML 的组件样式: js: 逻辑处理: json:小程序页面配置. ...
2022最新微信小程序常见面试题总结
1.微信小程序有几个文件 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件 WXSS ( ...
微信小程序常见面试题与总结
目录主要目录和文件生命周期获取openid 本地存储 wx.navigateTo和 wx.redirectTo区别传递数据小程序的双向绑定和vue的异同生命周期函数下拉刷新 bindta ...
前端微信小程序常见面试题
1.微信小程序有几个文件 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件 WXSS ( ...
2020微信小程序前端面试题汇总
[持续更新,欢迎补充] 1.文件类型 WXML--模板文件 JSON--配置/设置文件,如标题,tabbar,页面注册 WXSS--样式文件,样式可直接用import导入 JS--脚本逻辑文件,逻辑处 ...
【微信小程序高频面试题——精选一】
微信小程序高频面试题小程序中如何进行接口请求?会不会跨域,为什么小程序的常用命令有哪些你认为微信小程序的优点是什么,缺点是什么微信小程序中的js和浏览器中的js以及node中的js的区别微信 ...
微信小程序相关面试题
前言首先说一些为什么总结小程序相关的面试题吧我们可以随便打开一个招聘网站,在那里你会发现市场对于小程序的需求还是蛮高的,有些公司可能就只需要写小程序的前端人员虽然小程序的开发很大一部分都是很简单 ...
[前端面试] 微信小程序相关面试题
前言话不多说,来看下微信小程序有哪些面试题吧! 1.请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App. ...

面试题（2020）微信小程序常见面试题

面试题（2020）微信小程序常见面试题

1、微信的小程序的主要文件

2、数据请求怎么封装

3、参数传递

4、生命周期函数

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

6、1px = 2rpx

7、如何自定义组件（弹窗）

8、小程序内的页面跳转

9、小程序和Vue写法的区别

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

11、小程序的优点和缺点

小程序的优点

小程序的缺点

12、简述小程序原理

13、提高小程序的应用速度的方法

14、简述小程序原理

15、setData的回调函数

16、如何实现下拉刷新

17、bindtap和catchtap的区别是什么

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

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

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

21、webview的页面怎么跳转到小程序导航的页面？

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

面试题（2020）微信小程序常见面试题相关推荐

最新文章

热门文章