微信小程序初学

因为之前学过HCJ这些，然后就想着直接做一个微信小程序，结果发现有点不一样，直接看视频跟着做，好多都要一件三连给资料，我不是很喜欢，于是就决定找一个长期的视频跟着学习一下，这里当作笔记，怕忘记。

所有代码目前未经检验，不予肯定。

 视图容器类组件

1.view                  普通视图 类似div 

<view class="container1">
    <view>A</viwe>
    <view>B</viwe>
    <view>C</viwe>
</viwe>

.container1 viwe{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

快速选择ABC
.container1 view:nth-child(1){
    background-color: lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightblue;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}

.container1{
    display:felx;  // 那个相对定位应该 效果是横向排布
    justify-content：space-around; //每个view中存在空
}

2.scroll-view          滚动列表

<scroll-view class="container1" scroll-y>  //-y纵向滚动 -x横向
    <view>A</viwe>
    <view>B</viwe>
    <view>C</viwe>
</scroll-viwe>

.container1{   //只需要改动这个
    border: 1px solid red; //同css的边框
    width: 100px; //宽高不用介绍 根据要求设计
    height: 120px;
}

3.swiper 和 swiper-item        轮播图

<swiper class="swiper-container">
    <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> 

.swiper-container{
    height: 150px;
}

.item{
    height: 100%;
    line-height: 150px;
    text-align: center;
}
//字母居中可动

涂色
swiper-item:nth-child(1) .item{
    background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
    background-color: lightblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightpink;
}

indicator-dots 就是那个轮播图下面的点 indicator-dots-color="white" 点颜色 这张图很清晰了

基础内容组件

1.text 类似span 行内元素

selectable 长按选中如复制

<view>
    手机号长按选中，模拟测试好像才能生效
    <text selectable>13200003456</text>
</view>

2.rich-text HTML渲染成WTML

这个我也不是很清楚
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

第一天，预计19天结束                                                                                2021/2/1 14：21

---------------------------------------------------------------------------------------------------------------------------------