基础组件
view
相当于浏览器中的 div,这边主要说一下关于布局。
在微信小程序中,布局推荐使用的就是 flex 布局。
在 view 组件中,有一个 hover-class
,可以设置手指按下去的时候的样式
scroll-view
这个是可以设置滚动的区域,可以设置横向滚动以及纵向滚动。
主要通过 scroll-x 以及 scroll-y 这两个属性来设置
<scroll-view class="container2" scroll-x>
<view class="scrollItem" style="background-color: lightsalmon;">1</view>
<view class="scrollItem" style="background-color: lightseagreen;">2</view>
<view class="scrollItem" style="background-color: lightblue;">3</view>
<view class="scrollItem" style="background-color: pink;">4</view>
</scroll-view>
<view class="title">纵向滚动示例</view>
<scroll-view class="container3" scroll-y>
<view class="scrollItem" style="background-color: lightsalmon;">1</view>
<view class="scrollItem" style="background-color: lightseagreen;">2</view>
<view class="scrollItem" style="background-color: lightblue;">3</view>
<view class="scrollItem" style="background-color: pink;">4</view>
</scroll-view>
text
相当于是浏览器中的 span,可以横向的嵌套,设置某一段文字单独的样式
image
该组件用来设置图片。需要说明的是,因为小程序对程序的大小有要求。
在我们的项目中,一般我们自己写的代码不会太大,一般比较大的就是静态资源。
所以在小程序中,一般静态资源采用远程加载的方式。
button
按钮严格来讲,是属于表单组件,但是在平时开发中,哪怕没用到表单,按钮还是用得很多的。
详细的属性请参阅官方文档
navigator
该组件是一个导航组件。我们前面在进行路由跳转的时候,使用的是 API 的方式进行的跳转。
除了使用 API 的方式以外,还可以使用 navigator 组件进行跳转。
icon
微信小程序官方组件库提供了一些 icon,但是并不多,所以一般我们会用到第三方库或者 iconfont
富文本
在富文本输入框中,支持你填写 html 结构的字符串,回头在富文本输入框中会将这些 html 结构的字符串渲染为 wxml