专栏首页木头编程 - moTzxx微信小程序Ⅷ [WXSS 小知识积累]

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/80454100

♩. 前言

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

不定期,补充更新

♫. 积累

①. 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 关键字,个人测试发现,要用相对路径才会生效,不然会有如下的报错:

④. 地址三级联动

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

⑥. 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富文本解析

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序【浅提WXSS样式】

    WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

    BWH_Steven
  • 微信小程序视图层之wxss

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    菲宇
  • 微信小程序前端样式WXSS书写

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

    小小咸鱼YwY
  • 微信小程序知识云开发

    小程序界面设计、交互、功能与他人的手机应用软件或在先发布的小程序构成实质性相似,构成小程序抄袭

    达达前端
  • 微信小程序零基础入门--->wxss样式

    WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

    用户5899361
  • 初识微信小程序

    但是所谓不需要下载安装是因为小程序的安装包很小,大小都在1M以内,所以在瞬间就下载安装好了。 微信小程序定义就是一个十分轻量级的手机程序,不需要安装在手机桌面上...

    端碗吹水
  • WeApp-Workflow: 基于Gulp 的微信小程序前端开发工作流

    WeApp-Workflow 是Jeff 在开发个人微信小程序“DeveWork极客” 过程中积累总结而来的一个基于Gulp4 的,专门用于开发微信小程序的前端...

    Jeff
  • 小程序工程化系列(一):文件依赖分析

    去年(19年10月)在某技术沙龙上分享了《小程序工程化探索》后,陆续有网友联系到我询问一些实现方面的细节,虽然常年顶着黑眼圈修着“福报”,但还是决定抽出时间写一...

    WecTeam
  • 微信-小程序开发基础知识笔记

    一个 mut-bind 触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧...

    yuezhongbao

扫码关注云+社区

领取腾讯云代金券