引入需要的样式文件

最重要的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. 「HEOI2014」南园满地堆轻絮
			
    题目链接 戳我 题目出处 菩萨蛮·南园满地堆轻絮                                             温庭筠 南园满地堆轻絮,愁闻一霎清明雨.雨后却斜阳,杏花零落香 ...
    
			
    2. 
						
  2. Mysql 优化与测试
			
    由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 :  --> 点击这里 以下的测试数据根据环境的不同所耗费的时间有所不同,例如我在腾讯云上的测试 ...
    
			
    3. 
						
  3. 466. Count The Repetitions
			
    Define S = [s,n] as the string S which consists of n connected strings s. For example, ["abc&qu ...
    
			
    4. 
						
  4. LCS - Longest Common Substring(spoj1811) (sam(后缀自动机)+LCS)
			
    A string is finite sequence of characters over a non-empty finite set \(\sum\). In this problem, \(\ ...
    
			
    5. 
						
  5. MongoDB学习笔记之Mongoose的使用
			
    http://blog.csdn.net/sinat_25127047/article/details/50560167
    
			
    6. 
						
  6. JAVA数组的定义方式
			
    JAVA中,数组有以下几种定义方式: 1.先定义数组中元素的个数,然后再进行元素赋值 int[] a=new int[2]; a[0]='a'; a[1]='b';a[2]='c'; 2.元素个数与元 ...
    
			
    7. 
						
  7. jquery源码解析：addClass，toggleClass，hasClass详解
			
    这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
    
			
    8. 
						
  8. [Objective-C语言教程]继承（25）
			
    面向对象编程中最重要的概念之一是继承.继承允许根据一个类定义另一个类,这样可以更容易地创建和维护一个应用程序. 这也提供了重用代码功能和快速实现时间的机会. 在创建类时,程序员可以指定新类应该继承现有 ...
    
			
    9. 
						
  9. P4542 [ZJOI2011]营救皮卡丘
			
    题目链接 题意分析 我们仔细分析一下 发现题目要求用最多\(k\)条路径实现最小权覆盖 首先由于最小路径覆盖针对的是有向图 但是这是一个无向图 所以我们面向对象编程 我们维护一个数组\(d[i][j] ...
    
			
    10. 
						
  10. POJ 2192
			
    #include <iostream> #include <string> #define MAXN 500 using namespace std; bool dp[MAXN ...
    
			
    11.