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

1. webview 和skyline渲染模式

  • webview 老一点,稳定,支持老版本和新版本;
  • skyline: 新一点,把不太稳定,不支持老版本。

调成webview模式,更稳定一些

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

2. 基础组件

2.1 基础内容

2.1.1 text

文本。

  1. 内联文本只能用 text 组件,不能用 view,如 <text> foo <text>bar</text> </text>
  2. 新增 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 轮播图

html 复制代码
    <!--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. 小程序内引入矢量图

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

  1. 进入网页,将喜欢的图标加入购物车;

  2. 全部加入完成后,进入购物车(右上角),点击"添加至项目",可添加到已存在的项目和新建的项目中;

  3. 点击"确认",添加到项目中,此时就进入了"资源管理"页面;

  4. 选择"font class";

  5. 点击"项目,选择字体格式为"Base64",此选项会使url编码为base64格式的。如果不进行此格式设置,可能会报错"[渲染层网络请求错误]Failed to load font ...",不过实际上是可以用的。

  6. 生成:点击"暂无代码,点击生成" 或 "点击更新代码...";

  7. 点击链接地址,可打开代码内容;

  8. 在项目中新建文件*.wxss,将上面的代码内容复制到此文件内。

  9. 在app.wxss 中引入:

    html 复制代码
    /**app.wxss**/
    
    @import "/fonts/icons.wxss"
  10. 使用,比如在wxml 内 的text 中引用,设置此class 为"[font-family值] [子图标名]",代码和效果图如下:

    html 复制代码
        <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博客

相关推荐
KoiHeng2 小时前
操作系统简要知识
linux·笔记
巴伦是只猫3 小时前
【机器学习笔记Ⅰ】11 多项式回归
笔记·机器学习·回归
DKPT6 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
巴伦是只猫8 小时前
【机器学习笔记Ⅰ】13 正则化代价函数
人工智能·笔记·机器学习
好好研究9 小时前
学习栈和队列的插入和删除操作
数据结构·学习
汤姆yu9 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
新中地GIS开发老师10 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF10 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上11 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen12 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉