腾讯犀牛鸟云开发校园技术布道师养成计划第二天

云开发 微信小程序
微信小程序
发布日期:   2020-03-18
更新日期:   2022-08-25
文章字数:   4.2k
阅读时长:   15 分
阅读次数:  

渐变与动画

​ CSS是编程科技与设计艺术结合得最为完美的一项技术，编程的优雅在于代码的清晰可读，而设计的优雅在于能够结合技术为用户带来一场视觉和交互的盛宴。借助于CSS，不仅可以做出平面设计师常用的滤镜、渐变等设计效果，还可以设计出一些交互动画，增强用户的体验。

CSS的渐变Gradient

颜色渐变是设计师必不可少的，CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

/* pages/list/gradient/gradient.wxss */
.gradient-display{
  /* background-image:linear-gradient(red, blue); */
  /* background-image: linear-gradient(45deg, blue, red); */
/* 渐变轴为45度，从蓝色渐变到红色 */
/* background-image:linear-gradient(to left top, blue, red); */
/* 从右下到左上、从蓝色渐变到红色 */
/* background-image:linear-gradient(0deg, blue, green 40%, red); */
/* 从下到上（渐变轴为0度），从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
  background-image: linear-gradient(19deg, rgb(33, 212, 253) 0%, rgb(183, 33, 255) 100%);
  /* 颜色百分比 */
  width: 100vw;
  height: 100vh;
  }

Filter滤镜

滤镜对于设计师来说一定不会陌生，CSS也有滤镜filter属性，可以对图片进行高斯模糊、调整对比度、转换为灰度图像、色相旋转、图片透明等操作。

相比于Photoshop等工具的滤镜效果来说，使用CSS可以批量化处理图片滤镜效果，而且通过编程的手段不仅可以叠加各种效果，而且还能与交互相结合。

这里我们主要介绍用的最多的三个滤镜效果，高斯模糊blur，图片变灰grayscale(%)，图片透明opacity(%)，其他滤镜效果大家以后可以阅读技术文档。

<view class="filter-display">
    <view>blur高斯模糊</view>
    <image class="blur" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    <view>grayscale图片变灰</view>
    <image class="grayscale" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    <view>opacity图片透明</view>
    <image class="opacity" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    <view>多个滤镜叠加，注意css的写法即可</view>
    <image class="multiple" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
</view>
.filter-display img{
      width: 150px;height: auto;
  }
  .blur{
      filter: blur(8px);
  }
  .grayscale{
      filter: grayscale(90%);
  }
  .opacity{
      filter: opacity(25%);
  }
  .multiple{
      filter: blur(8px) grayscale(90%) opacity(25%);
  }

图片由灰色变为彩色

有时我们还会给这些变灰的图片添加一个交互特效，那就是当鼠标悬停在图片上时，图片会由灰色变为彩色。

<view class="filter-display">
    <text>将鼠标悬停（模拟器）或手指（手机微信）按住或放开图片查看效果</text>
    <view class="grayscale" hover-class="grayscale-hover" >
      <image mode="widthFix"  src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    </view>
</view>
filter-display image{
  width: 150px;height: auto;
}
.grayscale{
  filter: grayscale(90%);
}
.grayscale-hover{
  filter:grayscal

变形属性Transform

CSS transform属性能通过修改CSS视觉格式化模型的坐标空间旋转、缩放、倾斜或平移给定的组件。

过渡属性Transition

CSS transitions 可以控制组件从一个属性状态切换为另外一个属性状态时的过渡效果。

transition的语法如下，语法比较复杂

.selector {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
  • transition-property，应用过渡的 CSS 或动画属性的名称；
  • transition-duration，整个过渡效果持续的时间，默认时间为0秒，所以要有过渡效果这个是必须定义的；
  • transition-timing-function，规定过渡效果的时间曲线，默认为ease；
  • transition-delay，过渡效果延迟多久，或者说何时开始，默认为0秒，不定义的话也就是直接开始；
box{width: 150px;height: 150px;cursor: pointer;}
.bg-color{
    background-color:green;
}
.bg-color-hover{
    background-color: yellow;
    transition: background-color 5s ease-out 3s;
}

动画是需要触发的，这里我们使用的是悬停hover-class来触发效果，把鼠标放在元素上8秒以上，看一下正方形的背景颜色有什么变化。

了解了效果之后，我们再来结合实际案例理解语法：

  • 因为我们是用hover来触发的，所以transition要写在元素的hover-class里，盒子之前的背景是绿色green，悬停的背景是黄色yellow；

  • 因为我们改变的是盒子background-color，所以transition需要过渡的CSS属性名称，就是background-color；

  • 动画过渡持续的时间，我们设置的是5秒，也就是背景由绿色变为黄色的时间；

  • 这里的ease-out（慢速结束）是颜色过渡的时间曲线效果。还可以有linear（匀速）、ease-in（慢速开始）、ease-in-out（慢速开始和慢速结束）。持续的时间很短的情况下，这几个时间曲线效果差别是及其细微的，需要设计师对动画足够敏感了。

  • 动画延迟的时间是3秒，也就是说3秒之后动画才开始。

动画属性Animation

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

CSS3 动画库 Animate.css

Animate.css是一个有趣的，跨浏览器的css3动画库，只需要你引入一个CSS文件，就能够给指定的元素添加动画样式。

它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 80种动画效果，几乎包含了所有常见的动画效果。

2020-03-18 20-49-15 的屏幕截图.png

数据绑定

数据绑定就是把WXML 中的一些动态数据分离出来放到对应的js文件的 Page 的 data里。

把数据分离出来

<view>{{username}}，您已登录，欢迎</view>

在wxml文件里，只需要用双大括号把变量名包起来，就能把data里面的变量给渲染出来。

数据类型

WXML 中的动态数据均来自对应 Page 的 data。 data 是小程序的页面第一次渲染使用的初始数据。小程序的页面加载时， data 将会以 JSON字符串的形式由逻辑层传至渲染层，因此 data中的数据必须是可以转成 JSON的类型：字符串String，数字Number，布尔值Boolean，对象Object，数组Array。

  • 字符串String，用于存储和处理文本，可以结合Excel单元格格式里的文本格式来理解；
  • 数字Number，这个很好理解，比如233这个数，它的数字格式和文本格式是有很大不同的，学Excel一定不会陌生；
  • 布尔值Boolean，就是true和false，虽然只有两个值，但是它代表着两种选择，两种不同的条件，两种不同的结果；
  • 对象Object，结合之前所学，我们再来回顾一下：对象由大括号{}分隔，在大括号{}内部，对象的属性以名称和值对的形式 name : value来定义，属性由逗号,分隔
  • 数组Array，结合之前所学，我们再来回顾一下：数组由中括号[ ]来分割，有点类似于列表；

组件属性的渲染

通过数据绑定，我们还可以把 style、class 、id等属性分离出来来控制组件的样式等信息。

字符串与数字

数字格式的数字相加和四则运算的加法是一致的，而字符串与字符串的相加是拼接。+ 加号在JavaScript里既可以扮演四则运算符的角色，也可以进行拼接，取决于数据的格式.

渲染数组里的单条数据

在前面我们就已经接触过数组，比如pages配置项就是小程序里所有页面的一个列表。数组Array是值的有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。这个索引是从0开始的非负整数，也就是0，1，2，3，4，5…..

渲染对象类型的数据

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。

有的时候一个对象有多个属性，就拿电影来说，就有电影名称，国家，发行时间、票价、评价等等无数个属性,在双大括号里，输入变量movie+点+属性名即可，这就是对象的点表示法。

复杂的数据嵌套

对象是可以嵌套的，也就是一个对象可以作为另外一个对象的值，除了对象里套对象，数组里也可以套对象，对象里也可以套数组。把现实生活中的事物转化成错综复杂的数据，是非常重要的数据思维。

2020-03-18 22-04-38 的屏幕截图.png

列表渲染与条件渲染

如果是要输出整个列表,这个时候就需要用到列表渲染啦。

渲染数组里的所有数据

相同的结构是列表渲染的前提

在实际的开发场景里，商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据，他们都有一个共同的特征就是数据的结构相同，这也是我们可以批量化渲染的前提。

<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}}
</view>

这里wx:for=””，也就是在数组newstitle里进行循环，*this代表在 for 循环中的 item 本身，而的item是默认的。也可以使用如下方法：

<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  {{title}}
</view>

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

图片样式

我们发现电影列表里面的图片是变形的，技术文档：image组件文档

在技术文档里，我们发现如果我们不写图片的模式mode，图片的模式默认为scaleToFill，也就是不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

那我们希望图片保持宽度不变，高度自动变化，保持原图宽高比不变，那就需要用到widthFix的模式

<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}"

Grid九宫格样式参考

大家经常会在App里看到一些分类都是以九宫格的方式来布局的.

List样式参考

2020-03-18 22-04-58 的屏幕截图.png

小程序组件

组件的属性

公共属性是指小程序所有的组件都有的属性，比如id、class、style等，而不同属性的值就是数据，有数据就有数据类型。

技术文档：小程序组件

主要了解组件、组件、组件、组件有哪些私有属性

轮播效果

很多App和小程序的页面顶部都有一个图片的轮播，小程序有专门的轮播组件swiper。

要构成一个完整的轮播，除了配置相同尺寸规格的图片以外，还可以配置轮播时的面板指示点、动画效果、是否自动播放等。

audio组件

audio组件是音频组件

技术文档：audio组件技术文档

  • src：要播放音频的资源地址
  • poster：默认控件上的音频封面的图片资源地址
  • name：默认控件上的音频名字
  • author：默认控件上的作者名字

可能由于audio组件使用的场景和频次都非常低，audio组件以后就要被抛弃了，需要用到小程序的API来创建音乐播放。

video组件

video组件用来表示视频

技术文档：video组件技术文档

大家可以结合实际效果和技术文档来理解以下属性，把上面案例的autoplay或者某个属性删掉查看一下具体效果，加深自己对组件属性的理解。

  • autoplay：是否自动播放
  • loop：是否循环播放
  • muted：是否静音播放
  • inital-time：指定视频初始播放位置，单位是秒
  • controls：是否显示默认播放控件

cover效果

我们也可以把view、图片组件覆盖在地图map或视频video组件之上。比如我们希望在视频的左上角显示视频的标题以及在右上角显示商家的logo，就可以使用cover效果。

地图组件

要想在地图上标记一个地点，首先我们需要知道该地点的经纬度，这个时候就需要使用到坐标拾取器的工具。

经纬度获取：腾讯地图坐标拾取器

在搜索框里我们可以搜索“深圳腾讯大厦”，得到纬度为22.540503，经度为113.934528。

2020-03-18 22-19-58 的屏幕截图.png

优化与部署上线

开发者工具的使用

缩进与缩进设置

快捷键

  • 批量注释快捷键：windows 是Ctrl+/
  • 代码块的缩进：windows是代码左缩进ctrl + [、代码右缩进ctrl + ]
  • 格式化代码：Windows为shift + alt + F

报错提醒

wxml代码查看

自动补全与代码提示

小程序的转发功能

我们只需要在小程序每个页面的js文件下的Page(） 里面，添加以下代码，我们的小程序就有转发功能了

onShareAppMessage: function (res) {
      if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
      }
      return {
          title: '云开发技术训练营',
          path: "pages/home/home,
          imageUrl:"https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
          success: function (res) {
              // 转发成功
          },
          fail: function (res) {
              // 转发失败
          }
      }
  },
  • title为转发的标题，如果不填，默认为当前小程序的名称；
  • path为当前页面路径，也可以为其他页面的路径，如果路径写错的话会显示“当前页面不存在”哦。
  • imageUrl为自定义图片路径，可以是本地文件路径或网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。如果不填写会取当前页面，从顶部开始，高度为 80% 屏幕宽度的图像作为转发图片

小程序配置的细节

没有tabBar的小程序

有时候我们不希望我们的小程序底部有tabBar，那我们该怎么处理呢？我们可以删掉app.json的tabBar配置项即可。

下拉小程序不出现空白

当我们下拉很多小程序的时候，都会出现一个白色的空白，很影响美观，但是如果我们在windows的配置项里把backgroundColor和navigationBarBackgroundColor的颜色配置成一样，下拉就不会有空白啦，比如：

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "HackWork技术工坊",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#1772cb"
  },

让整个页面背景变色

小程序的页面背景的颜色默认为为白色，我们希望整个小程序的页面背景变成其他颜色应该怎么处理呢？

我们可以可以通过直接设置page的样式来设置，在该页面的wxss文件里添加如下样式，如

page{
  background-color: #1772cb;
}

禁止页面下拉

有的时候我们的页面做得比较短，为了增强用户体验，不希望用户可以下拉页面，因为下拉页面会有种页面松动的感觉，可以在该页面的json文件里配置，比如

{
  "window": {
    "disableScroll": true
  }
}

自定义顶部导航栏

官方默认的导航栏只能对背景颜色进行更改，对于想要在导航栏添加一些比较酷炫的效果则需要通过自定义导航栏实现。通过设置 app.json中页面配置的 navigationStyle(导航栏样式)配置项的值为 custom，即可实现自定义导航：

"window":{
    "navigationStyle":"custom"
}

比如我们给小程序的页面配一个好看的壁纸，比如在home.wxss里添加以下样式：

page{
    background-image: url(https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/background.jpg)
}

模板

静态的页面片段

比如使用开发者工具在小程序的pages页面新建一个common文件夹，在common里新建一个foot.wxml,在要引入的页面比如home.wxml的顶部，使用import引入这个模板

小程序的客服

文章作者: 毛雷
文章链接: https://maolei.space/2020/03/18/teng-xun-xi-niu-niao-yun-kai-fa-xiao-yuan-ji-zhu-bu-dao-shi-yang-cheng-ji-hua-di-er-tian/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 毛雷 !
云开发 微信小程序
赏
评论
  目录