前端uniapp知识点总结

最新推荐文章于 2024-04-16 17:40:30 发布

努力学习的廖同学

最新推荐文章于 2024-04-16 17:40:30 发布

阅读量230

点赞数 1

文章标签：前端 uni-app

本文链接：https://blog.csdn.net/m0_56770663/article/details/134896669

版权

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

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

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

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

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

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、分包注意点

分包有这么几个注意点：

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

4.3、分包的性能提升

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

减少首次加载时间：小程序的初始加载时间对用户体验至关重要。通过分包，可以将主包中的核心代码和页面进行拆分，使得用户在打开小程序时只需下载主包的内容，从而减少了首次加载的时间。
按需加载：分包可以根据用户的实际需求进行加载，而不是一次性加载所有的代码和资源文件。这样可以减少小程序的总体体积，提高加载速度，并降低用户流量消耗。
优化页面切换速度：分包可以使得小程序在页面切换时更加快速和流畅。当用户进入一个新的页面时，只需加载该页面所属的子包，而不需要重新加载整个小程序。
提高开发效率：分包可以使得开发团队更好地进行模块化开发和维护。不同的开发人员可以独立开发和管理各自负责的子包，减少代码冲突和合并的复杂性。
灵活部署和更新：通过分包，可以将小程序的不同功能或页面独立部署和更新。这样，当小程序的某个功能或页面需要进行修改或优化时，只需更新对应的子包，而不需要重新发布整个小程序。

4.4、分包流程

1、在 app.json 中配置路径

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

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

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、小程序的全局方法

下拉刷新：onPullDownRefresh
触底更新：onReachBottom()
右上角分享：onShareAppMessage
页面滚动：onPageScroll
分享到朋友圈：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有遇到一些兼容性问题吗？

布局兼容性：不同平台的屏幕尺寸和分辨率可能存在差异，因此在进行布局时需要考虑不同平台的适配性。uni-app 提供了一些适配方案，如使用百分比布局、flex 布局和 rpx 单位等，可以根据需求选择合适的方案进行布局。
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、小程序的微信授权登录流程

在微信开发者平台注册小程序并获取到 AppID。
在 uni-app 项目中，使用 uni.login 方法获取到用户的临时登录凭证 code。
调用微信小程序的 wx.login 方法，将获取到的 appid , appsecret 和 code 发送给后端服务器。
后端服务器使用微信提供的接口，通过 appid , appsecret 和 code 换取用户的 openid 和 session_key。后端从数据库中查找 openid ，如果有记录，后端服务器将获取到的 openid 和 session_key 返回给前端。如果没有查到记录，说明该用户没有注册，数据库返回错误信息给后端，后端返回错误信息给前端。对于每个小程序，微信都会将用户的微信ID映射出一个小程序 openid，作为这个用户在这个小程序的唯一标识
前端用户获取 openid 和 session_key后，可以将其存储在本地，用于后续的登录验证。

<template>
  <view>
    <button @tap="login">微信授权登录</button>
  </view>
</template>

<script>
export default {
  methods: {
    login() {
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          if (loginRes.code) {
            // 登录成功，获取到临时登录凭证 code
            const code = loginRes.code;
            // 调用后端接口进行登录验证和获取用户信息
            this.getUserInfo(code);
          } else {
            console.log('登录失败！' + loginRes.errMsg);
          }
        },
        fail: (error) => {
          console.log('登录失败！' + error.errMsg);
        }
      });
    },
    getUserInfo(code) {
      uni.getUserInfo({
        provider: 'weixin',
        success: (res) => {
          const userInfo = res.userInfo;
          // 将 code 和 userInfo 发送给后端服务器进行登录验证和处理
          // ...
        },
        fail: (error) => {
          console.log('获取用户信息失败！' + error.errMsg);
        }
      });
    }
  }
}
</script>

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

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

18、微信发布流程

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

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

努力学习的廖同学

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端uniapp知识点总结

通过条件注释来为不同平台设置不同的代码：实现跨端兼容。条件注释是以 #ifdef 或 #ifndef 加平台代值开头，以 #endif 结尾uni-app分和编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。编译器分vue2版和vue3版，vue2版：基于实现，vue3版：基于实现，性能更快。创建以 typescript 开发的工程，使用Vue3/Vite版 1.vue.con
复制链接

扫一扫