开始准备面试,在参考了一些大神的总结文章,结合自己收集的一些其他资料,汇总并整理了一份自己的复习资料
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服务的图片视频等就尽量不要打到代码包中;
对页面进行分包
- 主包只打首页等高频页面;
- 用户可能不会访问的页面分模块打到子包中,如果用户果然不访问这些页面,就不会对这些分包进行下载了;
- 分包配置请参考 uni-app卖座电影多端开发纪实(六):多端打包 / 分包配置
@小程序的微信授权流程
- 什么是小程序的微信授权流程?说人话:用微信账号登录自家服务器
- 在小程序端wx.login()得到登录码code
- 小程序请求自家的登录接口,携带登录码code
- 自家服务器请求微信服务器,使用appid+appSecret+code换回session_key与openid
- 自家服务器将session_key与openid重新换算为自家的登录信息(如token)
- 小程序在后续请求自家服务器的过程中都携带该token,自家服务器就知道小程序端已经登录过了 参考链接
@微信支付流程
- 用户点击下单;
- 调用
wx.login
获取临时登录凭证code
,发送到后端换取openId
; - 将
商品信息(id、数量等)+ 用户的openId
一并通过购买接口发送服务端; - 服务器综合以上信息
生成订单+签名
(根据微信支付SDK要求生成),向微信支付后台发送支付请求,获取其返回的预付款订单id(prepay_id)
,同时再次根据微信支付SDK要求生成预付款订单签名
,二者一并响应给小程序端; - 小程序端调用
wx.requestPayment()
发起微信支付,此时微信内部的支付窗口被唤醒,用户输入支付密码或指纹; - 微信支付后台处理支付,将结果同时推送给小程序端和我们自己的服务端;
@多端打包流程
@微信小程序的发布流程
- 在uni-app端完成微信小程序的打包;
- 在微信开发者工具中将代码上传到微信公众平台,形成体验版;
- 测试人员根据扫描体验版二维码进行最后的测试工作;
- 测试通过后,点击提交审核,进入审核流程,通常24小时就能出结果;
- 审核通过后,用户即可通过维系小程序搜索到我们的小程序;同时我们还可以在微信公众平台生成小程序的葵花码,交给推广人员进行推广;
这两天逛github,突然发现了一个超级好用的前端工具库,适用用目前的vue uniapp诸多类型的项目,里面封装了超多工具函数,简单导出就可以用
我把github地址贴下面,有需要的可以去看看,并且库作者也在号召大家一起编写