2023 6月份面试题 小程序篇

4,123 阅读4分钟

开始准备面试,在参考了一些大神的总结文章,结合自己收集的一些其他资料,汇总并整理了一份自己的复习资料

1.uniapp进行条件编译的两种方法?小程序端和H5的代表值是什么?

通过 #ifdef、#ifndef 的方式 H5 : H5 MP-WEIXIN : 微信小程序

2.uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分

3.uniapp上传文件时用到api是什么 格式是什么?

js
复制代码
	uni.uploadFile({
   		url: '要上传的地址',
       		fileType:'image',
        		filePath:'图片路径',
        		name:'文件对应的key',
        		success: function(res){
			console.log(res)
		},
       })

4.uniapp获取地理位置的API是什么?

uni.getLocation

5.rpx、px、em、rem、%、vh、vw的区别是什么?

rpx 相当于把屏幕宽度分为750份,1份就是1rpx

px 绝对单位,页面按精确像素展示

em 相对单位,相对于它的父节点字体进行计算

rem 相对单位,相对根节点html的字体大小来计算

% 一般来说就是相对于父元素

vh 视窗高度,1vh等于视窗高度的1%

vw 视窗宽度,1vw等于视窗宽度的1%

6.uniapp如何监听页面滚动?

使用 onPageScroll 监听

7.如何让图片宽度不变,高度自动变化,保持原图宽高比不变?

给image标签添加 mode='widthFix'

8.uni-app的优缺点

优点:

css
复制代码
a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
c. 拓展能力强
d. 使用HBuilderX开发,支持vue语法
e. 突破了系统对H5条用原生能力的限制
    

缺点:

css
复制代码
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差
e. 文件命名受限

@小程序的性能优化

开启代码压缩

  • 上传代码时勾选开发者工具中“压缩代码”选项;

处理静态资源

  • 预先对图片、视频等静态资源进行物理压缩,推荐大家一个在线压缩图片的网站 TinyPNG
  • 能使用CDN服务的图片视频等就尽量不要打到代码包中;

对页面进行分包


@小程序的微信授权流程

  • 什么是小程序的微信授权流程?说人话:用微信账号登录自家服务器
  • 在小程序端wx.login()得到登录码code
  • 小程序请求自家的登录接口,携带登录码code
  • 自家服务器请求微信服务器,使用appid+appSecret+code换回session_key与openid
  • 自家服务器将session_key与openid重新换算为自家的登录信息(如token)
  • 小程序在后续请求自家服务器的过程中都携带该token,自家服务器就知道小程序端已经登录过了 参考链接

b60638c0-3428-11ec-a752-75723a64e8f5.png


@微信支付流程

  • 用户点击下单;
  • 调用wx.login 获取临时登录凭证code,发送到后端换取openId
  • 商品信息(id、数量等)+ 用户的openId一并通过购买接口发送服务端;
  • 服务器综合以上信息生成订单+签名(根据微信支付SDK要求生成),向微信支付后台发送支付请求,获取其返回的预付款订单id(prepay_id),同时再次根据微信支付SDK要求生成预付款订单签名,二者一并响应给小程序端;
  • 小程序端调用wx.requestPayment()发起微信支付,此时微信内部的支付窗口被唤醒,用户输入支付密码或指纹;
  • 微信支付后台处理支付,将结果同时推送给小程序端和我们自己的服务端;

image.png


@多端打包流程

参考 uni-app卖座电影多端开发纪实(六):多端打包


@微信小程序的发布流程

  • 在uni-app端完成微信小程序的打包;
  • 在微信开发者工具中将代码上传到微信公众平台,形成体验版;
  • 测试人员根据扫描体验版二维码进行最后的测试工作;
  • 测试通过后,点击提交审核,进入审核流程,通常24小时就能出结果;
  • 审核通过后,用户即可通过维系小程序搜索到我们的小程序;同时我们还可以在微信公众平台生成小程序的葵花码,交给推广人员进行推广;

这两天逛github,突然发现了一个超级好用的前端工具库,适用用目前的vue uniapp诸多类型的项目,里面封装了超多工具函数,简单导出就可以用

我把github地址贴下面,有需要的可以去看看,并且库作者也在号召大家一起编写

省流地址