uniapp开发笔记，持续记录

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

5. 在HBuilderX新建uni-app项目的模板中，选择uni-ui模板，由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。

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

生命周期

App_onLauch  ->  App_onShow  ->   Vue_setup  ->  Page_onLoad  ->  Page_onReady  ->  Vue_onMouted  ->Page_onShow

工作记录

 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"
	}
 })

问题集锦

Image{
    height: auto;
}

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

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

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

4.页面通讯

5.请求拦截器

6.应用级事件

字节小程序

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

3.使用Vant

4.provide和inject

目前字节跳动小程序的组件父子关系初始化较晚，在setup阶段，还没有初始化父子关系，导致无法正常使用provide/inject，
临时解决方案，可以使用 options 方式定义 inject 或延迟获取。

/* 生命周期 */
onMounted(() => {
	app.data = inject("app"); //引入舞台
});
const app = shallowReactive({
		data: null
            }); //应用

5.其他配置

虚拟化组件节点：默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 class style 、动画、 flex 布局等，就如同普通的 view 组件节点一样。

<script>
export default {
  options: {
    virtualHost: true
  }
}
</script>