【前端面试】小程序面试题总结_前端小程序面试题

项目结构主要有四个文件类型

WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，
js 逻辑处理，网络请求
json小程序设置，如页面注册，页面标题及tabBar
1
2
3
4

封装微信小程序的数据请求

将所有的接口放在统一的js文件中并导出
在app.js中创建封装请求数据的方法
在子页面中调用封装的方法请求数据
1
2
3

提高小程序的应用速度

提高页面加载速度
用户行为预测
减少默认data的大小
组件化方案
1
2
3
4

微信小程序原理

JavaScript：JavaScript的代码运行在微信App中，而不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。
WXML：WXML是微信基于XML语法开发的，所以能使用微信提供的现有标签，HTML的标签无法使用。
	与html的异同
		标签名字不一样，且小程序标签更少，单一标签更多
		WXML只能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
		小程序运行在JS Core内，没有DOM树和windiw对象，小程序中无法使用window对象和document对象。
WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，且没有详细文档参考。
	与css不同的地方
		wxss的图片引入需使用外链地址；
		没有Body,样式可直接使用import导入；
1
2
3
4
5
6
7
8
9
10

解决小程序的异步请求问题

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

bindtap和catchtap的区别

bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡
1
2

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

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

webview的页面跳转到小程序

小程序导航的页面可以通过wx.miniProgram.navigateTo，但默认情况是不会重新加载数据的。
若需加载新数据，则在success属性中输入数据即可
普通页：wx.miniProgram.navigateTo
1
2
3

使用webview直接加载要注意

必须要在小程序后台使用管理员添加业务域名
h5页面跳转至小程序的脚步必须是1.3.1以上
微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上
h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的
1
2
3
4

页面传参

使用全局遍历实现数据传递
页面跳转或重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值
1
2
3
4
5
6

优点

容易上手，基础组件库比较全，基本不用考虑兼容性问题
开发文档比较完善，社区比较活跃，支持插件式开发
用户体验感好，无需下载
开发成本比app低
1
2
3
4

劣势

限制较多，如：页面大小不能超过1M，不能打开超过5个层级的页面
样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
依托与微信，无法开发后台管理功能
真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢
后台调试麻烦，因为api接口必须https请求且公网地址
1
2
3
4
5
6

小程序调用后台接口遇到问题

数据的大小限制，超过范围会直接导致整个小程序崩溃，除非重启小程序
小程序不可以直接渲染文章内容这类型的html文本，显示需要借助插件
	注：插件渲染会导致页面加载变慢，建议在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签，然后其他的标签让插件来做
1
2
3

小程序和Vue写法的区别

遍历的时候：小程序wx:for="list",而Vue是v-for="item in list"
调用data模型（赋值）的时候：
小程序：this.data.item // 调用，this.setDate({item:1})//赋值
Vue：this.item //调用，this.item=1 //赋值
1
2
3
4

授权登录流程

授权，微信登录获取code，微信登录，获取 iv , encryptedData 传到服务器后台，如果没有注册，需要注册。
1