微信小程序常见面试题与总结

主要目录和文件

• project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
• App.js 设置一些全局的基础数据等；
• App.json 底部tab, 标题栏和路由等设置；
• App.wxss 公共样式，引入iconfont等；
• pages 里面包含一个个具体的页面；
• index.json (配置当前页面标题和引入组件等)；
• index.wxml (页面结构)；
• index.wxss (页面样式表)；
• index.js (页面的逻辑，请求和数据处理等)；

生命周期

获取openid

本地存储

wx.navigateTo和 wx.redirectTo区别

使用wx.navigateTo每新开一个页面，页面栈大小加1，使用wx.navigateTo重复打页面也会增加页面栈
使用wx.redirectTo会关闭当前页面打开新页面，页面栈大小不变
1.对于可逆操作，使用wx.navigateTo,比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页
2.对于不可逆操作，使用wx.redirectTo,比如用户登录成功后，关闭登录页面，不能返回到登录界面。
3.不要在首页使用wx.redirectTo，这样会导致应用无法返回首页

传递数据

• 使用全局变量实现数据传递
• 页面跳转或重定向时，使用url带参数传递数据
• 使用组件模板 template传递参数
• 使用缓存传递参数
• 使用数据库传递数据

小程序的双向绑定和vue的异同

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法

生命周期函数

• onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
• onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
• onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
• onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
• onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

下拉刷新

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

bindtap和catchtap的区别

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

小程序和Vue写法的区别

①遍历的时候：小程序wx:for = “lists”,而Vue是v-for = “item in lists”
②调用data模型（赋值）的时候：
小程序：this.data.item //调用
this.setData({item:1}) //赋值
vue: this.item //调用
this.item =1 //赋值

组件

WeUI

WeUI 是微信官方出品的组件库，它沿用了微信的视觉设计与交互设计，提供了各类原生组件的基础样式，风格简约大方。选用这一套组件库，可以让你的小程序与微信本身保持一致的界面风格。
GitHub 地址：https://github.com/Tencent/weui

Vant-Weapp

适用于电商、餐饮、外卖平台、票务预订等购物类小程序
开发文档：https://youzan.github.io/vant-weapp/#/intro
GitHub 地址：https://github.com/youzan/vant-weapp

ColorUI

ColorUI 是由文晓港发布的高颜值组件库，侧重于视觉交互。
适用于日记类、记账类、博客、Vlog 类小程序
GitHub 地址：https://github.com/weilanwl/ColorUI
9.4 iView-Weapp
开发文档：https://weapp.iviewui.com/docs/guide/start
GitHub 地址：https://github.com/TalkingData/iview-weapp

MinUI

相比其他组件库，MinUI 将各种组件拆分得更细，真正使用时，需要开发者更多的对各个组件进行再次结合，但也因此 MinUI 显得更加通用。
开发文档：https://meili.github.io/min/docs/minui/index.html#README
GitHub 地址：https://github.com/meili/min-cli

TaroUI

TaroUI 是由京东·凹凸实验室发布的多端 UI 组件库。这套组件库，可以在 H5、微信小程序、支付宝小程序、百度小程序多端适配运行
适用小程序：工具、读书、资讯、教育、商务等
开发文档：https://taro-ui.aotu.io/#/docs/introduction
GitHub 地址：https://github.com/NervJS/taro-ui

WuxUI

适用于开发工具类小程序
开发文档：https://wux-weapp.github.io/wux-weapp-docs/#/introduce
GitHub 地址：https://github.com/wux-weapp/wux-weapp/