微信小程序基础学习（WXSS+组件）

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比，WXSS 扩展的特性有：单位尺寸和样式导入

一、书写位置

1.1内联样式

<text style="background-color: aqua;font-size: 20px;">内联样式</text>

1.2页内样式

写在.wxss文件中

.wxsstest01{
    height: 30px;
    width: 200px;
    background-color: rgba(146, 146, 236, 0.692);
    font-size: 30px;
}

1.3全局样式

全局样式写在app.wxss中，这其中的样式在全局的页面中都是可以直接使用的，而对于组件来说是应用不了的

1.4优先级

内联>页内>全局；

可以通过!important来提升优先级

1.5wxss的导入

使用@import可以导入其他wxss样式文件

---

二、wxss的尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

---

三、选择器

---

四、flex布局

wxss中的flex布局与css的flex布局相同，可以往前翻看CSS中的flex布局来进行学习

---

五、样式基础库

样式基础库

在使用样式基础库时，需要将页面结构、页面样式（style中）、页面逻辑都复制过来

应用组件要在.json文件中声明组件路径.

---

六、组件

在微信的官方文件中可以看到更加详细的组件内容

6.1view组件

view组件是个块级元素，默认效果是纵向排布的

view组件的一些属性

hover-stop-propagation需要用双大括号来写true和false

<view hover-class="tap" hover-start-time="0" hover-stay-time="0" hover-stop-propagation="{{true}}">111</view>

6.2text组件

text组件内部只能嵌套text组件，不独占一行也不能自由修改尺寸，但是可以通过display属性来进行修改

text的一些属性

 decode和空格转义符相结合

<text space="emsp" selectable="{{true}}">1 1 1</text>
<text space="ensp">1 1 1</text>
<text space="nbsp">1 1 1</text>
<text decode="{{true}}">1&nbsp;&nbsp;&nbsp;1</text>

蓝色部分被选中

6.3image组件

mode的合法值

直接使用src来导入本地图片

6.4icon组件

 type的有效值只能为：

 success,   success_no_circle,   info, warn,   waiting,   cancel,   download,   search,   clear

通过color可以直接更换图标的颜色

6.5button组件

button组件一般用于接收用户点击来执行不同逻辑

 button的属性：

①size属性值为default默认大小和mini小尺寸大小

②type属性为按钮的样式，属性值为default白色，primary绿色，warn红色三种颜色3

③plain属性表示镂空效果，下图中下面为镂空效果

 ④loading属性会在按钮前出现加载样式的图标

 ⑤from-type用于from组件，点击分别会触发form组件的 submit（提交表单）/reset（重置表单） 事件

 6.6swiper+swiper-item

swiper是指滑块试图容器，其中只可放置swiper-item组件，否则会导致未定义的行为，常用于轮播图当中。

swiper不单独使用，只有在swiper标签中嵌套swiper-item标签后才会显示内容。

 下面代码是一段简单的轮播图，WXSS代码不单独放出来了，直接使用下面代码图片会被拉伸,属性默认值为true时，可以不写{{true}}。

通过对image标签绑定点击事件就可以实现点击图片时的跳转效果

<swiper class="lbt"
indicator-dots="{{true}}"
indicator-color="white"
indicator-active-color="blue"
autoplay="{{true}}"
interval="3000"
circular>
    <swiper-item>
    <image src="https://i0.hdslb.com/bfs/archive/a721e4d6ef86068e31fab0d8c0dc2ec1908ab736.jpg@672w_378h_1c.webp" class="image"></image>
    </swiper-item>
    <swiper-item>
    <image src="https://i2.hdslb.com/bfs/archive/66ad8314d4fa30cc0d44bcfe5fbba0ab2f4ffcdc.jpg@672w_378h_1c.webp" class="image"></image>
    </swiper-item>
</swiper>

轮播图效果

6.6.1跳转效果：

在.js文件中使用wx.navigateTo({url:'UUURRRLLL'})实现页面的跳转，跳转后，在跳转页面中可以获取到跳转时所点击对象的属性值。

    _handleTap:function(){
        wx.navigateTo({
          url: '/page/1-view/1-view',
        })
    },

6.7movable-area + movable-view

是可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area组件中，并且必须是直接子节点，否则不能移动。movable-area是movable-view的可移动区域

基本属性

direction（移动方向）、inertia（是否有惯性）、friction（摩擦系数）

<movable-area class="ma">  
    <movable-view class="mv" direction="all"></movable-view>
</movable-area>

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；

当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑） 

6.7.1样例

.wxml

<view class="cell">
<movable-area class="ma">
    <movable-view class="mv" direction="horizontal" x="{{isOpen?'-100rpx':'0'}}" bindtouchstart="_handleStart" bindtouchend="_handleEnd">滑动删除</movable-view>
</movable-area>
<button class="del" type="warn">删除</button>
</view>

.js

let lastTouch = 0;
Page({
    _handleStart:function(evt){
        lastTouch = evt.changedTouches[0].pageX
    },
    _handleEnd:function(evt){
        let newTouch = evt.changedTouches[0].pageX
        let cha = newTouch - lastTouch;
        if(cha < -20){
            this.setData({
                isOpen:true
            })
        }
        else if(cha > 20){
            this.setData({
                isOpen:false
            })
        }
        else{
            this.setData({
                isOpen:this.data.isOpen
            })
        }
    },
    /**
     * 页面的初始数据
     */
    data: {
        isOpen:false 
    },

})

达到滑动一定程度自动滑开和闭合的效果

6.8scroll-view

是一个可滚动的试图区域

基本属性：

 

<scroll-view class="sv"
scroll-x
scroll-y
scroll-top="100px"
scroll-left="100px "> 
<image src="https://i1.hdslb.com/bfs/archive/ad6e142961a272bcde1d92afbf5e0371a88f15c9.jpg@672w_378h_1c.webp"></image>
</scroll-view>

<scroll-view class="sv" scroll-y scroll-into-view="to3">
    <button>1</button>
    <button>2</button>
    <button id="to3">3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
</scroll-view>

---

七、自定义组件

将整个app的各个页面分解成一个个组件的开发称为组件化，组件化能够便于我们重用各个组件，也便于我们维护开发

在自定义组件的.js文件中 :

properties 是组件的属性列表，是外部传给内部的数据，定义时要定义类型和默认值

eg.

  properties: {
        segementItems:{
            type: Array,
            value: []
        }
    },

methods是组件的方法列表，组件所用到的处理函数都写在里面

eg.

methods: {
        _handlerTap:function(evt){
             let cid = evt.currentTarget.id
            this.setData({
                currentIndex: cid
            })
            //触发一个自定义事件，并且把数据传递出去
            this.triggerEvent("selectChange",{currentIdx: cid},{})
        }
    }

外部在引用组件的时候需要现在.json文件中声明组件的引用eg.

{
  "usingComponents": {
    "segementBar(引用组件名)":"/compenent/segementBar/segementBar(组件路径)" 
  }
}

组件的样式于外部一般来说是分离开的，在外部定义的组件样式不会对组件的样式进行修改

slot标签（插槽）：

slot标签用在组件内部，为外部在组件内部添加的标签预留位置，设置插槽可以直接在外部对组件内部的内容进行修改，省去传递数值的麻烦。

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

使用时，用 slot 属性来将节点插入到不同的 slot 上。

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view