引入需要的样式文件

最重要的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. iOS 错误 undefined symbols for architecture i386
			
    undefined symbols for architecture i386 这个错误困扰了我几个小时. 网上很多问这个问题的,回答基本上都是说在 target 里面去的 armv64 什么什么的. ...
    
			
    2. 
						
  2. Django的views视图系统
			
    老师的博客:http://www.cnblogs.com/liwenzhou/articles/8305104.html 以看老师的博客为主 一个视图函数(类),简称视图,是一个简单的Python 函 ...
    
			
    3. 
						
  3. “全栈2019”Java第八十七章：类中嵌套接口的应用场景（拔高题）
			
    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
    
			
    4. 
						
  4. 使用java中for循环，循环打印出五角星--
			
    //5.0 输出五角星        int touHigh = 6;        int jianHigh = 25 ;        int kuang =50;        for (int ...
    
			
    5. 
						
  5. Error: Cannot find module 'gulp-sass'
			
    刚才首次启动ionic的时候,给我报了个这:Error: Cannot find module 'gulp-sass' 应该是缺少gulp-sass模块了,可又不敢贸然装,直接百度: stackove ...
    
			
    6. 
						
  6. luncene 查询字符串的解析－QueryParser类
			
    搜索流程中的第二步就是构建一个Query.下面就来介绍Query及其构建. 当用户输入一个关键字,搜索引擎接收到后,并不是立刻就将它放入后台开始进行关键字的检索,而应当首先对这个关键字进行一定的分析和 ...
    
			
    7. 
						
  7. css效果小计
			
    在工作学习中总能发现一些新鲜的页面效果可以用不同的css完成,在这里将遇到的一些css做下记录,以便日后翻阅,如果其中的写法不对,或者有更优写法欢迎留言,不胜感激 1.关于用一个div做出双边框(由于 ...
    
			
    8. 
						
  8. XorPay 个人支付平台增加 个人支付宝支付接口
			
      XorPay 今天新增 个人支付宝当面付 接口,欢迎大家使用. 「 XorPay 支付平台」 已经同时支持 个人微信支付接口 和 个人支付宝接口. 个人可用的 支付宝/微信支付 接口,支持 当面付 ...
    
			
    9. 
						
  9. java程序向hdfs中追加数据,异常以及解决方案
			
    今天在学习hdfs时,遇到问题,就是在向hdfs中追加数据总是报错,在经过好几个小时的努力之下终于将他搞定 解决方案如下:在hadoop的hdfs-sit.xml中添加一下三项 <propert ...
    
			
    10. 
						
  10. C#生成验证码类
			
    using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...
    
			
    11.