精华内容
下载资源
问答
  • WeUI教程 - loadmore、msg、tab选项卡组件
    2020-12-24 12:26:16

    loadmore 加载更多

    Loadmore

    加载更多

    正在加载

    暂无数据

    小程序下拉刷新,下拉加载更多的教程(29、30节)

    https://ke.qq.com/course/183926#tuin=4f8da6

    msg 操作结果通知界面组件

    1、引导按钮

    Msg

    提示页

    成功提示页

    失败提示页

    js

    Page({

    openSuccess: function () {

    wx.navigateTo({

    url: 'msg_success'

    })

    },

    openFail: function () {

    wx.navigateTo({

    url: 'msg_fail'

    })

    }

    });

    2、操作失败

    操作失败

    内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现文字链接

    推荐操作

    辅助操作

    底部链接文本

    Copyright © 2008-2016 weui.io

    3、操作成功

    操作成功

    内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现文字链接

    推荐操作

    辅助操作

    底部链接文本

    Copyright © 2008-2016 weui.io

    tab 选项卡组件

    {{item}}

    选项一的内容

    选项二的内容

    选项三的内容

    jsvar sliderWidth = 96; // 需要设置slider的宽度,用于计算中间位置

    Page({

    data: {

    tabs: ["选项一", "选项二", "选项三"],

    activeIndex: 1,

    sliderOffset: 0,

    sliderLeft: 0

    },

    onLoad: function () {

    var that = this;

    wx.getSystemInfo({

    success: function(res) {

    that.setData({

    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,

    sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex

    });

    }

    });

    },

    tabClick: function (e) {

    this.setData({

    sliderOffset: e.currentTarget.offsetLeft,

    activeIndex: e.currentTarget.id

    });

    }

    });

    更多相关内容
  • weUI 入门教程

    千次下载 热门讨论 2016-02-24 23:38:59
    weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266
  • weui入门教程微信公众号界面,
  • 微信小程序使用WeUI入门教程

    万次阅读 2021-09-26 10:12:45
    微信小程序使用WeUI入门教程 在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用。网上资料又很...

    微信小程序使用WeUI入门教程

    在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice!

    但是找不到怎么去引用。网上资料又很少,最后还是要依赖官方文档去学习,下面把如何入使用总结一下。

    这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。

    1. 学习参考

    WeUI样式库展示https://weui.io/

    微信官方WeUI相关文档https://wechat-miniprogram.github.io/weui/docs/

    WeUI-wxss 项目地址https://github.com/Tencent/weui-wxss

    直奔主题,如何使用!

    直接预览WeUI-wxss示例代码,直接引用上手~

    打开[WeUI-wxss](https://github.com/Tencent/weui-wxss)项目地址,可以看到有一个dist目录,这个目录就是WeUI示例代码,下载下来,用小程序打开该dist目录,一定是该目录哦!

    然后,想用什么直接copy吧!

    在这里插入图片描述

    2.NodeJs初始化

    这里如果没有安装NodeJs的自行安装。

    确保有NodeJs,在你小程序项目根目录,执行以下命令,然后一路回车键即可安装完成。

    npm init
    

    执行完以后,会在项目根目录看到package.json文件

    在这里插入图片描述

    3.安装WeUI组件库

    项目根目录执行以下命令:

    npm install --save weui-miniprogram --production
    

    会在根目录出现node_modules目录

    4.配置

    4.1 构建npm

    打开微信小程序开发工具,点击顶部菜单【工具】–【构建npm】,构建完成后会在项目根目录生成miniprogram_npm文件夹,如下图:

    在这里插入图片描述

    4.2 支持npm

    点击小程序开发工具右上角【详情】–【本地设置】,勾选上【使用npm模块】,这里有个坑需要注意一下,记得把基准库选择最新的。

    在这里插入图片描述

    5.项目使用WeUI

    在小程序根目录app.wxss中引入样式文件(按照自己的路径引入)

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

    在需要页面的json文件引入需要的组件,例如:

    "usingComponents": {
        "mp-form_page": "/miniprogram_npm/weui-miniprogram/form/form_page"
      }
    

    在对应的wxml页面就可以使用了,示例

    <page-meta root-font-size="system"/>
    <view class="page" data-weui-theme="{{theme}}">
    	<view class="weui-form">
    		<view class="weui-form__text-area">
    			<h2 class="weui-form__title">表单结构</h2>
    			<view class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</view>
    		</view>
    		<view class="weui-form__control-area">
    			<view class="weui-cells__group weui-cells__group_form">
    				<view class="weui-cells__title">表单组标题</view>
    				<view class="weui-cells weui-cells_form">
    					<view class="weui-cell weui-cell_active">
    						<view class="weui-cell__hd"><label class="weui-label">微信号</label></view>
    						<view class="weui-cell__bd">
    							<input class="weui-input" placeholder="填写本人微信号" placeholder-class="weui-input__placeholder" />
    						</view>
    					</view>
    					<view class="weui-cell weui-cell_active">
    						<view class="weui-cell__hd">
                                <label class="weui-label">昵称</label>
                            </view>
    						<view class="weui-cell__bd">
    							<input class="weui-input" placeholder="填写本人微信号的昵称" placeholder-class="weui-input__placeholder" />
    						</view>
    					</view>
    					<view class="weui-cell weui-cell_active">
    						<view class="weui-cell__hd">
                                <label class="weui-label">联系电话</label>
                            </view>
    						<view class="weui-cell__bd">
    							<input class="weui-input" placeholder="填写绑定的电话号码" type="number" placeholder-class="weui-input__placeholder" />
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="weui-form__opr-area">
    			<a aria-role="button" class="weui-btn weui-btn_primary">确定</a>
    		</view>
    	</view>
    </view>
    
    展开全文
  • WeUI 入门教程

    万次阅读 2019-01-13 16:19:52
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&...WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库:http://ww
                           

    WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库:http://www.weui.org.cn/?/article/1

    WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式,下面demo下载地址:http://download.csdn.net/detail/cometwo/9442635

    ========================================================================

    使用方法,引入微信UI库即可,此次没用使用zepto.js,而是使用jquery,原理都一样 看之前尽量参考一下官方源码

    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    这里写图片描述
    这里写图片描述
    这里写图片描述

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">        <link rel="stylesheet" href="css/weui.min.css" />        <script type="text/javascript" src="jquery-2.1.0.min.js"></script>        <title></title>    </head>    <body>        <div class="box" style="padding: 10px;">            <h1 style="text-align: center;color: red;">Button</h1>            <a href="javascript:;" class="weui_btn weui_btn_primary">按钮1</a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮2</a>            <a href="javascript:;" class="weui_btn weui_btn_warn">确认3</a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认4</a>            <a href="javascript:;" class="weui_btn weui_btn_default">按钮5</a>            <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮6</a>            <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮7</a>            <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮8</a>            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮9</a>            <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮10</a>            <h1 style="text-align: center;color: red;">Cell</h1>            <div class="weui_cells_title">带说明的列表项</div>            <div class="weui_cells">                <div class="weui_cell">                    <div class="weui_cell_bd weui_cell_primary">                        <p>标题文字</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </div>            </div>            <div class="weui_cells_title">带图标、说明的列表项</div>            <hr style="color: black;opacity: 0.5;" />            <div class="weui_cells_title">带图标、说明的列表项</div>            <div class="weui_cells">                <div class="weui_cell">                    <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="                        alt="" style="width:20px;margin-right:5px;display:block"></div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>标题文字</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="                        alt="" style="width:20px;margin-right:5px;display:block"></div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>标题文字</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </div>            </div>            <div class="weui_cells_title">带跳转的列表项</div>            <div class="weui_cells weui_cells_access">                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                    </div>                </a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                    </div>                </a>            </div>            <div class="weui_cells_title">带说明、跳转的列表项</div>            <div class="weui_cells weui_cells_access">                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </a>            </div>            <div class="weui_cells_title">带图标、说明、跳转的列表项</div>            <div class="weui_cells weui_cells_access">                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="                        alt="" style="width:20px;margin-right:5px;display:block"></div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </a>                <a class="weui_cell" href="javascript:;">                    <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="                        alt="" style="width:20px;margin-right:5px;display:block"></div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">说明文字</div>                </a>            </div>            <div class="weui_cells_title">单选列表项</div>            <div class="weui_cells weui_cells_radio">                <label class="weui_cell weui_check_label" for="x11">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                        <input type="radio" class="weui_check" name="radio1" id="x11">                        <span class="weui_icon_checked"></span>                    </div>                </label>                <label class="weui_cell weui_check_label" for="x12">                    <div class="weui_cell_bd weui_cell_primary">                        <p>cell standard</p>                    </div>                    <div class="weui_cell_ft">                        <input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">                        <span class="weui_icon_checked"></span>                    </div>                </label>            </div>            <div class="weui_cells_title">复选列表项</div>            <div class="weui_cells weui_cells_checkbox">                <label class="weui_cell weui_check_label" for="s11">                    <div class="weui_cell_hd">                        <input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealt for u.1</p>                    </div>                </label>                <label class="weui_cell weui_check_label" for="s12">                    <div class="weui_cell_hd">                        <input type="checkbox" name="checkbox1" class="weui_check" id="s12">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealicient for u.2</p>                    </div>                </label>                <label class="weui_cell weui_check_label" for="s13">                    <div class="weui_cell_hd">                        <input type="checkbox" name="checkbox1" class="weui_check" id="s13">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealicient for u.3</p>                    </div>                </label>                <label class="weui_cell weui_check_label" for="s14">                    <div class="weui_cell_hd">                        <input type="checkbox" name="checkbox1" class="weui_check" id="s14">                        <i class="weui_icon_checked"></i>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <p>standard is dealicient for u.4</p>                    </div>                </label>            </div>            <div class="weui_cells_title">开关1</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_switch">                    <div class="weui_cell_hd weui_cell_primary">标题文字1</div>                    <div class="weui_cell_ft">                        <input class="weui_switch" type="checkbox" />                    </div>                </div>            </div>            <div class="weui_cells_title">开关2</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_switch">                    <div class="weui_cell_hd weui_cell_primary">标题文字2</div>                    <div class="weui_cell_ft">                        <input class="weui_switch" type="checkbox" />                    </div>                </div>            </div>            <div class="weui_cells_title">表单</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label class="weui_label">qq</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入qq号" />                    </div>                </div>                <div class="weui_cell weui_vcode">                    <div class="weui_cell_hd">                        <label class="weui_label">验证码</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="text" placeholder="请输入验证码(验证码不一定是纯数字,此处weUI有误:type=" text ")" />                    </div>                    <div class="weui_cell_ft">                        <img src="./images/vcode.jpg" />                    </div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label class="weui_label">银行卡</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入银行卡号" />                    </div>                </div>                <div class="weui_cell weui_vcode weui_cell_warn">                    <div class="weui_cell_hd">                        <label class="weui_label">验证码</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" placeholder="请输入验证码" />                    </div>                    <div class="weui_cell_ft">                        <i class="weui_icon_warn"></i>                        <img src="./images/vcode.jpg" />                    </div>                </div>            </div>            <div class="weui_cells_tips">底部说明文字底部说明文字</div>            <div class="weui_btn_area">                <a class="weui_btn weui_btn_primary" href="javascript:" id="showTooltips">确定</a>            </div>            <div class="weui_cells_title">上传</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell">                    <div class="weui_cell_bd weui_cell_primary">                        <div class="weui_uploader">                            <div class="weui_uploader_hd weui_cell">                                <div class="weui_cell_bd weui_cell_primary">图片上传</div>                                <div class="weui_cell_ft">0/2</div>                            </div>                            <div class="weui_uploader_bd">                                <ul class="weui_uploader_files">                                    <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>                                    <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>                                    <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>                                    <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">                                        <div class="weui_uploader_status_content">                                            <i class="weui_icon_warn"></i>                                        </div>                                    </li>                                    <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">                                        <div class="weui_uploader_status_content">50%</div>                                    </li>                                </ul>                                <div class="weui_uploader_input_wrp">                                    <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple />                                </div>                            </div>                        </div>                    </div>                </div>            </div>            <div class="weui_cells_title">文本域</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell">                    <div class="weui_cell_bd weui_cell_primary">                        <textarea class="weui_textarea" placeholder="请输入评论" rows="3"></textarea>                        <div class="weui_textarea_counter"><span>0</span>/200</div>                    </div>                </div>            </div>            <div class="weui_toptips weui_warn js_tooltips">格式不对</div>            <div class="weui_cells_title">表单报错</div>            <div class="weui_cells weui_cells_form">                <div class="weui_cell weui_cell_warn">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">卡号</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号1" />                    </div>                    <div class="weui_cell_ft">                        <i class="weui_icon_warn"></i>                    </div>                </div>                <div class="weui_cells_title">没有添加weui_cell_warn类</div>                <div class="weui_cell ">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">卡号</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号2" />                    </div>                    <div class="weui_cell_ft">                        <i class="weui_icon_warn"></i>                    </div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">日期</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="date" value="" />                    </div>                </div>                <div class="weui_cell">                    <div class="weui_cell_hd">                        <label for="" class="weui_label">时间</label>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="datetime-local" value="" placeholder="" />                    </div>                </div>            </div>            <div class="weui_cells_title">选择</div>            <div class="weui_cells">                <div class="weui_cell weui_cell_select weui_select_before">                    <div class="weui_cell_hd">                        <select class="weui_select" name="select2">                            <option value="1">+86</option>                            <option value="2">+80</option>                            <option value="3">+84</option>                            <option value="4">+87</option>                            <option value="4">+你大爷</option>                        </select>                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入号码" />                    </div>                </div>            </div>            <div class="weui_cells_title">选择</div>            <div class="weui_cells">                <div class="weui_cell weui_cell_select">                    <div class="weui_cell_bd weui_cell_primary">                        <select class="weui_select" name="select1">                            <option selected="" value="1">微信号</option>                            <option value="2">QQ号</option>                            <option value="3">Email</option>                        </select>                    </div>                </div>                <div class="weui_cell weui_cell_select weui_select_after">                    <div class="weui_cell_hd">                        国家/地区                    </div>                    <div class="weui_cell_bd weui_cell_primary">                        <select class="weui_select" name="select2">                            <option value="1">中国</option>                            <option value="2">美国</option>                            <option value="3">英国</option>                        </select>                    </div>                </div>            </div>            <h1 style="text-align: center;color: red;">Toast</h1>            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast">点击弹出Toast</a>            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showLoadingToast">点击弹出Loading Toast</a>            <script>                $(function() {                    $('#showToast').click(function() {                        /**                         *1.delay函数是jquery 1.4.2新增的函数                         *2.hide函数里必须放一个0,不然延时不起作用                         */                        $('#toast').show().delay(3000).hide(0);                        //  $('#toast').fadeIn().delay(3000).fadeOut();                    });                    $('#showLoadingToast').click(function() {                        $('#loadingToast').fadeIn().delay(3000).fadeOut();                    });                })            </script>            <!--BEGIN toast-->            <div id="toast" style="display:none;">                <div class="weui_mask_transparent"></div>                <div class="weui_toast">                    <i class="weui_icon_toast"></i>                    <p class="weui_toast_content">已完成</p>                </div>            </div>            <!--end toast-->            <!-- loading toast -->            <div id="loadingToast" class="weui_loading_toast" style="display:none;">                <div class="weui_mask_transparent"></div>                <div class="weui_toast">                    <div class="weui_loading">                        <div class="weui_loading_leaf weui_loading_leaf_0"></div>                        <div class="weui_loading_leaf weui_loading_leaf_1"></div>                        <div class="weui_loading_leaf weui_loading_leaf_2"></div>                        <div class="weui_loading_leaf weui_loading_leaf_3"></div>                        <div class="weui_loading_leaf weui_loading_leaf_4"></div>                        <div class="weui_loading_leaf weui_loading_leaf_5"></div>                        <div class="weui_loading_leaf weui_loading_leaf_6"></div>                        <div class="weui_loading_leaf weui_loading_leaf_7"></div>                        <div class="weui_loading_leaf weui_loading_leaf_8"></div>                        <div class="weui_loading_leaf weui_loading_leaf_9"></div>                        <div class="weui_loading_leaf weui_loading_leaf_10"></div>                        <div class="weui_loading_leaf weui_loading_leaf_11"></div>                    </div>                    <p class="weui_toast_content">数据加载中</p>                </div>            </div>            <h1 style="text-align: center;color: red;">Dialog</h1>            <div class="bd spacing">                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showDialog1">点击弹出Dialog样式一</a>                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showDialog2">点击弹出Dialog样式二</a>            </div>            <script>                $(function() {                    $('#showDialog1').click(function() {                        $('#dialog1').show();                    });                    $('#quxioa').click(function() {                        alert('你点击了取消!!!');                        $('#dialog1').hide();                    });                    $('#ok').click(function() {                        alert('你点击了确认!!!');                    });                    $('#showDialog2').click(function() {                        $('#dialog2').show();                    });                    $('#ok1').click(function() {                        alert('你点击了确认!!!');                        $('#dialog2').hide();                    });                })            </script>            <!--BEGIN dialog1-->            <div class="weui_dialog_confirm" id="dialog1" style="display: none;">                <div class="weui_mask"></div>                <div class="weui_dialog">                    <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>                    <div class="weui_dialog_bd">自定义弹窗内容,居左对齐显示,告知需要确认的信息等</div>                    <div class="weui_dialog_ft">                        <a id="quxioa" href="javascript:;" class="weui_btn_dialog default">取消</a>                        <a id="ok" href="javascript:;" class="weui_btn_dialog primary">确定</a>                    </div>                </div>            </div>            <!--END dialog1-->            <!--BEGIN dialog2-->            <div class="weui_dialog_alert" id="dialog2" style="display: none;">                <div class="weui_mask"></div>                <div class="weui_dialog">                    <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>                    <div class="weui_dialog_bd">弹窗内容,告知当前页面信息等</div>                    <div class="weui_dialog_ft">                        <a id="ok1" href="javascript:;" class="weui_btn_dialog primary">确定</a>                    </div>                </div>            </div>            <h1 style="text-align: center;color: red;">Progress</h1>            <div class="weui_progress">                <div class="weui_progress_bar">                    <div id="prs" class="weui_progress_inner_bar js_progress" style="width: 0%;"></div>                </div>                <a href="javascript:;" class="weui_progress_opr">                    <i class="weui_icon_cancel"></i>                </a>            </div>            <br>            <div class="weui_progress">                <div class="weui_progress_bar">                    <div class="weui_progress_inner_bar js_progress" style="width: 50%;"></div>                </div>                <a href="javascript:;" class="weui_progress_opr">                    <i class="weui_icon_cancel"></i>                </a>            </div>            <br>            <div class="weui_progress">                <div class="weui_progress_bar">                    <div class="weui_progress_inner_bar js_progress" style="width: 80%;"></div>                </div>                <a href="javascript:;" class="weui_progress_opr">                    <i class="weui_icon_cancel"></i>                </a>            </div>            <div class="weui_btn_area">                <a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上传</a>            </div>            <script>                $(function() {                    $('#btnStartProgress').click(function() {                        $('#prs').animate({                            width: "100%"                        }, 2000, function() {再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
    
    展开全文
  • 小程序WeUI使用教程(简单易懂)

    万次阅读 多人点赞 2019-09-10 14:14:26
    1、WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库...

    1、WeUI
    WeUI 是一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库,后续随着小程序、企业微信等等的开放能力出现,WeUI也提供了小程序、企业微信等等的版本。我们将要介绍的,就是WeUI的小程序版本。

    2、使用步骤

    下载之后将包中的dist文件夹导入微信开发者工具中
    在这里插入图片描述

    • 之后你就会看到这个界面
    • 在这里插入图片描述
    • 回到下载的代码包,将weui.wxss复制到自己的项目当中,目录结构看图。在这里插入图片描述

    接下来在需要使用WeUI组件的页面中导入文件即可

    @import '/weui.wxss';
    

    在这里插入图片描述

    展开全文
  • 微信weui教程

    千次阅读 2018-01-30 17:02:41
    第一章 新版weui按钮button使用 十二、新版weui input使用 十三、新版weui 列表list使用 十四、新版weui滑块Slider使用 十五、新版微信weui上传组件Uploader使用  十六、新版微信weui基础组件Article文章页...
  • 网上有很多类似的说法,都是用npm构建的方式,... "weui": true } 然后在你要用的页面json文件里,引入对应你需要用的组件 { "usingComponents": { "mp-badge": "weui-miniprogram/badge/badge", "mp-form": "we
  • weui全面教程

    2019-09-25 09:48:11
    weui全面教程 包含多个demo
  • 微信公众号weui的使用

    千次阅读 2021-05-17 11:18:26
    https://weui.io/ 下载地址 https://github.com/Tencent/weui 将整个仓库下载下来即可 官方文档 https://github.com/Tencent/weui/wiki 使用 这里展示个简单的 Toast,因为例子官方文档都有 文档展示了所有组件代码...
  • jQuery WeUI学习笔记1

    2020-06-11 01:21:34
    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。 jQuery WeUI 的最大特点是它只提供UI组件,...
  • <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"> <view class="weui-navbar__title">{{item}} <view class="weui-navbar__slider...
  • jQuery WeUI

    2018-05-04 10:14:14
    https://jqweui.cn/extends#count
  • WeUi使用手册及参考

    2022-01-14 16:52:44
    weui开发使用手册地址:https://www.kancloud.cn/ywfwj2008/weui/274291 weui腾讯官方样式:https://weui.io/
  • 本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。苏南大叔在本文中说说腾讯的...weui框架组件小白入门指南:如何安装使用weui.js?(图12-1)本文的主要介绍内容是:weui...
  • 注意是在【weui-wxss/dist/style/】目录下,不要【weui-wxss/src】目录里面下载 2.将weui.wxss拷贝到小程序根目录中  (此图片来源于网络,如有侵权,请联系删除! )  3.在app.wxss或页面wxss导入we
  • 微信官方WeUI5+WeChat开发者工具+教程文档。下载完成后 用微信开发者工具打开dist目录根据你点击进入的页面 下面有页面路径 找到那个文件夹 复制你想要复制的代码就可以了。weui包说明:①weui标准版: weui-master....
  • jQuery WeUI学习笔记一

    万次阅读 2018-04-21 21:42:43
    1 jQuery WeUI官网地址:http://jqweui.com/2 WeUI 目前只包含 CSS 代码,核心文件是weui.css jQuery WeUI = WeUI + jQuery + 大量拓展组件 jQuery WeUI 的组件分两部分: 基础组件:weui官方的组件...
  • 众所周知WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在初学小程序开发时,我也想使用WeUI进行我的小程序开发,但是在初始化...
  • 微信小程序从零开始开发步骤(八)引入框架WeUI
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-cells__title">带说明的列表项 ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-form-preview"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-panel weui-panel_access"> ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • js代码//pages/03caozuofankui/03-msg.jsPage({/***页面的初始数据*/data:{},openSuccess:function(){wx.navigateTo({url:'03-msg-success'})},openFail:function(){wx.navigateTo({url:'03-msg-fail'})},/***生命周...
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... content: '弹窗内容,告知当前状态、信息和解决方法,描述...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-progress"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;...按钮,WeUI采用
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-flex"> ... <view class="weui-flex__item...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通

空空如也

空空如也

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

weui 教程