微信小程序面试题大全

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

WXML 搭建页面的结构
WXSS 页面样式文件
js 逻辑处理，网络请求
json 配置当前页面标题和引入组件等
app.js 可以在里边监听生命周期函数、声明全局变量
app.json 小程序的全局配置（页面路径、网络超时时间、底部tabBar 、导航背景颜色等）

2、简述一下小程序的开发流程？

注册微信小程序账号
获取微信小程序的 AppID
下载微信小程序开发者工具
创建demo项目
去微信公众平台配置域名
手机预览
代码上传
提交审核
小程序发布

3、你是怎么封裝小程序的数据信息要求的？

在根目录下创建utils目录及api.js文件和apiConfig.js文件；
在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；
在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
在具体的页面中导入；

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

给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的params参数获取。注：data-属性的名称不能有大写字母、不可以存放对象
设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值
在navigator中添加参数数值

5、哪些方法可以提高微信小程序的应用速度？

提高页面加载速度(压缩静态⽂件，使⽤精灵图，路由分包)
用户行为预测 # 什么叫行为预测
减少默认data的大小（在不操作视图的时候，使⽤this.data.变量这种⽅式代替this.setData({})
组件化方案 # 使用

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

优点：

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

缺点：

限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
样式单一。小程序的部分组件已经是成型的了，样式不可以修改。
推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
依托于微信，无法开发后台管理功能。

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

微信小程序采用JavaScript、wxml、wxss三种技术进行开发，与现有前端开发的区别：
- JavaScript的代码是运行在微信APP中的，因此一些h5技术的应用需要微信APP提供对应的API支持；
- wxml微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的；
- wxss具有css的大部分特性，但并不是所有都支持没有详细文档（wxss的图片引入需使用外链地址，没有body，样式可直接使用import导入）。
微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。
小程序功能分为webview和APPservice，webview主要用来展示UI，appservice用来处理业务逻辑、数据及接口调用。它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染、事件处理。

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

运行环境不同（小程序在微信运行，h5在浏览器运行）；
开发成本不同（h5需要兼容不同的浏览器）；
获取系统权限不同（系统级权限可以和小程序无缝衔接）；
应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

9、有哪几种方式可以跳转页面？

navigateTo: 保留当前页面，跳转到应用内的某个页面。
navigateBack：关闭当前页面，返回上一页面或多级页面。
redirectTo ：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
reLaunch：关闭所有页面，打开到应用内的某个页面。

10、小程序里边的双向绑定和vue的双向绑定有什么区别？

首先利用bindinput来触发改变input输入框中的值
使用data-name来获取改变的数据的内容
bindinput触发后在方法中通过e.currentTarget.dataset.name来获取改变后的内容‘
通过this.setData()来改变data-name绑定的参数就好了

//data-name绑定的值就是value的值，这样才能随时更新到value中
<input type="text" bindinput="inputEdit" data-name="inputValue" placeholder="姓名" value="{{inputValue}}">

在index.js中:

Page({data:{inputValue:'测试数据双向绑定',},inputEdit(e){//data-开头的是自定义属性，可以通过dataset获取到dataset是一个json对象。//通过事件参数获取input所对应的全局属性名var inputModel = e.currentTarget.dataset.name;//通过value获取当前用户输入的内容var value = e.detail.value;
//将input所对应的全局属性的属性只更新this.data[inputModel] = value;   
这个时候也就是说`data-name` 的值更新了,这里就是通过bindInput记录的value改变的值，存起来this. setData({inputValue:this.data[inputModel] });}
})

11、什么是分包加载？如何使用分包加载？

什么是分包加载：
在小程序开发的过程中，小程序的体积会随着版本变的越来越大，我们可以将小程序分成多个包从服务器下载，优化首次启动加载时间以及后续按需加载的实现。
分包配置
在这里插入图片描述
如何使用分包加载：

1、在app.json中配置项目分包结构（结构如上图）
2、配置subpackages后，将按subpackages配置的路径进行打包，没有配置的都会分到主包。所以一定要配置好路径，避免主包超过限制报错
3、tabBar必须放在主包
4、分包之间不能引用，只能require app.js和自身的js
5、配置完分包之后检查主包配置的路径有没有包含分包的，有的话要去掉

12、在你开发小程序的过程中遇到过什么坑？你是怎么解决的？

wx.navigateTo无法打开页面
一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
tabBar设置不显示
tabBar的数量少于2项或超过5项都不会显示；
tabBar写法错误导致不显示；
tabBar没有写pagePath字段（程序启动后显示的第一个页面）
本地资源无法通过wxss获取
background-image：可以使用网络图片，或者base64，或者使用标签

13、小程序与webview之间是怎么跳转的？

小程序跳转到webview

需要用到web-view标签然后通过web-view标签里的src属性跳转到webview页面
小程序跳转webview必须要在小程序后台使用管理用户添加业务域名

webview跳转到小程序

首先需要引入微信小程序库，然后使用wx. miniprogram.navigateTo()来跳转到小程序的页面，
跳转tabbar页面可以使用wx. miniprogram.switchTab()来跳转到tabbar页面

14、小程序的生命周期函数？

1、onLoad()页面加载时触发，只会调⽤⼀次，可获取当前⻚⾯路径中的参数
2、onShow()页面显示/切换前台时触发，⼀般⽤来发送数据请求
3、onReady()页面初次渲染完成时触发，只会调⽤⼀次，代表页面已和可视图层进⾏交互
4、onHide()页面隐藏/切⼊后台时触发，如底部tab切换到其他页面或⼩程序切⼊后台等
5、onUnload()页面卸载时触发，如redirectTo或navigateBack到其他页面时。

15、小程序页面生命周期？

data：页面的初始数据
onLoad：生命周期回调—监听页面加载
onShow：生命周期回调—监听页面显示;
onReady：生命周期回调—监听页面初次渲染完成
onHide：生命周期回调—监听页面隐藏
onUnload:生命周期回调—监听页面卸载
onPullDownRefresh:监听用户下拉动作
onReachBottom:页面上拉触底事件的处理函数
onShareAppMessage:用户点击右上⻆转发
onPageScroll:页面滚动触发事件的处理函数
onResize:页面尺寸改变时触发
onTabItemTap:当前是 tab 页时，点击 tab

16、如何自定义tabbar？以及如何自定义组件？

自定义tabbar：

创建一个custom文件夹，里面创建一个tabbar页面，取消原有的tabbar页面。需要在app.json中输入custom:ture，然后在自定义的pages页面中写入《tabbar selected="{{0}}"》《/tabbar》进行选中效果显示

自定义组件：

1、在根目录新建一个components文件夹，然后在这个文件夹下放置自定义的组件。
2、需要用到某个自定义组件时，就在它里面的json文件中配置 "component": true
3、然后在父组件的json文件中的usingComponents中导入这个组件：
{
“usingComponents”: {
“自定义组件名”:"…/…/components/路径"
}
}

17、微信小程序和app有什么不同之处？

微信小程序属于轻量级的app 但是限制在微信中，开发周期短，功能较少，占用空间少， app就相反需要占用额外内存开发周期长

18、如何实现登录数据的持久化 ?

可以通过wx.setStorageSync(‘键名’, 对应的值)来进行数据持久化

19、微信小程序如何实现下拉刷新？

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

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

小程序支持 ES6 语法在返回成功的回调里面处理逻辑 Promise 异步 async/await

在回调函数中调用下一个组件的函数：**app.js**
success:function(info){that.apirtnCallback(info)
}
**index.js**
onLoad:function(){app.apirtnCallback = res =>{console.log(res)}
}