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

4

主题

6

帖子

16

积分

新手上路

Rank: 1

积分
16
发表于 2022-11-30 09:55:14 | 显示全部楼层
随便打开一个招聘网站,你会发现市场对于小程序的需求还是蛮高的,有些公司可能就只需要写小程序的前端人员。故此,有了这样一篇小程序面试题的总结。
整理了关于小程序面试常问的一些面试题,分享给大家。


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[]=')
}
以上就是关于小程序的部分面试题,后续会继续更新更多的小程序面试题。希望大家持续关注哟!
回复

举报 使用道具

3

主题

8

帖子

16

积分

新手上路

Rank: 1

积分
16
发表于 3 天前 | 显示全部楼层
嘘,低调。
回复

举报 使用道具

您需要登录后才可以回帖 登录 | 立即注册
快速回复 返回顶部 返回列表