微信小程序 基础

WXHL

view
text
image
navigator

WXSS

使用rpx作为像素单位，页面宽度750rpx
标签选择器、类选择器、id选择器
并集、后代选择器
::before、::after伪元素选择器可以使用

视图容器组件

view与scroll-view
swiper与swiper-item

swiper

显示指示点indicator-dots
自动播放autoplay
衔接滑动circular
纵向vertical

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

  <swiper indicator-dots autoplay interval="3000" circular>
    <swiper-item>
      <view class="item">A</view>
    </swiper-item>
    <swiper-item>
      <view class="item">B</view>
    </swiper-item>
    <swiper-item>
      <view class="item">C</view>
    </swiper-item>
  </swiper>

.item{
  width: 750rpx;
  height: 300rpx;
  background-color: antiquewhite;
}

text与rich-text

text组件可以开启selectable属性，实现长按选中

  <text selectable>123</text>

rich-text的nodes属性会将html渲染

  <rich-text nodes='<h1>标题</h1>'></rich-text>

button

open-type属性调用微信开放功能

image组件

mode的五种
scaleToFill 任意拉伸，适配宽高
aspectFit 缩放全部显示，未占满有留白
aspectFill 缩放全部充满，超出剪切
widthFix 宽度占满，容器高度适配
heightFix 高度占满，容器宽度调节