♩. 前言
- 微信小程序,作为一个前端为主的语言,涉及到的页面布局自然跟
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中的头像,我们是不能对其做圆角之类的处理
- 其中,我的前端代码为 :
<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富文本解析