前端uniapp知识点总结

1、谈谈你对uni-app的理解

  1. uni-app是一个使用Vue.js开发所有前端应用的框架,真正做到一套代码多端发行。开发者编写一套代码,可以发布到IOS、Android、Web(响应式)、以及各种小程序、快应用等多个平台。
  2. Uniapp中,使用Vue.js的语法开发,配合小程序的组件和API,兼容 Weex微信小程序原生渲染。
  3. 页面文件遵循vue单文件组件,组件标签靠近小程序规范(view 视图容器,icon 图标,text 文本组件),接口能力(JS API)靠近小程序规范,但需将前缀 wxmy 等替换为 uni
  4. 数据绑定及事件处理同 Vue.js 规范,同时补充了应用生命周期及页面的生命周期
  5. Uniapp工程中可用的构建模式有:开发模式、生产模式、H5模式、跨平台模式等。

2、uni中如何为不同的平台设置不同的代码(需补充)

通过条件注释来为不同平台设置不同的代码:实现跨端兼容。条件注释是以 #ifdef 或 #ifndef 加平台代值开头,以 #endif 结尾

前端uniapp知识点总结_第1张图片

uni-app分编译器运行时(runtime),编译器将开发者的代码进行编译,编译的输出物由各个终端的runtime进行解析,每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime。

编译器分vue2版和vue3版,vue2版:基于webpack实现,vue3版:基于Vite实现,性能更快。

  • 在web平台,将.vue文件编译为js代码。与普通的vue cli项目类似
  • 在微信小程序平台,编译器将.vue文件拆分生成wxml、wxss、js等代码
  • 在app平台,将.vue文件编译为js代码。进一步,如果涉及uts代码

3、创建项目

创建以 typescript 开发的工程,使用Vue3/Vite版

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

 前端uniapp知识点总结_第2张图片

 1.vue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被自动加载,一般用于配置 webpack 等编译选项, 

2.vite.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被自动加载,一般用于配置 vite 的编译选项 

3.manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、appid权限,分包等

{
"appid": "__UNI__XXXXXX,创建应用时云端分配的,不要修改。",
    "name": "应用名称,如uni-app",
    "description": "应用描述",
    "versionName": "1.0.0",
"app-plus": {
  "optimization": {
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后,必须配置资源释放模式
}
}

4. pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

4、 pages.json 文件中加载配置subPackages分包

4.1、分包与限制

subPackages分包加载配置,此配置为小程序的分包加载机制。微信小程序每个分包的大小是2M,总体积一共不能超过20M。

4.2、分包注意点

分包有这么几个注意点:

  1. 使用 subpackages 进行分包路径声明,subpackages 配置路径外的目录会被打包到主包中
  2. tabBar 里配置的路径必须放在主包里
  3. 不同的分包之间的资源不能相互引用,但都可引用主包中的资源

4.3、分包的性能提升

小程序分包是将小程序的代码和资源文件按照功能或页面进行拆分,分别打包成不同的子包。分包的主要目的是优化小程序的加载速度和性能,提升用户体验。以下是分包的一些好处:

  1. 减少首次加载时间:小程序的初始加载时间对用户体验至关重要。通过分包,可以将主包中的核心代码和页面进行拆分,使得用户在打开小程序时只需下载主包的内容,从而减少了首次加载的时间。

  2. 按需加载:分包可以根据用户的实际需求进行加载,而不是一次性加载所有的代码和资源文件。这样可以减少小程序的总体体积,提高加载速度,并降低用户流量消耗。

  3. 优化页面切换速度:分包可以使得小程序在页面切换时更加快速和流畅。当用户进入一个新的页面时,只需加载该页面所属的子包,而不需要重新加载整个小程序。

  4. 提高开发效率:分包可以使得开发团队更好地进行模块化开发和维护。不同的开发人员可以独立开发和管理各自负责的子包,减少代码冲突和合并的复杂性。

  5. 灵活部署和更新:通过分包,可以将小程序的不同功能或页面独立部署和更新。这样,当小程序的某个功能或页面需要进行修改或优化时,只需更新对应的子包,而不需要重新发布整个小程序。

4.4、分包流程

1、在 app.json 中配置路径

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
	"subpackages": [
    {
      "root": "pages/packageA",
      "pages": [
        "child/child",
        "parent/parent"
      ]
    }
  ],
}

2、保存页面后,生成对应的文件目录

前端uniapp知识点总结_第3张图片

3、 更改项目中使用的路径

原本

gotoChild() {
    wx.navigateTo({
      url: '/pages/child/child',
    })
}

需要更改成最新路径后

gotoChild() {
    wx.navigateTo({
      url: '/pages/packageA/child/child',
    })
}

5、uni支持的文件类型

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug

6、uniapp中封装接口请求相较于微信小程序有什么要注意的

uniapp和微信小程序都提供了网络请求API(uni.request(OBJECT) 和 wx.request(object)),但 uniapp 为了实现跨端兼容,需要注意网络请求跨域问题,微信小程序不用考虑多端兼容,也不会出现跨域问题。

uniapp中的跨域问题依然可以通过在 vue.config.js 中配置Proxy代理解决;

devServer ——> proxy ——> changeOrigin: true, //是否跨域

8、描述一下在Uniapp中,组件和页面的区别

在Uniapp中,页面和组件的区别在于,页面是一个具体的应用页面,拥有独立的路由地址和生命周期函数,而组件是应用页面中的局部组件,包含在页面中,没有独立的路由地址和生命周期函数。

9、uni-app中的生命周期

9.1、应用生命周期

onLanuch – uni-app 初始化完成时触发(全局只触发一次)
onShow – uni-app启动,或从后台进入前台显示
onHide – uni-app从前台进入后台
onError – 当uni-app 报错时触发
onUNiNViewMessage – 对 nvue 页面发送的数据进行监听
onUnhandledRejection – 对未处理的Promise拒绝事件监听函数
onPageNotFound – 页面不存在监听函数
onThemeChange – 监听系统主题变化

 9.2、页面生命周期

onInit – 监听页面初始化,参数同onLoad参数,为上个页面传递的数据,参数类型为Object,触发时机早于onLoad
onLoad – 监听页面加载,其参数为上个页面传递的数据,参数类型为Object
onShow – 监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面返回露出当前页面
onReady – 监听页面初次渲染
onHide – 监听页面隐藏
onUnload – 监听页面隐藏
onResize – 监听窗口尺寸变化

 9.3、vue组件的生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

9.4、小程序的全局方法

  1. 下拉刷新:onPullDownRefresh

  2. 触底更新:onReachBottom()

  3. 右上角分享:onShareAppMessage

  4. 页面滚动:onPageScroll

  5. 分享到朋友圈:onShareTimeline

10、uni-app 中的本地缓存

同步存储:uni.setStorageSync(key,value),获取:uni.getStorageSync(key,value)。

异步存储:uni.setStorage(OBJECT),获取:uni.getStorage(OBJECT)。拥有回调函数。

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

移除一个:uni.removeStorage(OBJECT)

清除所有:uni.clearStorage()

11、uni-app路由与跳转 

uni.navigateTo 跳转页面
uni.redirect 销毁当前页跳转到指定页面
uni.switchTab 跳转至tab页面
uni,reLaunch 销毁所有页面跳转至指定页面
uni.navigateBack 返回上一页
exit 退出小程序,target = "miniProgram"时生效

12、描述一下在Uniapp中如何实现动态路由。

在Uniapp中,可通过vue-router实现动态路由。具体实现方式是,在定义路由时,使用动态路由参数设置路由的路径,然后在组件中通过$route.params来获取路由参数,以便进行页面的动态渲染。

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

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

给image标签添加 mode='widthFix'

14、用uniapp有遇到一些兼容性问题吗?

  1. 布局兼容性:不同平台的屏幕尺寸和分辨率可能存在差异,因此在进行布局时需要考虑不同平台的适配性。uni-app 提供了一些适配方案,如使用百分比布局、flex 布局和 rpx 单位等,可以根据需求选择合适的方案进行布局。

  2. API 兼容性:不同平台对于原生 API 的支持程度可能有所不同。在使用 uni-app 提供的 API 或调用原生 API 时,需要注意查阅官方文档,了解各个平台的差异和兼容性情况。例如在微信小程序中,uni.getLocation 方法返回的结果包含经度(longitude)和纬度(latitude)信息,可以直接使用。但在 H5 平台中,由于浏览器的限制,uni.getLocation 方法可能需要用户授权,并且返回的结果可能包含更多的信息,如精度、海拔等。

15、回跳了两层页面

要实现a页面跳转到b页面,再从b页面跳转到c页面,c页面返回只能返回到a,不能返回到b页面,可以使用uni.navigateBack({delta: 2})方法,其中delta表示返回的页面层数。

16、小程序的微信授权登录流程

前端uniapp知识点总结_第4张图片

  1. 在微信开发者平台注册小程序并获取到 AppID。

  2. 在 uni-app 项目中,使用 uni.login 方法获取到用户的临时登录凭证 code。

  3. 调用微信小程序的 wx.login 方法,将获取到的 appid , appsecret 和 code 发送给后端服务器。

  4. 后端服务器使用微信提供的接口,通过 appid , appsecret 和 code 换取用户的 openid 和 session_key。后端从数据库中查找 openid ,如果有记录,后端服务器将获取到的 openid 和 session_key 返回给前端。如果没有查到记录,说明该用户没有注册,数据库返回错误信息给后端,后端返回错误信息给前端。对于每个小程序,微信都会将用户的微信ID映射出一个小程序 openid,作为这个用户在这个小程序的唯一标识

  5. 前端用户获取 openid 和 session_key后,可以将其存储在本地,用于后续的登录验证。



17、微信小程序的支付流程

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

前端uniapp知识点总结_第5张图片

18、微信发布流程

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

参考:面试官:说说微信小程序的登录流程? | web前端面试 - 面试官系列

你可能感兴趣的:(前端,uni-app)