记录uniapp开发项目的问题（一）

创建项目

• 打开hbuilderX–文件–新建–项目
• 选择uniapp-UI模块，选择vue3版本

启动运行

• 微信小程序运行报错
• 报错信息：提示没有app.json文件
• 解决代码：去project.config.json中加入以下代码
• 代码如示：“miniprogramRoot”：“./unpackage/dist/dev/mp-weixin”
• 保存重新运行，即可解决

Uniapp封装自定义组件

• 局部注册：引入组件（注意：注册组件需要写在最前面要不然会报错）
• 报错信息：[Vue warn]: Unhandled error during execution of async component loader

<script>
//引入使用
	import myTabbar from '../../components/myTabbar.vue';
	export default {
		components:{
			myTabbar
		},
		data() {
			return {}
		},
	}
</script>

• 全局注册组件

//如果是Vue3版本的话
// #ifdef VUE3
import { createSSRApp } from 'vue'
import myTabbar from "./components/myTabbar.vue"
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  //全局注册
  app.component("myTabbar",myTabbar)
  
  return {
    app
  }
}
// #endif

自定义tabbar栏，如何跳转页面？

• 首先，去pages.json里把pages配置好,页面添加好。
• 其次，配置tabbar每一项的数据

{
		id:'1',
		path:"/pages/detail/index", 
		icon:'',
		text:"明细",
		midButton:false
		注意：这里不要写“pages/detail/index”，一定要写"/pages"开头
		 要不然当前的url地址会和你传递过来的url地址重合
		 就会变成这样“/pages/mine/index/pages/detail/index”
},
//点击tabbar栏事件 进行跳转
	const onClick = (item)=>{
	//切换样式
		activedIndex.value = item.id
		uni.navigateTo({
			url:item.path
		})
	}
注意：这里不能使用switchTab，只能使用navigateTo，因为
我们这个是自定义的tab，并没有配置path路径，只配置了pages的路径

取消uniapp自带的导航栏

• 全局：“globalStyle”:{“navigationStyle”:“custom”}
• 单页面：“style”:{“navigationStyle”:“custom”}

uniapp中如何使用阿里巴巴多色图标

https://www.cnblogs.com/caijinghong/p/13432906.html

uniapp中Vue3如何获取dom节点

引入
import {getCurrentInstance,} from 'vue';
vue这里没有this所以使用getCurrentInstance
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance);
query.select('.selfnodes').boundingClientRect(data => {
	if (data) {
	console.log("获取到布局信息", data);
	}
}).exec();

uniapp不要轻易这样写‘@touchstart.stop=“”’，这样用户就不能滑动屏幕了