微信网页开发样式库
2016-10-02 02:24
232 查看
微信网页开发样式库
使用你的公共测试号创建自定义菜单,订阅号没有借口权限
![](http://img.blog.csdn.net/20161002022550765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
里面写上一个你的能够访问并且修改内容的url地址。
到你的阿里云上安装nodejs,下载微信公共样式库文件。
wget https://nodejs.org/dist/v4.6.0/node-v4.6.0.tar.gz
./configure --prefix=/usr/local/nodejs
Make && make install
在apache根目录/var/www/html运行
/usr/local/nodejs/bin/npm install –save weui
成功会发现多出来了文件夹node_modules
此时编辑haha.php
写入一下内容
1.button按钮
![](http://img.blog.csdn.net/20161002022641281?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2.cell列表视图
效果
![](http://img.blog.csdn.net/20161002022705904?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
Javascript代码
<scripttype="text/javascript">
function showDialog1()
{
var dialog =document.getElementById('dialog1');
dialog.style.display = 'block';
}
</script>
效果
![](http://img.blog.csdn.net/20161002022718014?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
其他的可以参考http://www.tianhui.site/node_modules/weui/dist/example/index.html的源代码。
使用你的公共测试号创建自定义菜单,订阅号没有借口权限
里面写上一个你的能够访问并且修改内容的url地址。
到你的阿里云上安装nodejs,下载微信公共样式库文件。
wget https://nodejs.org/dist/v4.6.0/node-v4.6.0.tar.gz
./configure --prefix=/usr/local/nodejs
Make && make install
在apache根目录/var/www/html运行
/usr/local/nodejs/bin/npm install –save weui
成功会发现多出来了文件夹node_modules
此时编辑haha.php
写入一下内容
1.button按钮
<!DOCTYPE html>
<html lang="en">
<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="./node_modules /to/weui/dist/style/weui.min.css"/>
</head>
<body>
<a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
</div>
</body>
</html>
2.cell列表视图
<div class="page">
<div class="page__hd">
<h1 class="page__title">List</h1>
<p class="page__desc">列表</p>
</div>
<div class="page__bd">
<div class="weui-cells__title">带说明的列表项</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</div>
</a>
</div>
<div class="weui-cells__title">带说明、跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
</div>
<div class="weui-cells__title">带图标、说明、跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</a>
</div>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
</div>
</div>
效果
3. Dialog
<ahref="javascript:void(0);" class="weui-btnweui-btn_default" id="showDialog1"onclick="showDialog1()">iOS Dialog样式一</a>
<div id="dialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
Javascript代码
<scripttype="text/javascript">
function showDialog1()
{
var dialog =document.getElementById('dialog1');
dialog.style.display = 'block';
}
</script>
效果
其他的可以参考http://www.tianhui.site/node_modules/weui/dist/example/index.html的源代码。
相关文章推荐
- 微信开发(网页样式库)
- 微信小程序WeUI.js网页开发样式库
- 微信网页开发样式库
- 微信网页开发样式
- erdaicms首款基于weui(微信网页开发样式库)的前端模版上线
- 微信开发之网页开发样式库
- 微信网页开发样式库的使用
- 微信开发之网页开发样式库
- erdaicms首款基于weui(微信网页开发样式库)的前端模版上线
- 微信公众帐号开发教程第15篇-自定义菜单的view类型(访问网页)
- 微信公共服务平台开发(.Net 的实现)12-------网页授权(上 :更加深入理解OAuth2.0 )
- 微信公众帐号开发教程第15篇-自定义菜单的view类型(访问网页)
- 微信会员注册开发【带源码】:网页授权,得到code后在当前页面获取openid,js+php实现跨域请求
- 微信公共服务平台开发(.Net 的实现)13-------网页授权(下 :C#代码的实现 )
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
- 微信公众帐号开发教程第15篇-自定义菜单的view类型(访问网页)
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接(转)
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接