uniapp开发笔记，持续记录

新手上路，记录一下一些细节

1. 字体图标引入：https://uniapp.dcloud.io/frame?id=%e5%ad%97%e4%bd%93%e5%9b%be%e6%a0%87

2. 条件编译：https://uniapp.dcloud.io/platform

3. NPM的使用：https://uniapp.dcloud.io/frame?id=npm%e6%94%af%e6%8c%81

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=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84

10. uniapp 安卓应用开发记录：https://nicen.cn/webapp.html

11.uniapp Vue2.x转Vue3.x：https://uniapp.dcloud.io/tutorial/migration-to-vue3.html 

生命周期

1. 应用生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle
2. 页面生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
3. 组件生命周期：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

 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高，图片会先被设置为默认高度，然后在快速设置为计算出来的高度，也即图片会被快速拉伸， 当两个高度差距比较大时，以及一个页面多处图片使用该模式时候页面加载就会出现闪屏效果。

Image{
    height: auto;
}

在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

如果/deep/报错，可采用::v-deep（/depp/ 、>>>功能是一致的，在scss和less中需要使用/deep/）

.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钩子：

<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

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#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86-pinia

提示

使用 HBuilder X 不需要手动安装，直接使用即可。使用 CLI 需要手动安装，执行 yarn add pinia 或 npm install pinia。

4.页面通讯

页面通讯：https://uniapp.dcloud.net.cn/tutorial/page.html#%E9%A1%B5%E9%9D%A2%E9%80%9A%E8%AE%AF

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