Web前端面试题分享—微信小程序篇（一）

髙良檳

随便打开一个招聘网站，你会发现市场对于小程序的需求还是蛮高的，有些公司可能就只需要写小程序的前端人员。故此，有了这样一篇小程序面试题的总结。
整理了关于小程序面试常问的一些面试题，分享给大家。


1、简单谈谈微信小程序

在结构和样式方面，小程序提供了一些常用的标签与控件，比如：
view，小程序主要的布局元素，类似于html标签的div，你也完全可以像控制div那样去控制view。
scroll-view，你要滚动内容的话，没必要用view去做overflow，scroll-view提供了更为强大的功能，通过参数的调整，你可以控制滚动方向，触发的事件等等
配置文件app.json平级的还有一个app.js文件，是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，在每个page目录里的js做当前页面的业务操作。但是小程序的页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，所以我们常用的zepto/jquery 等类库也是无法使用的。
另一个app.wxss文件，这个是全局的样式，所有的页面都会调用到，每个项目目录下面的wxss是局部样式文件，不会和其他目录产生污染，可以放心使用样式名。
他提供的WXSS(WeiXin Style Sheets)是一套样式语言，具有 CSS 大部分特性，可以看作一套简化版的css。
同时为了更适合开发微信小程序，还对 CSS 进行了扩充以及修改，直接帮我们把适配的一部分工作都做了，比如他的rpx（responsive pixel），可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
在调用微信生态系统功能时，微信小程序提供了相应的api，比如你要修改一个头像，可以使用wx.chooseImage等 。
2、小程序的原生组件有哪些？

以微信小程序为例，可以分成容器组件、基础组件、表单组件、媒体组件、开放能力组件等。
3、小程序的安卓版和ios版是怎么开发出来？

小程序开发基于html、css、javascript，与web开发一样具有跨平台特性，一次开发即可在安卓和iOS等平台访问。但与普通web开发不同，小程序运行环境并不是浏览器，而是依附于各自的软件App。如微信小程序必须在微信中访问，支付宝小程序必须在支付宝中访问等，小程序的开发流程也有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目、开发、调试、上线发布等过程方可完成。
4、uni-app弹窗被覆盖怎么解决？

如果弹窗被别的内容覆盖，且设置很大的z-index也无法解决，这种情况多半是被一些如map、video、textarea、canvas等原生组件遮盖，因为原生组件层级高于前端组件，我们可以使用cover-view组件解决。
5、小程序生命周期

onReady                生命周期函数--监听页面初次渲染完成
onShow                生命周期函数--监听页面显示
onHide                生命周期函数--监听页面隐藏
onUnload                生命周期函数--监听页面卸载
onPullDownRefresh                页面相关事件处理函数--监听用户下拉动作
onReachBottom                页面上拉触底事件的处理函数
onShareAppMessage                用户点击右上角转发
onPageScroll                 页面滚动触发事件的处理函数
onTabItemTap            当前是 tab 页时，点击 tab 时触发
6、小程序路由跳转

（1）通过组件navigator跳转，设置url属性指定跳转的路径，设置open-type属性指定跳转的类型（可选），open-type的属性有 redirect, switchTab, navigateBack


（2）通过api跳转，wx.navigateTo() ,  wx.navigateBack(),  wx.redirectTo() , wx.switchTab(), wx.reLanch()


7、小程序的兼容问题有哪些？

遇到的如下：

• 1，ios下的zIndex层级问题，主要发生在iphone7和iphoneX下 绝对定位必须有一个共同的父元素。
  
• 2，左右边框不生效 当边框的宽度设置为奇数的时候，可能会不生效 解决方法：将宽度设置为偶数的时候，在ios下就可以解决
  
• 3，还有尽量不要用margin-bottom ，当元素是在整个页面的最底部的时候，在ios下可能margin-bottom会失效，所以建议，都使用padding-bottom
  

new Date跨平台兼容性问题
在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。
因为IOS下面不能识别这种格式，需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。var iosDate= date.replace(/-/g, '/');。
wx.getUserInfo()接口更改问题
微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。
8、小程序框架都掌握哪一些？uniapp都会哪一些？平时开发遇到的困难？

• Taro
  
• uni-app
  
• WeUI
  
• mpvue
  
• iView Weapp
  

开发uni-app遇到的坑
上传图片
小程序时必须要写header:{“Content-Type”: “multipart/form-data”}, h5是必须省略
uni-app h5 端的ios图片不能加载问题
uni-app h5端 ios只能加载https的图片  
uni-app 使用deep 穿透微信小程序生效 h5无作用
需要在methods同级下加一个 ：
options: { styleIsolation: ‘shared’ },
uni-app post请求如何传递数组 参数
在开发中我们接口上传图片是post请求 无法传递一个数组 解决方法如下
我们可以把数据转换成字符串 然后拼接到请求地址后后面
拼接字符串格式：image[]=arr[0]&image[]=arr[1]
imgURlClick(imgArr){
    return '?images[]='+imgArr.join('&images[]=')
}
以上就是关于小程序的部分面试题，后续会继续更新更多的小程序面试题。希望大家持续关注哟！

黑白颠倒的年华

嘘，低调。