文章列表

效果展示

本文会讲述如何使用scss/sass在微信小程序中实现列表顺序加载的动画。

所用的css特性

CSS animations

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

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

1. 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。

2. 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。

3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

css animations的属性和子属性见https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%85%8D%E7%BD%AE%E5%8A%A8%E7%94%BB

可主要分为两大部分，动画的实现形式和动画的属性规则。

以下仅列出本文所用的属性。

animation-timing-function

animation-timing-function 规定动画的速度曲线。

animation-delay

顾名思义，设置动画的持续时间，单位秒

animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

使用keyframes定义动画序列

keyframes就是一个描述关键帧的属性，通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

示例

@keyframes list {

		0% {

			transform: scale(0);

		}



		100% {

			transform: scale(1);

		}

	}

如上代码所示，定义了一个@keyframe名字叫list，在动画开始时使用缩放0%，结束时缩放100%。那么它在整个动画的过程中，便会根据浏览器的性能展示一个从0%-100%渐变的动画。是不是根据有点意思？当然，你也可包含设置任何额外可选的关键帧，描述动画开始和结束之间的状态，比如45%。

至此我们已经实现了组件显示时逐渐放大的效果

所用的scss特性

以下为简介，详细内容请转至官方文档

嵌套规则 (Nested Rules)

scss/Sass允许将一个 CSS 样式嵌套进另一个样式中，内层样式仅适用于外层样式的选择器范围内。

引用父选择器:&

你可以 & 字符来明确地表示插入指定父选择器。

变量: $（Variables: $ ）

以美元符开头，可当变量使用。

@mixin混入指令 (Mixin Directives)

混入(mixin)允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），比如 .float-left。混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass文档中被允许使用的东西。

按官网文档一键配置按需引入总是无法生效，目测可能是激进式预设没有选babel的原因。故写此文详细记录折腾过程，望有效！

vue ui创建新项目

选择预设，bable，eslint，vuex，vue-router(历史模式)

vue ui安装element插件

选择配置

改动的内容

1. 自动创建了bable.config.js,并添加了内容。

2. 创建了`@/src/plugins/element.js,设置了按需引入

3. 改写了app.vue,添加了element按钮组件

运行测试

加载成功

Q&A

1. 为什么需要bable来支持按需加载

如果不使用bable转码，那你按需引入会找不到该组件。这是由于bable在将组件库转码的过程中把element整个组件库编译成了各种独立的组件模块，进而实现按需加载的功能

2. 如何添加需要的组件

使用vue ui添加后的组件会在plugins目录下创建element.js文件，然后在main.js中引入该文件。文件内容如下：

import Vue from "vue";

import { Button } from "element-ui";



Vue.use(Button);

这就是只引入Button的方法，如果要按需添加，只需要依葫芦画瓢即可！

安装

全局安装@vue/cli

yarn global add @vue/cli

检查是否安装成功(需重启更新环境变量)

vue --version

快速原型开发

新版本Vue中增加了该功能，方便快速进行单个Vue文件开发，需要先额外安装一个全局的扩展。

yarn global add @vue/cli-service-global

入手尝鲜

新建index.vue文件

<template>

    <div>Hello Vue</div>

</template>

运行服务

vue serve index.vue

效果

创建项目

略

vue.config.js

在vue cli 3.x/4.x 中，使用vue.cofig.js来进行一些包括webpack的配置。比如我们可以想要一个控制台输出编译时间的配置，可以在如下设置

const moment = require('moment')



module.exports = {

  chainWebpack: config => {

    config

      .plugin('html')

      .tap(args => {

        args[0].title = '三只蜜桔后台管理系统·商户版',

        args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')

        return args

      })

  }

}

亦或者，我们想要在生产环境禁用console.log

const moment = require('moment')



module.exports = {

  chainWebpack: config => {

    config

      .plugin('html')

      .tap(args => {

        args[0].title = '三只蜜桔后台管理系统·商户版',

        args[0].buildTime = moment().format('YYYY.MM.DD.HH.mm')

        return args

      })

    config.optimization

      .minimizer('terser')

      .tap(args => {

        Object.assign(args[0].terserOptions.compress, {

          pure_funcs: ['console.log']

        })

        return args

      })

  },

  productionSourceMap: false,

  configureWebpack: {

    output: {

      filename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`,

      chunkFilename: `${moment().format('YYYY.MM.DD.HH.mm')}.${process.env.NODE_ENV}.[name].js`

    }

  }

}

为什么需要？

微信小程序里面页面与自定义组件的区别较大，而页面的可复用程度太低了。要么就是跳转页面，要么就是copy代码。如果我们要增加代码的可复用性，就可以借用Vue组件的思想，将页面改写为自定义组件。

结构对比

两者的视图文件，样式文件没有什么区别。主要区别最大的就是js文件，我们首先来看一下两者的结构。

page.js

page({

  // 数据内容

  data:{},

  // 生命周期函数

  onLoad(){},

  // 一些自定义函数

  someMethods(){}

})

componet.js

componet({

  // 预设属性

  properties: {},

  // 数据内容

  data: {},

  //组件所在页面生命周期

  pageLifetimes: {},

  // 生命周期函数-挂载

  attached: function() {

    // 在组件实例进入页面节点树时执行

  },

  // 生命周期函数-卸载

  detached: function() {

    // 在组件实例被从页面节点树移除时执行

  },

  // 自定义函数写结构里面

  methods:{

    someMethods(){}

  }

})

我们可以看到，两者的基本相似，大同小异。所以改写起来就特别方便啦~

1. 将page改为componet

2. 适配生命周期函数，例如将页面onLoad()函数改写为组件的attached()函数

3. 将自定义函数someMethods()写到Componet的methods里面

前言

由于各种终端屏幕风格，大小迥异，由此而生衍生出了自适应页面设计。如果我们需要在各种机型上显示的风格比例一致，而解决屏幕大小不同显示内容不同的问题的话，我们需要对各种屏幕比例做适配。本文就该问题分享一种可行性方案。

由于以前做的移动端页面大部分为小程序页面，小程序采用相对像素(rpx)实现响应式适配。故本文也采用类似思想(rem)。

1. rem是什么

在W3C官网上是这样描述rem的——“font size of the root element”

即相对根节点（html)的字体大小,那么解决方案的思路就立马来了。根据不同的屏幕大小，设置不同的html字体大小，这样其他使用rem单位的元素即会随之自适应的改变大小。

2. 计算根节点(html)字体大小

2.1 JS方案

思路就是使用js获取窗口宽度，然后根据宽度计算对应的font-size。根据一般常识，js为了不影响页面体验，应在文档末尾添加。但此处为了避免HTML渲染完成后，使用JS动态修改字体而造成的页面抖动问题。我们应该将该JS元素节点放置于header底部，并内联到html文档里面。例如

在Vue中直接修改template.html即可

<script type="text/javascript">

    (function (doc, win) {

      var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

          var clientWidth = docEl.clientWidth;

          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

        };

      if (!doc.addEventListener) {

        return;

      }

      win.addEventListener(resizeEvt, recalc, false);

      doc.addEventListener('DOMContentLoaded', recalc, false);

      recalc()

    })(document, window)

</script>

该代码段监听页面尺寸改变事件，根据对应窗口大小(clientWidth)除以一个基准(750),进而调整html的font-size。在本例下，375的屏幕中1rem=50px。

2.2 CSS方案

采用媒体查询，适配不同宽度，代码略。

Vue配置px自动转rem

postcss-plugin-px2rem介绍

A plugin for PostCSS that generates rem units from pixel units.

也就是说，使用该插件可以自动的将你写px单位转为rem单位，而且不用担心污染问题，因为可以设置选择黑名单。

安装postcss-plugin-px2rem

yarn add postcss-plugin-px2rem

配置

待补充

前言

相信小伙伴们对广告是又爱又恨，一方面不想接受广告的荼毒，另一方面也想接点广告赚点流量收益。由此而来衍生出了两个技术，屏蔽广告与防屏蔽广告。

屏蔽广告

防屏蔽

原理

我们要想做到网站广告不被人屏蔽，首先就要理解屏蔽广告的原理。

1.初阶屏蔽

含ad，推广等字样的js或者class类就直接拦截或者不显示

2.高阶屏蔽

我也不会，但是高阶屏蔽肯定是可以屏蔽低阶广告的。

那么根据这个原理，我们可以发现。只要我们写一个很low很low的广告，然后监听它是否成功加载，如果没有，则跳转页面或者不显示内容。

实现

1. 制造广告

先写一个一眼就能看出来是广告的js文件，例如把js文件名命名

为"adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js"。广告二字赤裸裸的写着，广告的韵味呼之欲出。

2. 定义变量

在js里面定义一个变量，比如：

var adskilltest=true;

3. 监听广告变量

页面文件中读取该变量

不管怎么样，只要被拦截，那就肯定是undefined。让个极其肤浅的广告命名，来检测是否有屏蔽广告，这叫引蛇出洞！

大功告成！

4. 后续操作

既然被拦截，就要做出点反应。有了反应之后呢，还需要保存当时浏览的页面连接。我的解决方法是写一个noads.html负责显示被拦截后的内容以及保存跳转前的链接。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>温馨提示</title>

</head>

<body>

<p>网站内容被识别为广告，已被屏蔽。请禁用广告屏蔽后点击下面链接哦！</p>

<a href="#" id="a">我已关闭广告屏蔽功能</a>

</body>

<script>

	function getQueryVariable(variable)

{

       var query = window.location.search.substring(1);

       var vars = query.split("&");

       for (var i=0;i<vars.length;i++) {

               var pair = vars[i].split("=");

               if(pair[0] == variable){return pair[1];}

       }

       return(false);

}

document.getElementById("a").href = getQueryVariable('route');

</script>

</html>

tips: 该方法不是最优，但是可行！