引入需要的样式文件

最重要的css文件为

weui.min.css

基本的框架如下：





<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>WeUI</title>

    <link rel="stylesheet" href="css/weui.min.css">

</head>

<body ontouchstart>

    <!-- Your Code -->

</body>

</html>





　　


九宫格的效果




页面代码


index.html




<!DOCTYPE html>

<html>

  <head>

    <title>jQuery WeUI</title>

		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

		<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">

		<link rel="stylesheet" href="css/weui.min.css">

		<link rel="stylesheet" href="css/demos.css">

  </head>

  <body ontouchstart>

    <header class='demos-header'>

      <h1 class="demos-title">jQuery WeUI</h1>

      <p class='demos-sub-title'>轻量强大的UI库，不仅仅是 WeUI</p>

    </header>

    <div class="weui-grids">

      <a href="buttons.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_button.png" alt="">

        </div>

        <p class="weui-grid__label">

          Button

        </p>

      </a>

      <a href="cell.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_cell.png" alt="">

        </div>

        <p class="weui-grid__label">

          List

        </p>

      </a>

      <a href="form.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_cell.png" alt="">

        </div>

        <p class="weui-grid__label">

          Form

        </p>

      </a>

      <a href="flex.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_cell.png" alt="">

        </div>

        <p class="weui-grid__label">

          Flex

        </p>

      </a>

      <a href="toast.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_toast.png" alt="">

        </div>

        <p class="weui-grid__label">

          Toast

        </p>

      </a>

      <a href="dialog.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_dialog.png" alt="">

        </div>

        <p class="weui-grid__label">

          Dialog

        </p>

      </a>

      <a href="progress.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_progress.png" alt="">

        </div>

        <p class="weui-grid__label">

          Progress

        </p>

      </a>

      <a href="msg.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_msg.png" alt="">

        </div>

        <p class="weui-grid__label">

          Msg

        </p>

      </a>

      <a href="article.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_article.png" alt="">

        </div>

        <p class="weui-grid__label">

          Article

        </p>

      </a>

      <a href="action-sheet.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_actionSheet.png" alt="">

        </div>

        <p class="weui-grid__label">

          ActionSheet

        </p>

      </a>

      <a href="icons.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_icons.png" alt="">

        </div>

        <p class="weui-grid__label">

          Icons

        </p>

      </a>

      <a href="panel.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_panel.png" alt="">

        </div>

        <p class="weui-grid__label">

          Panel

        </p>

      </a>

      <a href="navbar.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_tab.png" alt="">

        </div>

        <p class="weui-grid__label">

          Navbar

        </p>

      </a>

      <a href="tabbar.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_tab.png" alt="">

        </div>

        <p class="weui-grid__label">

          Tabbar

        </p>

      </a>

      <a href="searchbar.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_search_bar.png" alt="">

        </div>

        <p class="weui-grid__label">

          SearchBar

        </p>

      </a>

      <a href="toptip.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_msg.png" alt="">

        </div>

        <p class="weui-grid__label">

          Toptip

        </p>

      </a>

      <a href="loadmore.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Loadmore

        </p>

      </a>

      <a href="slider.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Slider

        </p>

      </a>

      <a href="uploader.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Uploader

        </p>

      </a>

      <a href="badge.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Badge

        </p>

      </a>

      <a href="footer.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Footer

        </p>

      </a>

      <a href="preview.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Preview

        </p>

      </a>

      <a href="gallery.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Gallery

        </p>

      </a>

      <a href="swipeout.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Swipeout

        </p>

      </a>

    </div>

    <div class="demos-header">

      <h2 class='demos-second-title'>拓展组件</h2>

      <p class='demos-sub-title'>jQuery WeUI 专属组件</p>

    </div>

    <div class="weui-grids">

      <a href="ptr.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_ptr.png" alt="">

        </div>

        <p class="weui-grid__label">

          下拉刷新

        </p>

      </a>

      <a href="infinite.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_up.png" alt="">

        </div>

        <p class="weui-grid__label">

          滚动加载

        </p>

      </a>

      <a href="picker.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_picker.png" alt="">

        </div>

        <p class="weui-grid__label">

          Picker

        </p>

      </a>

      <a href="calendar.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_calendar.png" alt="">

        </div>

        <p class="weui-grid__label">

          Calendar

        </p>

      </a>

      <a href="city-picker.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_city.png" alt="">

        </div>

        <p class="weui-grid__label">

          City Picker

        </p>

      </a>

      <a href="datetime-picker.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_datetime.png" alt="">

        </div>

        <p class="weui-grid__label">

          Datetime

        </p>

      </a>

      <a href="swiper.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_swiper.png" alt="">

        </div>

        <p class="weui-grid__label">

          Swiper

        </p>

      </a>

      <a href="noti.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_msg.png" alt="">

        </div>

        <p class="weui-grid__label">

          Notification

        </p>

      </a>

      <a href="select.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_select.png" alt="">

        </div>

        <p class="weui-grid__label">

          Select

        </p>

      </a>

      <a href="popup.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_panel.png" alt="">

        </div>

        <p class="weui-grid__label">

          Popup

        </p>

      </a>

      <a href="photo-browser.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_photo.png" alt="">

        </div>

        <p class="weui-grid__label">

          Photos

        </p>

      </a>

      <a href="count.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          Count

        </p>

      </a>

    </div>

    <div class="demos-header">

      <h2 class='demos-second-title'>模板</h2>

      <p class='demos-sub-title'>常见的页面模板</p>

    </div>

    <div class="weui-grids">

      <a href="tpl-shopping-cart.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          购物车

        </p>

      </a>

      <a href="tpl-chat.html" class="weui-grid js_grid">

        <div class="weui-grid__icon">

          <img src="img/icon_nav_new.png" alt="">

        </div>

        <p class="weui-grid__label">

          聊天

        </p>

      </a>

    </div>

    <div class="weui-footer">

      <p class="weui-footer__links">

        <a href="http://jqweui.com" class="weui-footer__link">jQuery-WeUI 首页</a>

      </p>

      <p class="weui-footer__text">Copyright © 2016 jqweui.io</p>

    </div>

    <style>

      .weui-footer {

        margin: 25px 0 10px 0;

      }

    </style>

  </body>

</html>





　　
												


											
微信WeUI入门2的更多相关文章
	

    
						
  1. 微信WeUI入门
		
    为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI. 该样式库目前包含 button (按钮).cell (单元格).toast (浮层提示) ...
    
		
    2. 
								
  2. 微信 + weui 框架记录
		
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. to ...
    
		
    3. 
						
  3. 微信 weui 初体验
		
    最近微信推出他们自己的H5组件(weui)组件的优点有两个: 做为开发者的我们可以不用写太多css,直接拿过来就可以用. 组件都有点击态,大大增加了用户的体验好感 高清屏幕下 border : 0.5 ...
    
		
    4. 
						
  4. 微信WeUI扩展组件
		
    主要包括 下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...
    
		
    5. 
						
  5. 微信WeUI基础
		
    首先引入样式css和js 虽然基础的其实还有weui.min.css,但是为了一些动态效果,也要引入其他的东西. 基本框架 <!DOCTYPE html> <html lang=&q ...
    
		
    6. 
						
  6. 微信WeUI常见页面模板
		
    购物车模板 就是popup弹层(css样式+js),还有slider滑动操作,还有增减的js 代码: <!DOCTYPE html> <html lang="zh-CN&q ...
    
		
    7. 
						
  7. nrf51822微信开发入门学习笔记1：开始前的准备
		
    参考:(id:love--baby)https://blog.csdn.net/hunhun1122/article/details/68922493 微信硬件平台:https://iot.weixi ...
    
		
    8. 
						
  8. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
		
    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
    
		
    9. 
						
  9. koa 微信小程序 项目
		
    这个微信号入门, 应该能自己模仿做一个微信公众号了 另外 微信小程序开发 和 微信公众号h5嵌入 还是有区别的 h5嵌入在体验上和 微信小程序 差距还是比较大, 因为小程序直接调用了微信的原生组件,  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 纸壳CMS3.0中的规则引擎，表达式计算
			
    纸壳CMS3.0中的规则引擎,用于计算通用表达试结果.通常业务逻辑总是复杂多变的,使用这个规则引擎可以灵活的修改计算表达式. IRuleManager IRuleManager,是使用规则引擎的主要接 ...
    
			
    2. 
						
  2. EF一对多的表，模糊查询2个表的数据!
			
    如用户表和电话表,要求搜索时可以模糊查询姓名和号码.都可以找到包含该字符的所有用户. /// <summary> /// 模糊查询姓名和电话号码,并按姓名排序返回 /// </sum ...
    
			
    3. 
						
  3. 使用ubuntu搭建时间机器备份服务
			
    如何在ubuntu下搭建时间备份服务 折腾了很久,终于可以了. 请严格按照下面的方式来操作. 真正明白问题的,可以按照自己的思路来. 我用的是ubnutu 16.04 安装配置netatalk sud ...
    
			
    4. 
						
  4. Posix消息队列注意事项
			
    随内核的持续性 读总是返回最高优先级的最早消息. 当往一个空队列放置一个消息时,允许产生一个信号或启动一个线程. 可认为是一个消息链表 队列中每个消息具有 1.一个无符号整数优先级 2.消息的数据部分 ...
    
			
    5. 
						
  5. ClamAV学习【3】——scanmanager函数浏览
			
    吃饱饭继续浏览Manager.c的scanmanager函数,这个函数的功能吧,暂时理解如下. 接收一个命令行参数(经过处理的optstruct结构指针). 然后根据选项判断文件类型种类,还有一些扫描 ...
    
			
    6. 
						
  6. 微信企业号发送监控消息【php】
			
    公司这边有做监控异常并将消息发送到企业公众号的功能.大概如下: 定时任务检测异常消息 将消息存入redis队列 定时处理队列异常消息 发送到微信企业号对应的部门组 这里我们来看一下微信发送过程,其他不 ...
    
			
    7. 
						
  7. 通过Jenkins进行提权的一个思路
			
    作者:欧根亲王号   所属团队:Arctic Shell Jenkins是一款由Java编写的开源的持续集成工具,其本身具有执行脚本的功能 在Jenkins的说明信息中列出我们可以使用任意Groovy ...
    
			
    8. 
						
  8. 【vue】——CDN或全局引入CSS、JS。
			
    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
    
			
    9. 
						
  9. Windows 计划任务之消息提醒
			
    Windows 计划任务之消息提醒 你肯定也有这种需求.想做一个计划任务,却发现老式消息提醒已经被微软禁止了. 或者就是很单纯的希望给系统弹出一个消息框而并非CMD的echo命令. so...how  ...
    
			
    10. 
						
  10. MySQL数据库管理
			
    好记性不如烂笔头 1.MySQL启动基本原理 /etc/init.d/mysqld 是一个shell启动脚本,启动后会调用mysqld_safe脚本,最后调用的是mysqld主程序启动mysql. 单 ...
    
			
    11.