新手上路，记录一下一些细节
1. 字体图标引入：https://uniapp.dcloud.io/frame?id=字体图标
2. 条件编译：https://uniapp.dcloud.io/platform
3. NPM的使用：https://uniapp.dcloud.io/frame?id=npm支持
4. 各种小程序端的类wxs：https://uniapp.dcloud.io/frame?id=wxs
5. 在HBuilderX新建uni-app项目的模板中，选择uni-ui模板，由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
6. uniapp演示：https://hellouniapp.dcloud.net.cn/pages/component/view/view
7. uniapp程序的生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle
8. uniapp组件：https://uniapp.dcloud.io/vue-components
9. uniapp目录结构：https://uniapp.dcloud.io/frame?id=目录结构
10. uniapp 安卓应用开发记录：https://nicen.cn/webapp.html
11.uniapp Vue2.x转Vue3.x：https://uniapp.dcloud.io/tutorial/migration-to-vue3.html
生命周期
- 应用生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle
- 页面生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
- 组件生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
App_onLauch -> App_onShow -> Vue_setup -> Page_onLoad -> Page_onReady -> Vue_onMouted ->Page_onShow
工作记录
uni-ui模板在HBuilderX新建uni-app项目的模板中，选择uni-ui模板，由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
web-view官方文档：https://uniapp.dcloud.net.cn/component/web-view?id=web-view，web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面
自定义vite配置文件：https://uniapp.dcloud.io/collocation/vue-config.html
代码语言：javascript复制 import { defineConfig} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
base: 'https://static-xxxx.bspapp.com/',
plugins: [
uni(),
],
build:{
assetsDir:"public/static/app"
}
})自定义导航栏：https://uniapp.dcloud.io/collocation/pages.html#style
uniapp使用plus：https://uniapp.dcloud.io/use-html5plus
Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88
uniapp在data内使用plus存在偶发undefined的问题，可以放到onload内 。
问题集锦
如果要跳转的路径在pages.json里面的tabBar里面跳转需要使用uni.switchTab进行跳转，使用navigateTo将会无反应。
Uniapp中的App组件中的globalData是普通的全局变量，不是响应式的。
uni-app 除了支持Vue实例的生命周期，还支持应用生命周期 (opens new window)以及页面生命周期 (opens new window)。
@开头的绝对路径以及相对路径会经过base64转换规则校验
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
uniapp中可以直接使用npm导入Js包。
uniapp中使用vue的mixin可以在static文件夹中单独定义Js，用于引入需要混入的对象。
export导出一个对象（必须是声明的变量，如const声明，或者直接默认default的对象）
图片闪烁的问题：image使用mode="widthFix"模式后，只要设置图片宽度，就会根据宽高比例自动换算设置图片高度， 以及image有个默认属性值height为225px，当系统自动计算出图片高度前，如果不设置image高，图片会先被设置为默认高度，然后在快速设置为计算出来的高度，也即图片会被快速拉伸， 当两个高度差距比较大时，以及一个页面多处图片使用该模式时候页面加载就会出现闪屏效果。
代码语言：javascript复制Image{
height: auto;
}在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如
代码语言：javascript复制.conBox /deep/ .el-input__inner{
padding:0 10px;
}如果/deep/报错，可采用::v-deep（/depp/ 、>>>功能是一致的，在scss和less中需要使用/deep/）
代码语言：javascript复制.conBox ::v-deep .el-input__inner{
padding:0 10px;
}uniapp使用Vue3.x时不支持suspense标签，setup无法使用async修饰。
Uniapp开发遇到的登录的问题
网络请求都是异步的，但是某些页面必须登录加载数据之后才能显示。
过程大概是这样：登录 -> 通过cookie请求数据 -> 初始化 -> 显示页面
因为所有页面都需要登录状态，所以登录的逻辑放在App.vue的onLauch生命周期中（初始化一些系统配置、用户数据之类的，保存在Vuex中）。
页面数据往往是这个页面独有，请求逻辑在这个页面的生命周期里（onShow、onLoad、onReady）
在异步的逻辑下，页面请求往往在登录状态还未完成时就开始了，可以用过watch监视登录的状态，从而进行下一步请求。
uniapp Vue2.x 到Vue3.x迁移
1.组合式API
Vue组件生命周期的组合式API钩子：
代码语言：javascript复制<script setup>
import {onLoad,onShow } from "@dcloudio/uni-app";
// onLoad 接受 A 页面传递的参数
onLoad((option) => {
console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
});
onShow(() => {
console.log("B 页面 onShow");
});
</script>组件的生命周期钩子：与Vue3语法相同
2.小程序调试开启sourcemap
代码语言：javascript复制import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
/**
* @type {import('vite').UserConfig}
*/
export default defineConfig({
build: {
sourcemap: true,
},
plugins: [uni()],
});3.uniapp使用pinia
官方文档：https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html#状态管理-pinia
提示
使用 HBuilder X 不需要手动安装，直接使用即可。使用 CLI 需要手动安装，执行 yarn add pinia 或 npm install pinia。
4.页面通讯
页面通讯：https://uniapp.dcloud.net.cn/tutorial/page.html#页面通讯
5.请求拦截器
拦截器：https://uniapp.dcloud.net.cn/api/interceptor.html
6.应用级事件
应用级事件：https://uniapp.dcloud.net.cn/api/application.html
字节小程序
1. ttml
- createSelectorQuery方法返回一个 SelectorQuery 的实例，该实例上有 select、 selectViewport 等方法用于选择页面节点或显示区域。该 API 需要在 DOM 加载成功后使用，使用场景：进入页面时获取节点对象实例，在 Page.onReady 中使用、通过 setData 切换组件状态后获取节点实例，在 setData 回调中使用；
var image = new Image();
image.src="/images/head.jpeg";
image.onload=function(){
ctx.drawImage(this,0,0,60,60,0,0,120,120);
}2. getUserInfo
需要在触发事件的节点上加上data-sync；才能成功触发API
使用Vant
官方说明：https://ext.dcloud.net.cn/plugin?id=100
