十三、使用拓展组件
13.1、安装uni-ui
pnpm add @dcloudio/uni-ui
13.2、src/pages.json配置
13.3、页面直接使用
验证成功
十四、组件-easycom
14.1、定义组件video-player
src/components/video-player/video-player.vue
规则：目录名/文件名.vue，目录名与文件名需要相同，使用时候直接使用，无需引入
<template> <view>my video</view> </template> <script setup lang="ts"> </script>
14.2、引入使用
src/pages/index/index.vue
<template> <view class="content"> <image class="logo" src="/static/logo.png" /> <video-player></video-player> </view> </template> <script setup lang="ts"> </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } </style>
14.3、验证成功
十五、全局文件
| 序号 | 文件 | 解释 |
| 1 | pages.json |
|
| 2 | manifest.json |
|
| 3 | package.json | uni-app 通过在 |
| 4 | vue.config.js | vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项 |
| 5 | vite.config.js | vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项 |
| 6 | uni.scss |
|
| 7 | app.vue |
|
| 8 | main.js |
|
十六、仿抖音视频播放
利用uniapp中模仿抖音、滑动视频组件、双击点赞、首个视频自动播放_uniapp 抖音_是小橙鸭丶的博客-CSDN博客
十七、tabbar设置数字角标
业务代码：
uni.setTabBarBadge({ //显示数字 index: 1, //tabbar下标 text: '6' //数字 })
| 序号 | 方法 | 理解 |
| 1 | uni.showTabBarRedDot |
显示 |
| 2 | uni.setTabBarBadge |
设置 |
| 3 | uni.removeTabBarBadge |
隐藏 |
十八、uniapp实现分享
十九、页面和路由
小程序只能跳转本地页面。目标页面必须在pages.json中注册。
uni.navigateTo(OBJECT) | uni-app官网
| 序号 | 方法 | 参数 | 描述 |
| 1 | uni.navigateTo(object) | url、animationType、animationDuration、events、success、fail、complete | 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 |
| 2 | uni.redirectTo(object) | url、success、fail、complete | 关闭当前页面，跳转到应用内的某个页面。 |
| 3 | uni.reLaunch(object) | url、success、fail、complete | 关闭所有页面，打开到应用内的某个页面。 |
| 4 | uni.switchTab(object) | url、success、fail、complete | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 |
| 5 | uni.navigateBack(object) | delta、animationType、animationDuration、success、fail、complete | 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。 |
二十、过程记录
记录一
[plugin:vite:css] PostCSS plugin uni-app requires PostCSS 8.
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
解决
yarn add postcss
启动项目，问题解决了。
记录二
解决
project.config.json增加：
"miniprogramRoot": "dist/dev/mp-weixin/",
增加后，项目启动成功。
记录三
微信开发工具，小程序请求接口报错：
- errMsg: "request:fail invalid url "/m-staff-center/api/v1/login/getCurrentAppList""
- errno: 600009
解决
这样就可以了。
记录四
解决
根据提示进行了更新，更新后正常
记录五
Cannot find name 'wx'.ts(2304)
解决
这个错误通常是由于缺少小程序类型声明文件（d.ts）导致的。你需要在项目中引入小程序类型声明文件，解决这个报错问题。
1、安装小程序类型声明文件
npm install -D @types/wechat-miniprogram
2、 在 tsconfig.json 中配置类型声明文件路径，配置如下
{ "compilerOptions": { "types": ["wechat-miniprogram"] } }
3、测试成功，鼠标放上去，出现了正确的提示。
记录六、获取url参数
// 获取url参数 onLoad((option: any)=>{ console.log('54', option) })
记录七、[渲染层网络层错误] Failed to load media
小程序加载视频的时候提示 [渲染层网络层错误] Failed to load media | 微信开放社区
记录八、uniapp应该使用view标签还是使用div标签
使用view
记录九、小程序tabBar iconPath可以使用网络图片吗
记录九、<button>去掉边框
uniapp 微信小程序 button 按钮去除边框_uniapp button 去掉边框_周zerlinda的博客-CSDN博客
记录十、实现锚点连接/锚点跳转
小程序-uniapp：实现锚点连接/锚点跳转_snow@li的博客-CSDN博客
二十一、欢迎交流指正，关注我，一起学习。
