Weui 微信网站开发样式插件使用教程

微信的网页样式正式发布了,搜了一下,正式引入了乐学一百微信端的项目中。

<div class="weui_grids">
  <a href="javascript:;" class="weui_grid js_grid" data-id="button">
    <div class="weui_grid_icon">
      <img src="./images/icon_nav_button.png" alt="">
    </div>
    <p class="weui_grid_label">
      Button
    </p>
  </a>
  <a href="javascript:;" class="weui_grid js_grid" data-id="cell">
    <div class="weui_grid_icon">
      <img src="./images/icon_nav_cell.png" alt="">
    </div>
    <p class="weui_grid_label">
      Cell
    </p>
  </a>
  <a href="javascript:;" class="weui_grid js_grid" data-id="toast">
    <div class="weui_grid_icon">
      <img src="./images/icon_nav_toast.png" alt="">
    </div>
    <p class="weui_grid_label">
      Toast
    </p>
  </a>
  ...
</div>

调用方法

<!-- 微信样式引入开始 -->
<link rel="stylesheet" href="public/js/weui/dist/lib/weui.css">
<link rel="stylesheet" href="public/js/weui/dist/css/jquery-weui.css">
<script src="public/js/weui/dist/lib/jquery-2.1.4.js"></script>
<script src="public/js/weui/dist/js/jquery-weui.js"></script> 
<!-- 微信样式引入结束 -->
在附件中下载,放入自己的项目中就可以使用了。
具体的样式书写格式
地址:

http://lihongxun945.github.io/jquery-weui/components

压缩包下载:

http://tieba.baidu.com/p/4314274996

时间: 2024-10-04 01:28:07

Weui 微信网站开发样式插件使用教程的相关文章

微信网站开发需要注意事项(1)

在微信网站开发的过程中, 会遇到许多问题,这里指写一些前端的事,本文章不够详尽,有待补充, 1.微信自定义页面中如果有上传图像, 做微信网站是,在电脑上完成并且可以上传预览图像的demo,功能也齐全了,但是当你和微信对接的时候,你就会发现这些功能都消失了,原因就在于:微信内置浏览器禁止了直接使用 type=file 进行文件上传 (可以使用jQuery插件 ajaxfileupload 上传文件)的功能, 我们需要参考微信的服务接口设置文件上传和调用:(微信网站开发者文档:http://mp.w

快速获取雪碧图的图标样式插件 - gulp-css-spriter教程

如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com/package/gulp-css-spriter  (官网gulp插件) 第三步:在gulpfile.js 文件 var gulp = require('gulp'); var spriter = require('gulp-css-spriter

QGIS开发Python插件入门教程

Building Our First Plugin with 'Plugin Builder' It's time to get our feet with the Plugin Builder . 1. On the QGIS menu bar click on the Plugin Builder icon to launch the plugin: 2. The main Plugin Builder dialog will appear. This is where we fill ou

手机微信网站开发放弃windows phone的理由

1.手机操作系统市场份额: 全球(2.44% 下滑): http://news.mydrivers.com/1/449/449736.htm 中国(1% 下滑): http://app.techweb.com.cn/ios/2015-06-05/2160883.shtml 2.手机市场份额: 全球(未进Top10): http://gd.sina.com.cn/sztech/smjd/2016-01-18/00024404.html http://henan.qq.com/a/20150527/

微信网站怎么做

如今,伴随着手机得功能性越来越强,许多得消费者都比较喜欢在手机上购物.特别是微信出现之后,其用户数量也呈现出逐年递增得趋势.而许多得企业商家为了能够快速开拓移动互联网得新市场,于是纷纷通过搭建微信网站来转型移动电商.那么微信网站怎么做才是对中小企业商家来说是比较便捷得呢? 现在由于微信网站开发技术得发展成熟,对于中小企业商家来说最为便捷得方式就是通过第三方微商城系统软件来制作微信网站.企业商家仅需要通过在第三方微商城系统得后台接通微信公众帐号即可直接获得具备完善功能得微信网站.下面小编就以小六微

微信支付开发教程

本文介绍微信支付v2和v3版的微信支付开发教程,来源于微信公众平台官方网站. 原文:http://www.cnblogs.com/txw1958/p/wxpay-development-document.html 前言 微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请的为v3版.V3版的微信支付没有paySignKey参数. 一.微信支付v2 1. 使用网页授权接口 使用网页授权接口获取用户的基本信息. [微信公众号]OAuth2.0授权.pdf点击下载 2. 使

专业定制汽车网站开发支持电脑版+手机版+微信版+小程序版

网站开发采用:PHP+MySQL+ThinkPHP框架 服务器选择:  服务器购买地址:http://www.erduyun.com/services/cloudhost/域名购买地址:http://www.erduyun.com/services/domain/ [服务与售后]1.为了更好的为客户服务,我们实行全方位一条龙服务, 包括如下内容:   A.服务器.域名.支付.公众号等信息的准备,,我们全部搞定.   B.软件平台部署.测试.上线.   C.系统售后维护.   以上服务器全程跟踪,

简化网站开发:SiteMesh插件

在编写一个网站时,几乎所有的页面都会有相同的部分.比如顶部的导航栏,每个页面都是一样的,底部的版权声明,每个页面也都是一样的. 那么在编写顶部导航栏的时候,第一种方法就是直接复制导航栏的全部代码,这种方法初期开发很简单但是后期维护简直就是噩梦,要是导航栏要增加一个按钮,所有的页面都要修改,非常麻烦. 第二种方法是将顶部导航栏专门写到一个文件中,所有的页面include这个文件.这样每个页面都要写一个include语句.后期修改只要改一个文件就可以了.但是这种方法写出来的导航栏文件它不是一个完整的

【微网站开发】之微信内置浏览器API使用

最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般是网站的截图或者是首张图片,而分享的标题一般是网页title 3.当微网站图片很大或者需要加载耗费流量很大时,怎么提醒用户注意自己的网络状态呢? 就这最简单的两个问题,然后百度了一下,看了些研究过这个的牛们的博客,知道怎么搞了 为什么会有下面的toolbar,为什么会有那么个讨厌的底部栏?而且这个不