微信小程序开发 学习笔记[018~030节]

018 样式和组件介绍

     在开发Web网站的时候:页面的结构由HTML进行编写，例如:经常会用到div、p、span. img、 a等标签;页面的样式由CSS进行编写,例如:经常会采用.class 、#id 、element 等选择器
    但在小程序中不能使用HTML标签，也就没有DOM和BOM, CSS也仅仅支持部分选择器
小程序提供了WXML进行页面结构编写,同时提供了WXSS进行页面的样式编写
    WXML提供了view. text 、image. navigator 等标签来构建页面结构，只不过在小程序中将标签称为组件;WXSS对CSS扩充和修改，新增了尺寸单位rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分css选择器

019  样式-尺寸单位rpx

     需求:绘制一个盒子，让盒子的宽度占据屏幕的一半
view是小程序提供的组件，是容器组件，类似于div,也是一个块级元素， 占据一行
如果想实现需求，不能使用px, px使固定单位，不能实现自适应，需要使用小程序提供的rpx
微信小程序规定，不管是什么型号的手机，屏幕的宽度都是750rpx 
 rpx单位能够实现自适应的

随着智能手机的发展，手机设备的宽度也逐渐多元化,这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了rpx单位
rpx:是小程序新增的自适应单位，它可以根据不同设备的屏幕宽度进行自适应缩放
小程序规定任何型号手机:屏幕宽都为750 rpx
开发建议:
1.开发微信小程序时设计师可以用 iPhone6作为视觉稿的标准，iPhone6 的设计稿一般是750px
2.如果用iPhone6作为视觉稿的标准量取多少px，直接写多少rpx即可，开发起来更方便，也能够适配屏幕的宽度
设计稿宽度是750px,而iPhone6的手机设备宽度是375px，设计稿想完整展示到手机中， 就需要缩小一倍
在iPhone6下，px和rpx的换算关系是: 1rpx = 0.5px，750rpx = 375px,刚好能够填充满整个屏幕的宽度
 

020 样式-全局样式和局部样式

在进行网页开发时，我们经常创建global.css.、base.css 或者reset.css 作为全局样式文件进行重置样式或者样式统一， 然后在每个页面或组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式。
全局样式:指在app.wxss中定义的样式规则，作用于每一个页面，例如:设置字号.背景色、宽高等全局样式
局部样式:指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。

021 组件案例演示--划分页面结构
小程序常用的组件:
1. view 组件
2. swiper 和swiper-item组件
3. image 组件
4. text 组件
5. navigator 组件
6. scroll-view 组件
7.字体图标

使用小程序常用的图标实现项目首页的效果

在index.wxml上输入

<！-- view小程序提供的容器组件，可以直接当成div使用即可-->

<！--轮播图区域-->
<view class=" swiper" ></view>

 <!--公司信息.>
<view class="info"></view>

<!--商品导航-->
<view class=" good-nav"></view>

<!--推荐商品-->
<view class="good-hot"></view>

022  组件案例--轮播图区域绘制

在进行网页开发的时候，实现轮播图的时候，我们通常先使用HTML、CSS 实现轮播图的结
构样式，然后使用JS控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序
中实现小程序功能则相对简单很多。
在小程序中，提供了swiper 和swiper-item组件实现轮播图:
swiper:滑块视图容器，其中只能放置swiper-item组件
swiper-item:只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项

&在 Sass中代表的是父选择器，引用的意思
swiper- item:first -child
加小圆点 indicator-dots
自动播放 autoplay

直接从最后一张切到第一张 circular

023 组件案例--轮播图图片添加

在小程序中，如果需要渲染图片，需要使用image组件,常用的属性有4个:
1. src 属性:图片资源地址
2. mode :图片裁剪、缩放的模式
3. show-menu-by-longpress: 长按图片显示菜单
4. lazy-load: 图片懒加载
注意事项:
1. image 默认具有宽度和高度，宽是320px 高度是240px
2. image 组件不给src属性设置图片地址，也占据宽和高
src:图片的资源地址

mode:图片的裁剪和缩放模式

show-menu-by-longpress:长按展示菜单，菜单中有转发给好友、收藏、保存等功能

lazy-load:图片懒加载功能，在滑动到一定的距离（上下三屏）以后展示图片

024  组件案例---绘制公司信息区域

在小程序中，如果需要渲染文本,需要使用text组件,常用的属性有2个:
1. user-select :文本是否可选，用于长按选择文本
2. space :显示连续空格
注意事项:
1.除了文本节点以外的其他节点都无法长按选中
2. text 组件内只支持text嵌套
user-select：长按以后选中文本

space：显示连续空格

025  组件案例:商品导航区域

1. view :视图容器
2. image :图片组件
3. text: 文本组件
 

026 组件案例：点击商品导航跳转到商品列表

在小程序中，如果需要进行跳转,需要使用navigation组件,常用的属性有2个:
1. url: 当前小程序内的跳转链接
2. open-type :跳转方式
      navigate:保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar 页面
      redirect: 关闭当前页面，跳转到应用内的某个页面。但不能跳转到tabbar页面
      switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面
      reLaunch:关闭所有页面，打开到应用内的某个页面
      navigateBack:关闭当前页面，返回上一页面或多级页面
注意事项:
1. 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔
例如: /list?id=10&name=hua, 在onLoad(options)生命周期函数中获取传递的参数
2. open-type="switchTab" 时不支持传参
在进行 页面跳转时，需要在路径的前面加 / 斜线，否则跳转不成功

navigate：只能跳转到非 TabBar 页面，不能调转到 TabBar 页面，保留上一级页面

redirect：只能跳转到非 TabBar 页面，不能调转到 TabBar 页面，关闭上一级页面

SwitchTab:只能跳转到TabBar 页面，不能调转到 非 TabBar 页面，关闭其他所有的非 TabBar 页面

reLaunch:关闭所有页面，然后打开小程序中某一个页面

navigateBack：返回上一页或者返回前几页，默认只能返回上一页

delta：返回的层级，默认是1，如果想返回几级，就写几

027  组件案例：推荐商品区域--滚动效果

在微信想小程序中如果想实现内容滚动，需要使用scroll-view组件
soroll-view:可滚动视图区域，适用于需要滚动展示内容的场景,用于在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。
先来学习两个属性:
1. scroll-x: 允许横向滚动
2. scroll-y: 允许纵向滚动
 

028  组件案例：推荐商品区域--实现结构样式

margin-right：图片之间的间隙

029  组件案例：字体图标的使用

在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。
小程序中的字体图标使用方式与Web开发中的使用方式是一样的。
在导入样式文件以后，必须以分号结束，否则会出现异常

注意事项:
使用字体图标可能会报错: [渲染层网络层错误] Falled to load font......该错误可忽略
但在控制台出现错误，会影响开发调试，解决方案是:将字体图标转换成base64的格式
 

030  背景图片的使用

当编写小程序的样式文件时，我们可以使用background-image属性来设置元素的背景图像
注意事项:
小程序的background-image不支持本地路径! 需要使用网络图片，或者base64,或者使用<image/>组件

小程序背景图的地址不能写本地路径

可以使用网络图片替换本地路径

也可以将图片转换成 base64 的格式，然后进行使用

---

    以上是分享的全部内容，感谢你看到这些！欢迎批评指正~