微信开发css如何使用_微信开发者工具怎么使用外部 css - CSDN
  • WeUI 的使用

    一、WeUI 是什么

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI,有如下优势:
    1. 同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站或小程序
    2. 便捷获取快速使用,降低开发和设计成本
    3. 微信设计团队精心打造,清晰明确,简洁大方

    该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容,已经在GitHub上开源(WeUI的GitHub地址)。访问WeUI预览地址或微信扫码即可预览。

    这里写图片描述

    二、WeUI 怎么玩

    1、获取 WeUI

    WeUI 是一套与微信原生 UI 一致的 UI 库,核心文件是 weui.css,只需要获取到该文件,然后在页面中引入,即可使用 WeUI 的组件。WeUI的获取方式有好几种,我这里主要介绍比较常用和方便的其中两种方式:
    方式一:引入官方 WeUI 链接
    在页面中引入微信官网的weui.min.css地址即可。

    微信官方核心文件 weui.css 的引用地址:https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css

    例如,在head标签中加入引用:
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>

    方式二:引入本地 WeUI 文件链接
    在 WeUI 的 GitHub 上直接下载最新发布的版本。GitHub 提供了 zip 和 tar.gz 两种格式的包,选择其中一种下载,解压后引用 dist/style/weui.css 文件即可。

    GitHub 最新版 WeUI 的下载地址是 : https://github.com/weui/weui/releases

    例如 : 在head标签中加入下载的weui.min.css的地址:<link rel="stylesheet" href="dist/style/weui.min.css"/>

    这里写图片描述

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
            <title>WeUI</title>
            <!-- 方式一: 引入官方 WeUI 链接 -->
            <!--
            <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
            -->
    
            <!-- 方式二: 引入本地 WeUI 文件链接 -->
            <link rel="stylesheet" href="dist/style/weui.min.css"/>
    
        </head>
        <body>
    
        </body>
    </html>

    2、使用 WeUI

    通过以上方式获取到 WeUI 后,在页面中引入后即可使用。
    例如使用 WeUI 按钮:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
            <title>WeUI</title>
            <!-- 引入官方 WeUI 链接 -->
            <!--
            <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
            -->
    
            <!-- 引入本地 WeUI 文件链接 -->
            <link rel="stylesheet" href="dist/style/weui.min.css"/>
    
        </head>
        <body>
            <!-- 使用 WeUI 按钮 -->
            <div class="page__bd page__bd_spacing">
                <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
                <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作 Loading</a>
                <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
                <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
                <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>页面次操作 Loading</a>
                <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
                <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
                <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作 Loading</a>
                <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
                <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
                <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
                <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
                <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
            </div>
        </body>
    </html>

    这里写图片描述

    展开全文
  • 先从代码示例入手: .tapNav.selected{ background:lightblue; } {{item.name}} ...text 可能存在样式class = "tapNav selected...CSS 多类选择器 在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用

    先从代码示例入手:

    .tapNav.selected{
      background:lightblue;
    
    }
    
    <text wx:for="{{dataList}}" class="tapNav {{curNav === index ? 'selected' : ''}}" data-index="{{index}}" bindtap="selectNav">{{item.name}}</text>
    
    

    可以看到:
    text 可能存在样式class = "tapNav selected",那么样式包含多个单词,如何理解呢?


    CSS 多类选择器

    在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

    <p class="important warning">
    This paragraph is a very important warning.
    </p>
    

    两个词的顺序无关紧要,写成 warning important 也可以。

    我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

    .important {font-weight:bold;}
    .warning {font-style:italic;}
    .important.warning {background:silver;}
    



    请看下面的规则:

    .important.urgent {background:silver;}

    它能匹配以下元素:

    <p class="important urgent warning">
    This paragraph is a very important and urgent warning.
    </p>
    

    重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。



    参考:http://www.w3school.com.cn/css/css_selector_class.asp


    展开全文
  • 因此,中间部分建议使用js获取上下部分的实际站位高度以及屏幕总高度。通过屏幕高减去上下部分的高度来确定中间部分的高度。 二、行高问题: 由于安卓系统本身对行高解析的缺点,在不同的安卓手机中普遍存在字与...

    一、排版问题

    在公众号中,例如这种页面。由于不同手机屏幕长度不一致,导致页面中间部分高度不定,且上下两部分的高度也因机型问题不适宜定死值。因此,中间部分建议使用js获取上下部分的实际站位高度以及屏幕总高度。通过屏幕高减去上下部分的高度来确定中间部分的高度。

    二、行高问题

    由于安卓系统本身对行高解析的缺点,在不同的安卓手机中普遍存在字与同行的小图标不对齐的问题,对于此情况,一般使用两种解决方法。第一种:使用定位。给父元素一个padding-left值,img标签使用absolute定位(左右值根据psd走,top值50%,margin-top值为宽度一半。)。第二种为背景图定位(仅限于公众号)。给父元素一个padding-left值,然后将要定位的图片写在父元素的background属性中。然后控制属性background-position:左右值 50%;进行背景图定位。

    三、通过css控制宽高一致(宽的值为百分比)

    很多页面尤其是列表页。会有这样的排版。由于使用js操控比使用class进行css操控更消耗性能,所以如果能用css解决,尽量不用js解决。我们可以使用下面的方法解决:

    效果如图:

    四、在使用fixed定位时

    ios系统会存在一个坑。定位时左右值(left、right)和上下值(top、bottom)这两组值必须各存在一个,不然定位的东西会消失。

    展开全文
  • 微信小程序 css使用技巧 1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉(颜色设为 transparent) 1 2 3 4 5 6 7 8 9 10 11 12 13 .demo ...
    微信小程序 css使用技巧
    

    1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉(颜色设为 transparent)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .demo {
      
    width0;
      
    height0;
      
    border-width20px;
      
    border-stylesolid;
      
    border-colortransparent transparent red transparent;
      
    }

    2:设置最高高度..超过后可以滑动

    1
    2
    3
    max-height550rpx;
      
    overflow-y: scroll;

    3: text-overflow 当属性规定当文本溢出包含元素时发生的事情

    1
    2
    3
    4
    clip: 修剪文本
    ellipsis : 用省略号来代表被修剪的文字
    string: 使用给定的字符串来代表被修剪的文字
    重点是三个同时使用:text-overflow:ellipsis; white-space:nowrapoverflow:hidden;

    4:overflow: hidden当强制不换行的时候,使用overflow:hidden隐藏超过界面的部分

    5: margin-bottom失效

    1
    2
    margin-bottom是下方的外边距,并不能让元素向下方移动,margin-top作为上边距,把元素“推”了下去。
    希望图标距离下方30px,那么可以在ul上设置 position:absolutebottom:30px ,(这一句我没有加同样实现了效果)另外父元素position:relative

    6:强制不换行

    1
    white-space:nowrap;

    自动换行

    1
    2
    3
    4
    5
    6
    7
    p{
      
    word-wrap: break-word;
      
    word-break: normal;
      
    }

    强制英文单词断行

    1
    2
    3
    4
    5
    p{
      
    word-break:break-all;
      
    }

    感谢阅读

    展开全文
  • 最近接到公司小程序项目首页迭代改版的工作,涉及到文章图文布局改版。主要是精选文章,在首页推广入口增加评论弹幕效果,后端弹幕数据是随文章列表接口一次性返回给前端,由前端来处理弹幕数据及相关弹幕交互效果。...
  • mpvue开发微信小程序css预处理器sass的使用 对于刚刚使用mpvue的小伙伴感觉很头恼,大大小小的问题会遇见很多,比如我开发小程序项目时,sass的安装会遇见很多问题,在网上找了很多解决的方案都没用。大家不妨使用...
  • 一直都知道微信中缓存比较严重,但是没想到这么严重。...当然,仅在微信使用。 <script type="text/javascript"> document.write("<link rel='stylesheet' type='text/css' href='/css/inde
  • 问题描述:微信公众号Web页面CSS文件里面的样式不加载,但在浏览器中打开是可以正常加载CSS文件里面的样式的 解决办法:微信页面的缓存是十分严重的,即使清除了移动设备(手机)上该应用的缓存,有时也是无法重载...
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发使用 WeUI,有如下优势: 同微信客户端一致的视觉效果,令所有...
  • 关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的...
  • 微信LOGO-(CSS)

    2019-06-11 14:06:46
    代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信LOGO</title> <style type="text/css"> * { margin: 0...
  • 原来微信内置QQ浏览器x5具有缓存功能,不能立即生效。 尝试取消关注,退出微信,都没有用,那么问题来了,怎么办。。。。。 在知乎找到,在微信中输入网址debugx5.qq.com ,在这个网页中有清除缓存的选项 不要问...
  • CSS-微信开放UI样式

    2019-07-17 13:05:49
    下面的链接是微信开放的CSS的样式: http://weui.github.io/weui/ 附上GitHub地址:https://github.com/weui/weui 转载于:https://www.cnblogs.com/shenyangxiaohuo/p/5233210.html
  • 最近在做一个抽奖页面开发,应用了一些CSS3动画。发现 IPHONE8 下的微信浏览器下动画过程出现卡顿、掉帧现象。 而将页面在 Safari中打开,却很流畅。在安卓手机中也运行流畅。 后面找了另外一部 IPHONE SE 发现...
  • html css 仿微信底部自定义菜单 让微信开发页面体验更佳美好。
  • 在demo中把app.css的背景改为#f7f7f7, 在实际开发中 我们可能会有此种需求某部分盛满页面剩余部分 我们发现container如此设置 却还是没有盛满屏幕 /**app.wxss**/ .container { height: 100%; display: flex; ...
  • 首先,我们先聊下这个微信 网页样式库,它是干嘛的,怎么用;...同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站便捷获取快速使用,降低开发和设计成本微信设计团队精心打造,清晰明确,简洁大方
  • WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML ...同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比,WXSS 扩展的特性有: 尺寸单位 样式导入   尺寸单位 rpx(respon...
  • 该资源用于开发微信div切换样式,其中包括example.js,example.css和zepto.min.js
  • 本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
1 2 3 4 5 ... 20
收藏数 38,812
精华内容 15,524
关键字:

微信开发css如何使用