欢迎来到我的UniApp技术专栏！🎉 在这里，我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。
专栏特色：
- 📱 跨平台开发一站式解决方案
- 🚀 从入门到精通的完整学习路径
- 💡 实战项目经验分享
- 🔍 常见问题深度解析
无论你是刚接触UniApp的新手，还是有一定经验的开发者，都能在这里找到有价值的内容。我将持续更新最新技术动态和开发技巧，帮助大家提升开发效率，打造高质量的跨平台应用。
如果文章对你有帮助，别忘了点赞收藏🌟，也欢迎在评论区留言交流，我会及时回复大家的问题！
让我们一起探索UniApp的无限可能！💪
目录
一.uniapp如何创建页面?
第一步：右击pages目录，点击新建页面
第二步：分别给新页面文件起名、创建同名目录、设置页面标题
第三步：查看项目结构，可见pages目录下，多出了newPage01/newPage01.vue的文件
第四步：运行项目，访问路径pages/newPage01/newPage01
第五步：如果想更改页面标题，可以去pages.json文件中修改，如下：
二.uniapp页面的基本组成
uniapp页面的基本组成，和vue的一致，但是有以下几点注意事项：
注意：在template中，编写代码时，不要使用div、h1这样的标签，因为这样只能实用与h5和电脑web网页，而不兼容微信小程序和手机app，因此要使用view这样的官方推荐标签。
三.view和text常用视图容器组件
1.view组件（相当于vue中的div）
常用属性如下：
举例1：
<template>
<view class="box" hover-class="boxHover" hover-start-time="0" hover-stay-time="0">
view布局标签
</view>
</template>
<script setup>
</script>
<style lang="scss">
.box{
width: 200px;
height: 200px;
background: #ccc;
}
//按下view时的css样式
.boxHover{
background-color: orange;
}
</style>运行效果：
注意：由于我们的hover-start-time和hover-stay-time都设置为了0毫秒，所以当我们点击时，效果立刻产生；松开时，效果立刻消失，没有任何延迟。
举例2：hover-stop-propagation属性用来拦截祖先节点的按下样式，如下：
- 没使用hover-stop-propagation属性时
<template>
<view class="box" hover-class="boxHover" hover-start-time="0" hover-stay-time="0">
<view class="box1" hover-class="boxHover1" hover-start-time="0" hover-stay-time="0">内部元素</view>
</view>
</template>
<script setup>
</script>
<style lang="scss">
.box{
width: 200px;
height: 200px;
background: #ccc;
}
.box1{
width:100px;
height:100px;
background: green;
}
//按下view时的css样式
.boxHover{
background-color: orange;
}
//按下view时的css样式
.boxHover1{
background-color: pink;
}
</style>
效果如下：
- 使用hover-stop-propagation属性后
效果如下：
2.text组件（相当于vue中的span）
常用属性如下：
举例：
<template>
<text selectable="true">你好，uniapp！</text>
</template>
<script setup>
</script>
<style lang="scss">
</style>
该代码，表示“你好，uniapp！”这段文字，可以通过长按屏幕，选中。
效果如下：
以上就是本篇文章的全部内容，喜欢的话可以留个免费的关注呦~