精华内容
下载资源
问答
  • weui样式
    2018-10-31 15:36:27
    更多相关内容
  • 公众号网页flexible与jquery-weui样式冲突 正在写一个微信公众号内嵌H5,因为可能还要写支付宝的,所以用了jquery-weui,刚开始都用pt做的单位,之后发现横屏时还是以高度为准,所以元素都特别小,所以改用rem,就用了...
  • WeUI样式demo

    2016-07-24 22:24:48
    weui样式demo,包含按钮、表单、弹框等等各种常用的元素
  • weUI在微信小程序中的引用 小程序如果想引入weUI,需要以下几步,本文章主要介绍通过页面按需加载引入模式: 第一:下载weUI,三种方式 一、可以通过npm方式下载构建,npm包名为 weui-miniprogram npm install weui-...
    weUI在微信小程序中的引用

    小程序如果想引入weUI,需要以下几步,本文章主要介绍通过页面按需加载引入模式:

    第一:下载weUI,三种方式

    一、可以通过npm方式下载构建,npm包名为 weui-miniprogram

    npm install weui-miniprogram
    

    二、去github下载
    https://github.com/Tencent/weui-wxss

    三、可以通过页面按需下载(推荐)
    https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

    注:根据个人习惯及项目具体情况采取不同的下载方式即可。

    第二:引入weUI

    一、将下载的包放在app.js同级目录下
    二、首先要在app.wxss里面引入weui.wxss,根据自己目录修改地址哦,比如我采用的是按需加载模式:

    @import './components/weui-wxss/dist/style/weui.wxss';
    

    三、在需要引入weUI插件样式的页面的json文件中引入
    weUI组件样式前都加了前缀 mp-,根据需要可添加

    {
      "usingComponents": {
        "mp-searchbar": "../../../components/searchbar/searchbar",
        "mp-checkbox-group": "../../../components/checkbox-group/checkbox-group",
        "mp-checkbox": "../../../components/checkbox/checkbox",
        "mp-cells": "../../../components/cells/cells",
        "mp-cell": "../components/cell/cell",
        "mp-badge": "../components/badge/badge",
        "mp-gallery": "../components/gallery/gallery",
        "mp-loading": "../components/loading/loading",
        "mp-toptips": "../components/toptips/toptips",,
        "mp-form": "../components/form/form",
        "mp-slideview": "../components/slideview/slideview",
        "mp-uploader": "../components/uploader/uploader",
        "mp-dialog": "../components/dialog/dialog",
        "mp-msg": "../components/msg/msg",
        "mp-toptips": "../../components/toptips/toptips",
        "mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog",
        "mp-actionSheet": "../../components/actionsheet/actionsheet",
        "mp-navigation-bar": "../components/navigation-bar/navigation-bar"
      }
    }
    

    四、 然后可以在对应页面的 wxml 中直接使用该组件

    <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
        <view>test content</view>
    </mp-dialog>
    
    展开全文
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
  • npm install weui-miniprogram --production // --production 目的在于可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小 三、 文件目录中即多了个“miniprogram_npm”的文件夹 文件夹下面即...

    一:初始化

    在小程序项目根目录执行init

    npm init -y

    二:

    在小程序项目目录中执行命令安装 npm 包

    npm install weui-miniprogram --production
    // --production 目的在于可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小

    三、

    文件目录中即多了个“miniprogram_npm”的文件夹
    文件夹下面即有了我们需要的WeUI件库

    四、在 app.wxss 里面引入 weui.wxss

    @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

    五、在index.js中引用组件

    在index.xml中

    <!--logs.wxml-->
    <view class="container log-list">
      <view class="page">
        <view class="page__hd">
            <view class="page__title">Badge</view>
            <view class="page__desc">徽章</view>
        </view>
    
        <view class="page__bd">
            <mp-cells title="新消息提示跟摘要信息后,统一在列表右侧">
                <mp-cell title="单行列表" link>
                    <view slot="footer">
                        <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
                        <mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="blue"/>
                    </view>
                </mp-cell>
            </mp-cells>
    
            <mp-cells title="未读数红点跟在主题信息后,统一在列表左侧">
                <mp-cell>
                    <view slot="title" style="position: relative;margin-right: 10px;">
                        <image src="/images/pic_160.png" style="width: 50px; height: 50px; display: block"/>
                        <mp-badge content="99+" style="position: absolute;top: -.4em;right: -.4em;"/>
                    </view>
                    <view>联系人名称</view>
                    <view style="font-size: 13px;color: #888888;">摘要信息</view>
                </mp-cell>
                <mp-cell link>
                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
                    <mp-badge content="8" style="margin-left: 5px;"/>
                </mp-cell>
                <mp-cell link>
                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
                    <mp-badge style="margin-left: 5px;" content="New"/>
                </mp-cell>
            </mp-cells>
        </view>
      </view>
    </view>
    

    展开全文
  • WeUI + WeUI +基于Zepto1.2和weui1.13等众多开源项目参考放置的,接近100个组件/插件,最当前全网效果最全的移动UI,可用于开发HTML5,公众号端。 赞助者可以留下姓名,网站,在演示页面会给予展示,金额需要> = 1...
  • WeUI基础样式库.zip

    2020-12-10 22:27:05
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
  • 大家需要下载微信小程序weUI组件样式表的,可以自行去github上搜索weui.wxss,有个4K多star的就是完整的,直接复制下来就行,我这个就是从那复制的,如果不好搜索的也可以在我这里下载
  • 针对移动端的前端工作流(7)—WeUI样式的loading和dialog组件有这个需求因为移动端项目多用于微信端,所以我们用微信官方团队提供的WeUI样式简单封
  • WeUI基础样式

    2021-08-04 04:57:39
    WeUI是一套基础样式库,同微信原生视觉体验一致,由微信官方设计团队为微信内网页和微信小程序量身设计的。我们来看看这个基础库样式到底长什么样。这些密密麻麻的就是压缩后的样式库。密密麻麻地看起来简直要急死...

    WeUI是一套基础样式库,同微信原生视觉体验一致,由微信官方设计团队为微信内网页和微信小程序量身设计的。

    我们来看看这个基础库样式到底长什么样。

    190045415_1_20200508083212225

    这些密密麻麻的就是压缩后的样式库。密密麻麻地看起来简直要急死密集恐惧症啊。不要急,您请往下看。

    仔细看我们能看到,这个样式库为很多类写了样式。也就是说,我们只要在html页面中使用这些样式,就能构建一个页面了。【只要写类名,省去了为很多标签定义样式,是不是省事多了呢?】

    对WeUI的介绍就到这了,下面都是满满的干货啦。

    开始写页面前的准备

    要想有这个样式库,当然要先下载WeUI的样式库啦,我提供了两个下载的地址。

    接下来就为我们的页面引入这个基础样式库。

    我把这个基础样式库放在本地了,就这么引入。

    为了更好的说明这个基础样式库的使用,接下来我将介绍两个例子。单页应用页面和弹出框。

    单页应用页面

    190045415_2_20200508083212585

    我们致敬vue,模仿这个页面。

    纵观整个页面,可以分为以下几个模块。

    最顶上放置logo

    中间有两个cells 也就是单元格,来显示数据

    最底部有一个tabbar导航条

    引入代码:

    current vue version 2.5.2

    顶部的图片插入比较简单,直接引入图片就行。我们说说中间cells中内容的添加。

    我们看一个单元格,很典型的左中右格式,分为三个结构层次,

    左边是一张图片,WeUI样式库为我们定义了类名,也就是单元格的头部:weui-cell__hd

    中间是一段文字,也就是这个单元格的身体:weui-cell__bd

    最右边是一个小箭头,也就是单元格的尾部:weui-cell__ft

    引入代码:

    Live Demo

    这样,我们就写完了一个单元格。

    第二个单元格有两个小格怎么办呢?

    不要紧,weui-cell是单元格中的一个小格子,有多少个小格子就嵌套在一个weui-cells中就可以了,每一格weui-cell还是按照上面的左中右方式进行命名:

    接下来是最底部的tabbar。

    最尾部的导航条类名为weui-tabbar,里面有三项内容,也就是有三个weui-tabbar__item。

    为每一个weui-tabbar__item添加内容吧:

    Home

    8

    Demos

    Donate

    我放在GitHub上的项目地址:https://github.com/TeanLee/qs...

    这就完成了第一个单页页面的编写。

    接下来我们说说一个弹出框。

    页面弹出框

    放上我们要写的页面成品图:

    190045415_3_20200508083212725

    这就是我们平常很常见的弹出框了。这里是点击了第一个按钮就弹出这个弹框,点击取消,弹框消失,当然你也可以添加别的事件,点击取消和保存都会让弹框消失并且执行相应的步骤。

    首先,我们为dialog弹出框制作一个“家”,也就是dialog放置的页面:

    weui-btn 是weui的基本组件是一个按钮

    接下来,我们的dialog就要登场了。直接把dialog的div放在放置按钮div的后面。

    弹窗标题

    弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内

    这里的遮罩层是为整个页面蒙上一层灰色的背景,把用户的吸引力引到弹框上。

    弹框的内容还是分为三个层次:

    weui-dialog__hd:弹框的头部写标题;

    weui-dialog__bd:弹框的身体写具体内容;

    weui-dialog__ft:弹框的尾部放置按钮;

    接下来,就是给第一个按钮添加绑定事件了,点击第一个按钮就跳出来弹框。

    document.getElementById('showIOSDialog1').click(function () {

    $('#iosDialog1').show();

    });

    document.getElementById('dialogCancle').click(function () {

    $('#iosDialog1').show();

    });

    我放在GitHub上的弹框具体代码:https://github.com/TeanLee/qs...

    当然,weu基础样式库还有很多很多组件可以使用,可以进入https://weui.io/ 查看更多的基础组件。

    接下来让我们一起学习更多吧!

    展开全文
  • 使用映射地址访问本地项目,会导致样式不生效,css 路径加载不到,最调试的时候最好不要用地址映射,而用本地地址,直接访问,切记,切记,这个问题导致我把项目样式来回改了两边,浪费了四天的时间,得不偿失啊, ...
  • WeUI基础样式库.sketch.zip,WeUI基础样式库.sketch
  • 微信小程序WeUI 前端样式

    千次阅读 2019-05-02 15:12:34
    之前在小程序开发文档上见过WeUI 前端样式库,下载下来后一直摸不着头脑,今天终得拨云见日。 其实这就是使得微信小程序和页面界面 UI 统一:WeUI 前端样式库(含 Sketch 源文件) 微信里使用的 H5 页面是相当多,...
  • 广东第二师范学院校园助手系统应用介绍广东第二师范学院校园助手系统是为广东第二师范学院专属打造的校园服务应用。它不仅提供了课表查询、成绩查询、...应用采用前后端分离的架构设计,前端界面使用第三方WeUI样式库,
  • 今天问卷做完,结果经理说样式要和微信小程序的一样,我用原生的select默认样式和微信的完全不一样,故此采用weui,在用weui之前要导入所需要的文件 <!--引入css样式文件--> <link rel="stylesheet" ...
  • 样式WeUI for Work

    2021-06-11 11:23:14
    介绍WeUI for Work 是基于WeUI 上开发的一套同企业微信原生视觉体验一致的基础样式库,由微信官方设计团队为企业微信内网页量身设计,令用户的使用感知更加统一。在企业微信网页使用 WeUI for Work,有如下优势:1....
  • 微信小程序使用weui样式框架

    千次阅读 2020-05-18 17:27:59
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各...
  • 通过useExtendedLib方式引入weui组件库的样式问题
  • 微信小程序原生WEUI网页开发样式库 psd&sketch下载 PSD、主题包、小应用UI、小程序、微信psd、微信UI界面、微信UI设计、微信小应用psd、微信设计流程、微信设计规范
  • weui微信前端样式

    2017-07-24 14:42:13
    weui微信前端样式
  • 使用Vue封装,为微信Web服务量身设计(与WeUI 0.4.0+一起使用)特色使用Vue封装了WeUI的所有组件通过npm安装,可以一次约会所有组件,也只能只约会需要的组件不带一行css,与WeUI样式完全解绑,可以方便地进行自定义...
  • 我是在MVC中通过动态创建的方式来创建div列表的,使用的WeUI样式库,也可以使用UL标签来做 原理一样 <div class="weui-panel__bd" style="padding: 10px 15px;"> <div class="weui-cells" style=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,025
精华内容 2,010
关键字:

weui样式