【UniApp】-uni-app-内置组件
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231203180504867-1012273609.png" alt="" loading="lazy"></p><h1 id="前言">前言</h1>
<ul>
<li>好，经过上个章节的介绍完毕之后，了解了一下 uni-app-全局数据和局部数据</li>
<li>那么了解完了uni-app-全局数据和局部数据之后，这篇文章来给大家介绍一下 UniApp 中内置组件</li>
<li>首先不管三七二十一，先来新建一个项目</li>
</ul>
<h1 id="搭建演示环境">搭建演示环境</h1>
<p>创建一个全新的项目：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231208000736578-1045087029.png" alt="" loading="lazy"></p>
<p>然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 <code>manifest.json</code> 文件，然后选择微信小程序配置，复制一下即可：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231208000903773-1529342857.png" alt="" loading="lazy"></p>
<ul>
<li>经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境</li>
</ul>
<h1 id="步入正题">步入正题</h1>
<ul>
<li>好，我们的基本内容都已经准备完毕，我们来看 UniApp 的内置组件</li>
<li>打开官方文档：组件使用的入门教程 | uni-app官网 (dcloud.net.cn)</li>
<li>在官方文档当中有一个组件，点击组件按钮进入组件页面</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231208001145965-735679241.png" alt="" loading="lazy"></p>
<ul>
<li>可以看到在左侧的菜单中，有非常多的分类不同类型对应不同场景的组件</li>
<li>这些组件大家都不需要记，就和之前 Vue, 微信小程序, 饿了么UI 一样，用到谁，直接回到文档中查询一下即可</li>
<li>看一下他的文档，文档里面一般都会有示例，直接将示例程序拷贝到你们的项目中看一下改改就好，好了我就不废话了，直接来看看怎么使用</li>
</ul>
<h2 id="view">view</h2>
<ul>
<li>视图容器</li>
<li>它类似于传统 html 中的 div，用于包裹各种元素内容</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<view>我是view组件</view>
</view>
</template>
<script>
// index.vue
export default {}
</script>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231208002241093-1132794915.png" alt="" loading="lazy"></p>
<h2 id="text">text</h2>
<ul>
<li>文本组件，用于包裹文本内容</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<text>我是text组件</text>
</view>
</template>
<script>
// index.vue
export default {}
</script>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231208002518637-1981578328.png" alt="" loading="lazy"></p>
<h2 id="button">button</h2>
<ul>
<li>按钮</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<button type="default">default button</button>
<button type="primary">primary button</button>
<button type="warn">warn button</button>
</view>
</template>
<script>
// index.vue
export default {}
</script>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231208002744288-176294538.png" alt="" loading="lazy"></p>
<blockquote>
<p>注意点：</p>
</blockquote>
<ol>
<li>默认情况下 UniApp 的内置组件已经做好了适配，运行在不同平台上会自动转换成对应平台的组件</li>
<li>所以虽然在 UniApp 中也可以直接编写 HTML 代码，使用 HTML 元素，但是 <code>不推荐</code>，因为 HTML 元素 UniApp 是没有做适配的，可能在不同平台上运行会出现未知问题</li>
</ol>
<ul>
<li>所以你要用就用 UniApp 提供的组件，而不要去使用 HTML 元素</li>
</ul>
<blockquote>
<ul>
<li>来看一下注意点的第一点，<code>运行在不同平台上会自动转换成对应平台的组件</code>，在演示 button 组件的时候我们编写了 <code><button type="primary">primary button</button></code> 这么一行代码，但是在 H5 运行显示的是蓝色</li>
</ul>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209001157946-936204191.png" alt="" loading="lazy"></p>
<ul>
<li>但是呢运行在微信小程序当中显示的是绿色，这就是 UniApp 自动转换成对应平台的组件</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209001302521-664952579.png" alt="" loading="lazy"></p>
<ul>
<li>运行在手机上显示的是蓝色</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209001629076-990952051.png" alt="" loading="lazy"></p>
<h2 id="image">image</h2>
<ul>
<li>图片组件，用于显示图片</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<!--
图片素材大家自行去替换自己的
-->
<!--
相对路径
-->
<image src="../../static/01.jpg"/>
<!--
绝对路径
-->
<image src="@/static/01.jpg"/>
</view>
</template>
<script>
// index.vue
export default {}
</script>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209001948329-2055518486.png" alt="" loading="lazy"></p>
<h2 id="scroll-view">scroll-view</h2>
<ul>
<li>可滚动视图区域。用于区域滚动，常用于聊天记录，商品列表等</li>
<li>需注意在webview渲染的页面中，区域滚动的性能不及页面滚动</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<scroll-view class="scrollViewByThis" scroll-y="true">
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
<view>A</view>
</scroll-view>
</view>
</template>
<script>
// index.vue
export default {}
</script>
<style lang="scss" scoped>
.scrollViewByThis {
width: 100%;
height: 150rpx;
border: 1px solid red;
}
</style>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209003204352-1366093032.gif" alt="" loading="lazy"></p>
<ul>
<li>其实非常的简单，就是查看官方文档，然后将示例代码拷贝到你们的项目中，然后改改就好了</li>
</ul>
<h2 id="swiper">swiper</h2>
<ul>
<li>滑块视图容器</li>
<li>一般用于左右滑动或上下滑动，比如 banner 轮播图</li>
</ul>
<blockquote>
<p>注意点：</p>
</blockquote>
<ul>
<li>注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换</li>
<li>swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在 2 个滑动区域之间</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<swiper>
<swiper-item>
<view>A</view>
</swiper-item>
<swiper-item>
<view>B</view>
</swiper-item>
<swiper-item>
<view>C</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// index.vue
export default {}
</script>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209003552130-74880603.gif" alt="" loading="lazy"></p>
<ul>
<li>这个时候你如果想要中间的面板指示点，直接去查看官方文档即可</li>
<li>假如我想要显示面板指示点，我去查阅官方文档，发现是通过 <code>indicator-dots </code> 属性来控制的，给 swiper 组件添加 <code>indicator-dots</code> 属性即可</li>
</ul>
<pre><code class="language-vue"><template>
<view>
<swiper indicator-dots="true">
<swiper-item>
<view>A</view>
</swiper-item>
<swiper-item>
<view>B</view>
</swiper-item>
<swiper-item>
<view>C</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
// index.vue
export default {}
</script>
</code></pre>
<ul>
<li>显示效果</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209003814825-650529889.png" alt="" loading="lazy"></p>
<ul>
<li>可以看到已经显示出来了，这就是 UniApp 的内置组件，非常的简单，大家可以自行去查看官方文档，然后将示例代码拷贝到你们的项目中，然后改改就好了</li>
<li>好了，学习方式其实很简单，就和饿了么和Vue，ant design 一样，直接去查看官方文档，这篇文章就到这里</li>
</ul>
<h1 id="最后">最后</h1>
<p>大家好我是 BNTang, 一个热爱分享的技术的开发者，如果大家觉得我的文章对你有帮助的话，可以关注我的公众号 <code>JavaBoyL</code>，我会在公众号中分享一些IT技术和一些个人的见解，谢谢大家的支持。</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202311/2105804-20231129232539490-1458223711.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/BNTang/p/17889368.html
頁:
[1]