小程序面试题总结(简版)

雨点打透心脏的1/2处 2022-11-13 14:26 201阅读 0赞

### 1. 简单描述下微信小程序的目录结构？ ###

pages		主要存放小程序的页面文件
    	app.js		小程序逻辑
    	app.json		小程序公共配置
    	app.wxss		小程序公共样式表
    	xxx.js		页面逻辑
    	xxx.wxml		页面结构
    	xxx.json		页面配置
    	xxx.wxss		页面样式表

### 2. wxml与标准的html的异同？ ###

开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
    	组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
    	没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。

### 3. 小程序怎样进行本地存储的读、写、删、清？请写出同步及异步两种类型 ###

同步：（1）wx.setStorageSync();  //存储值
    		（2）wx.removeStorageSync();   // 移除指定的值
    		（3）wx.getStorageSync();  // 获取值
    		（4）wx.getStorageInfoSync();  // 获取当前 storage 中所有的 key
    		（5）wx.clearStorageSync();  // 清除所有的key
    	异步：（1）wx.setStorage();  //存储值
    		（2）wx.removeStorage();   // 移除指定的值
    		（3）wx.getStorage();  // 获取值
    		（4）wx.getStorageInfo();  // 获取当前 storage 中所有的 key
    		（5）wx.clearStorage();  // 清除所有的key

### 4. 分析下微信小程序的优劣势？ ###

优势
    	1、即用即走，不用安装，省流量，省安装时间，不占用桌面
    	2、依托微信流量，天生推广传播优势
    	3、开发成本比 App 低
    	缺点
    	1、用户留存，即用即走是优势，也存在一些问题
    	2、入口相对传统 App 要深很多
    	3、限制较多,页面大小不能超过2M。不能打开超过10个层级的页面

### 5. 小程序的数据驱动和vue的双向绑定有何异同？ ###

vue可以直接用this指出数据进行更改
    	小程序必须要调用setData方法进行更改

### 6. 小程序中用于跳转页面的5个api是什么？区别？ ###

wx.navigateTo()	保留当前页面，跳转到应用内的某个非tabBar页面。
    	wx.navigateBack()	获取当前的页面栈，决定需要返回几层。
    	wx.redirectTo()	关闭当前页面，跳转到应用内的某个非tabBar页面
    	wx.reLaunch()	关闭所有页面，跳转到小程序内的某个非tabBar页面
    	wx.switchTab()	关闭其他所有非tabBar页面，跳转到 tabBar 页面

### 7. 小程序页面路由传参方法？ ###

wx.navigateTo({ 
       		url: '/pages/index/index?id=' + id
    	})

### 8. 请说明小程序的生命周期以及页面生命周期 ###

小程序生命周期：
    		onLaunch()
    		onShow()
    		onHide()
    		onError()
    		onPageNotFound()
    	页面生命周期：
    		onLoad()
    		onReady()
    		onShow()
    		onHide()
    		onUnload()

### 9. 小程序如何刷新当前页面？ ###

重新获取或调用数据，可以使用this.onLoad()、this.onReady() 或者 this.onShow()

### 10. 小程序中获取openid的方法？ ###

通过login获取code，再根据code获取openid

### 11. 小程序中获取用户的手机号需要请求哪些api？并且解密的参数有哪些？ ###

获取微信用户绑定的手机号，需先调用wx.login接口。
    	因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。

### 12. 在小程序中设置背景图片在开发者工具中可以显示背景图片，但是在手机上背景图片不显示，怎么解决？ ###

将本地图片路径改为网络图片路径

### 13. 小程序中页面跳转传参的方式有哪些？ ###

1.在写在js中进行跳转，
    	2.写在wxml页面中进行跳转。

### 14. webview页面的使用有哪些要求 ###

1.h5地址需要在小程序后台添加h5域名白名单，如果webview里面还有跳转到其他的h5页面，也是需要添加域名白名单的。
    	2.如果配置了域名还是报错：页面访问受限，是需要重新推送一下真机预览二维码再扫码测试的。
    	3.webview支持的接口可以参考一下web-view H5 页面承载文档。
    	4.若无法放置并验证校验文件，则无法添加白名单，也就无法使用webview实现承载。

### 15. bindtap和catchtap的区别？ ###

bindtap事件绑定不会阻止冒泡事件向上冒泡
    	catchtap事件绑定可以阻止冒泡事件向上冒泡

### 16. 小程序wx:if 和hidden的区别？ ###

wx:if 为 true 显示，hidden 为 false 显示。

### 17. 如何实现下拉刷新？ ###

在app.json中添加enablePullDownRefresh:true

### 18. 请写出小程序的完整开发流程 ###

1.申请账号并完善信息
    	2.下载安装开发工具 
    	3.开发小程序
    	4.上传代码
    	5.提交审核
    	6.发布

### 19. 小程序for循环中的key值有什么用 ###

保持列表中项目的特征和状态;
    	当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

### 20. 如何实现登录数据的持久化 ###

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

### 21. 微信小程序与H5的区别 ###

使用localStorage本地存储数据
    	使用vuex-persistedstate插件，将数据储存到本地
    	使用vue-cookie插件

### 22. 怎么解决小程序的异步请求问题 ###

运行环境的不同
    	开发成本不同
    	获取系统及权限不同
    	运行流畅度不同

### 23. 小程序保存海报的过程 ###

1.创建canvas标签声明一个画布，通过接口请求到二维码图片
    	2.使用getSystemInfo API获取当前系统信息的宽和高为参数。
    	3.将背景图和二维码图在画布上进行draw()方法绘制。
    	4.点击按钮使用wx.authorize获取相册权限。
    	5.使用wx.canvasToTempFilePath将画布生出指定大小图片，并返回文件路    径，将图片保存至相册。

### 24. 微信小程序如何跳转到外部小程序 ###

wx.navigateToMiniProgram(Object object)

### 25. 小程序微信支付API？以及参数有哪些 ###

wx.requestPayment(Object object)