微信小程序Ⅷ [WXSS 小知识积累]

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333863

♩. 前言

• 微信小程序，作为一个前端为主的语言，涉及到的页面布局自然跟 HTML、CSS 有很大的耦合性
• 此处作为日常的小知识积累

不定期，补充更新

♫. 积累

①. CSS3 Filter的十种特效

• 通常来讲：Filters 主要是运用在图片上，以实现一些特效，使用这些简单的属性设置可以达到很好的视觉体验

其默认值是 none，他不具备继承性，其中 filter-function 一个具有以下值可选：

    grayscale 灰度
    sepia 褐色（求专业指点翻译）
    saturate 饱和度
    hue-rotate 色相旋转
    invert 反色
    opacity 透明度
    brightness 亮度
    contrast 对比度
    blur 模糊
    drop-shadow 阴影

②. ES6，你真的知道吗？？？

• ECMAScript6（简称ES6）是 JavaScript 语言的下一代标准
• 在 2015年6月 正式发布，所以又称 ES2015
• 由于目前并不是所有浏览器都能兼容 ES6 全部特性，但是 ES6 在实际项目中的广泛使用已成为一种趋势，所以作为一个前端开发者，ES6 的语法是我们必须掌握的

作者：
链接：https://www.imooc.com/article/details/id/19684#
来源：慕课网

③. import 使用

 //使用举例，其中的 Movie.js 是一个ES6 实现的类
 import { Movie } from '../../../class/Movie.js';

• js 文件中，使用 import 关键字，个人测试发现，要用相对路径才会生效，不然会有如下的报错：

④. 地址三级联动

• *小程序 地址三级联动效果实现

⑤. 图片上传、删除、预览

• 微信小程序实现图片上传、删除和预览功能的方法 当然也可以参看官方 Demo ，但是其中没有删除功能

⑥. open-data userAvatarUrl 头像做圆角

• 推荐文章 - 小程序之open-data userAvatarUrl头像做圆角

首先，你测试会发现这样一点：小程序open-data中的头像，我们是不能对其做圆角之类的处理

• 其中，我的前端代码为 ：

    <view class='userimg'>
        <open-data class="open-data-class" type="userAvatarUrl"></open-data>
    </view>

• 则样式代码如下：

.open-data-class {
    width: 160rpx;
    height: 160rpx; 
    display:block; 
    overflow:hidden; 
    border-radius: 50%;
}

• 然后对于整体的布局，可自行调整即可，个人局部效果如下：

⑦. 小程序显示富文本

• 注意，这也是个重点，毕竟我们多数的后台对于文章内容啥的，都是用UEditor等编辑器生成的富文本内容，所以，在小程序页面上更要很好的适配显示
• 微信小程序之HTML富文本解析