渲染模式、基础组件、矢量图、样式设置——微信小程序学习笔记-EW帮帮网

1. webview 和skyline渲染模式

webview 老一点，稳定，支持老版本和新版本；
skyline: 新一点，把不太稳定，不支持老版本。

调成webview模式，更稳定一些

需在项目配置app.json 中删除某些：

2. 基础组件

2.1 基础内容

2.1.1 text

文本。

内联文本只能用 text 组件，不能用 view，如 <text> foo <text>bar</text> </text>

新增 span 组件用于内联文本和图片，如 <span> <image> </image> <text>bar</text> </span>

text 相当于 HTML 中的 span，不会换行的文本。

2.1.2 icon

图标组件，icon的类型（type），有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear，具体可见：基础内容 / icon

<icon class="icon-box-img" type="success" size="93"></icon>

2.2 表单组件

2.2.1 button

<!--index.wxml-->

<button class="myButton" size="mini" type="default" plain>小按钮</button>
<button size="mini" type="warn">小按钮</button>
<button size="mini" type="primary">小按钮</button>

plain 是否镂空背景色透明，boolean值的属性：如果是true，直接配置属性名即可，无需设置其值为true （即：plain = "true"）；如果是false，不用配置。

2.3 视图容器

2.3.1 view

视图容器，带换行

2.3.2 swiper + swiper-item 轮播图

    <!--index.wxml-->

    <view class="banner">
        <swiper autoplay indicator-dots circular interval="3000">
            <swiper-item>
                <image src="/img/banner/banner1.png" mode="widthFix"/>
            </swiper-item>
            <swiper-item>
                <image src="/img/banner/banner2.png" mode="widthFix"/>
            </swiper-item>
            <swiper-item>
                <image src="/img/banner/banner3.png" mode="widthFix"/>
            </swiper-item>
        </swiper>
    </view>

3. 小程序内引入矢量图

使用阿里巴巴矢量图库为例：

进入网页，将喜欢的图标加入购物车；
全部加入完成后，进入购物车（右上角），点击“添加至项目”，可添加到已存在的项目和新建的项目中；
点击“确认”，添加到项目中，此时就进入了“资源管理”页面；
选择“font class”；
点击“项目，选择字体格式为“Base64”，此选项会使url编码为base64格式的。如果不进行此格式设置，可能会报错“[渲染层网络请求错误]Failed to load font ...”，不过实际上是可以用的。
生成：点击“暂无代码，点击生成” 或 “点击更新代码...”；
点击链接地址，可打开代码内容；
在项目中新建文件*.wxss，将上面的代码内容复制到此文件内。

在app.wxss 中引入：

/**app.wxss**/

@import "/fonts/icons.wxss"

使用，比如在wxml 内的text 中引用，设置此class 为"[font-family值] [子图标名]"，代码和效果图如下：

    <view class="tip">
        <text class="iconfont icon-xinxi"></text>
        <text>欢迎使用本系统~</text>
    </view>

4. 样式设置

可参考CSS 参考手册 | 菜鸟教程

4.1 常见的样式设置

/**index.wxss**/

/* 标签选择器*/
button{
    margin:5rpx;
}

/* 类选择器 */
.myButton{
    margin-right: 50rpx;
    
    /* 优先以这个样式为主 */
    color: aqua !important;
}

.banner image{
    width: 100%; /* 宽度占比100% */
}
.tip{
    background-color:#f8f6f6;
    font-size: 30rpx;
    color: lightseagreen;
    border-radius: 10rpx;
    margin: 20rpx 10rpx 20rpx 10rpx; /* 外边距 :上 右 下 左*/
}
.iconTip{
    margin-right: 10rpx;
}
.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 15rpx;
    padding:20rpx;
}
.item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150rpx;
    height: 150rpx;
    border: 1px solid #b9b0b0;
    margin: 2rpx;
    border-radius: 10rpx;
    background-color: #e7e1e1;

    /* 阴影设置 水平阴影的位置 垂直阴影的位置 模糊距离 颜色 */
    box-shadow: 2rpx 2rpx 10rpx #b9b0b0;  
}

/* > 子代选择器 */
.bottom>view>image{
    width: 345rpx;
    height: 188rpx;
    padding: 5rpx;
}

4.2 flex 布局

Flex布局图文详解与示例代码-CSDN博客

渲染模式、基础组件、矢量图、样式设置——微信小程序学习笔记