引入需要的样式文件

最重要的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. C#基础笔记(第十八天)
			
    1.HTMLHyper Text Markup Language 超文本标记语言在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起来.就构成了我们的网页. CSS: ...
    
			
    2. 
						
  2. qi zi
			
    #include<stdio.h> ]; ][]; int N; typedef struct node{ int x; }node; node dui[]; int se(int a)  ...
    
			
    3. 
						
  3. leetcode 72  编辑距离 JAVA
			
    题目: 给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 示例  ...
    
			
    4. 
						
  4. 激活xmind的方法
			
    https://blog.csdn.net/qq_38238041/article/details/81107127 这里以windows为例来演示,其它操作系统需根据情况修改相应步骤. 下载安装包  ...
    
			
    5. 
						
  5. Mybatis 优化：
			
    Mybatis 的优化: ** 第一个 对于数据库配置的优化: 创建一个 DB.properties 的文件 里面编写Key = value 形式的数据库信息 比如: driver = com.mys ...
    
			
    6. 
						
  6. jquery分页插件pagination
			
    参考1:https://www.cnblogs.com/jingping/p/3925976.html 参考2:https://segmentfault.com/a/1190000014487357  ...
    
			
    7. 
						
  7. HDU-1160-FatMouse's Speed（线性DP，LIS）
			
    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...
    
			
    8. 
						
  8. 【转载】MSDN-MDX#001 - 多维表达式 (MDX) 参考
			
    摘录于MSDN MDX 的一些重要概念 1. MDX 介绍 多维表达式 (MDX) 是用于在 Microsoft SQL Server Analysis Services (SSAS) 中处理和检索多 ...
    
			
    9. 
						
  9. [原创]SSH 隧道转发
			
    目录 简介 本地SSH隧道 远程SSH隧道 FAQ 免密码登陆 自动重连 简介 建立ssh隧道常用于, 通过一台公网的主机或者是大家都可以访问的主机做跳转机,来访问内部或者外部不能直接访问的机器. 项 ...
    
			
    10. 
						
  10. Drupal V7.3.1 框架处理不当导致SQL注入
			
    这个漏洞本是2014年时候被人发现的,本着学习的目的,我来做个详细的分析.漏洞虽然很早了,新版的Drupal甚至已经改变了框架的组织方式.但是丝毫不影响对于漏洞的分析.这是一个经典的使用PDO,但是处 ...
    
			
    11.