weUI入门教程:http://blog.csdn.net/libin_1/article/details/50734266

共19个文件

png：8个

js：3个

css：3个

需积分: 9 54 浏览量 2018-05-17 16:35:40 上传评论收藏 260KB ZIP 举报

【weUI 入门教程】 weUI 是一套基于微信原生设计语言开发的移动端 UI 框架，专为微信 Web 服务量身设计。它提供了丰富的组件和样式，可以帮助开发者快速构建微信小程序、H5 页面，提升产品用户体验。本教程将带你了解 weUI 的基本概念、安装使用以及常见组件的运用。一、weUI 的基本概念 1. 微信原生设计语言：weUI 的设计灵感来源于微信自身的设计规范，旨在保持与微信界面的一致性，让用户在使用过程中有熟悉的感觉。 2. 组件化开发：weUI 提供了如按钮、表单、布局、提示等常见组件，便于开发者快速搭建页面结构。 3. 响应式设计：weUI 支持多种屏幕尺寸，适应不同设备的显示需求，保证在手机和平板等设备上的良好表现。二、安装与引入 weUI 1. CDN 引入：在 HTML 文件中添加 weUI 的 CSS 和 JS 文件链接，例如： ```html <link rel="stylesheet" href="https://unpkg.com/weui/dist/style/weui.css"> <script src="https://unpkg.com/weui/dist/js/weui.min.js"></script> ``` 2. NPM 安装：如果你的项目使用了模块打包工具，如 Webpack 或 Rollup，可以通过 npm 安装 weUI： ``` npm install weui --save ``` 然后在项目中引入所需模块。三、weUI 常见组件 1. 按钮（Button）：提供多种类型和状态的按钮，如默认、primary、warn 等。 ```html <button class="weui-btn weui-btn_default">默认按钮</button> <button class="weui-btn weui-btn_primary">主要按钮</button> <button class="weui-btn weui-btn_warn">警告按钮</button> ``` 2. 表单（Form）：包括输入框（Input）、开关（Switch）、选择器（Picker）等，方便用户输入和选择数据。 ```html <input type="text" class="weui-input" placeholder="请输入内容"> <label class="weui-switch"> <input type="checkbox" class="weui-switch__input"> <div class="weui-switch__box"></div> </label> ``` 3. 提示信息（Toast）：用于显示短暂的提示信息，如加载中、成功或失败提示。 ```javascript weui.toast('加载中'); weui.toast('操作成功', {type: 'success'}); weui.toast('操作失败', {type: 'warn'}); ``` 4. 对话框（Dialog）：包含普通对话框、确认对话框和自定义内容对话框。 ```javascript weui.confirm('确定要删除吗？', function() { // 用户点击确定后的操作 }); ``` 5. 列表（Cell）：用于展示信息列表，可以包含头像、标题、副标题和操作按钮。 ```html <div class="weui-cells"> <a href="javascript:;" class="weui-cell weui-cell_access"> <div class="weui-cell__bd"> <p>列表项</p> </div> <div class="weui-cell__ft">操作</div> </a> </div> ``` 四、weUI 案例实践通过提供的 "weui项目代码及使用示例源码.zip" 文件，你可以查看和学习实际项目中的 weUI 使用方式。这个压缩包包含了完整的 weUI 示例页面和源代码，涵盖了上述所有组件的实例。解压后，可以使用浏览器预览 HTML 文件，或者在你的项目中参考这些代码。总结，weUI 是一个强大的移动端 UI 框架，遵循微信设计规范，帮助开发者快速构建高质量的微信环境应用。通过学习和掌握 weUI，你可以提高开发效率，提供更优秀的用户体验。实践是检验真理的唯一标准，所以请动手尝试，相信你会对 weUI 有更深入的理解。

资源推荐

资源详情

资源评论

收起资源包目录

weUI 入门教程.zip （19个子文件）

weui

.project 1KB

example.js 6KB

index1.html 29KB

images

icon_nav_cell.png 196B

icon_nav_toast.png 701B

icon_nav_actionSheet.png 15KB

icon_nav_dialog.png 838B

icon_nav_article.png 425B

vcode.jpg 3KB

icon_nav_button.png 1KB

icon_nav_icons.png 2KB

icon_nav_msg.png 3KB

zepto.min.js 25KB

example.css 3KB

css

weui.css 221KB

weui.min.css 50KB

jquery-2.1.0.min.js 108KB

index_pro.html 26KB

weui项目代码及使用示例源码.zip 201KB

<!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="css/weui.css"/> <link rel="stylesheet" href="example.css"/> </head> <body ontouchstart> <div class="container js_container"> </div> <script type="text/html" id="tpl_home"> <div class="page"> <div class="hd"> <h1 class="page_title">WeUI</h1> <p class="page_desc">为微信Web服务量身设计</p> </div> <div class="bd"> <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> <a href="javascript:;" class="weui_grid js_grid" data-id="dialog"> <div class="weui_grid_icon"> <img src="./images/icon_nav_dialog.png" alt=""> </div> <p class="weui_grid_label"> Dialog </p> </a> <a href="javascript:;" class="weui_grid js_grid" data-id="progress"> <div class="weui_grid_icon"> <img src="./images/icon_nav_button.png" alt=""> </div> <p class="weui_grid_label"> Progress </p> </a> <a href="javascript:;" class="weui_grid js_grid" data-id="msg"> <div class="weui_grid_icon"> <img src="./images/icon_nav_msg.png" alt=""> </div> <p class="weui_grid_label"> Msg </p> </a> <a href="javascript:;" class="weui_grid js_grid" data-id="article"> <div class="weui_grid_icon"> <img src="./images/icon_nav_article.png" alt=""> </div> <p class="weui_grid_label"> Article </p> </a> <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet"> <div class="weui_grid_icon"> <img src="./images/icon_nav_actionSheet.png" alt=""> </div> <p class="weui_grid_label"> ActionSheet </p> </a> <a href="javascript:;" class="weui_grid js_grid" data-id="icons"> <div class="weui_grid_icon"> <img src="./images/icon_nav_icons.png" alt=""> </div> <p class="weui_grid_label"> Icons </p> </a> </div> </div> </div> </script> <script type="text/html" id="tpl_button"> <div class="page"> <div class="hd"> <h1 class="page_title">Button</h1> </div> <div class="bd spacing"> <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a> <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a> <a href="javascript:;" class="weui_btn weui_btn_warn">确认</a> <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a> <a href="javascript:;" class="weui_btn weui_btn_default">按钮</a> <a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</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_primary">按钮</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> </div> </div> </div> </script> <script type="text/html" id="tpl_cell"> <div class="page"> <div class="hd"> <h1 class="page_title">Cell</h1> </div> <div class="bd"> <div class="weui_cells_title">带说明的列表项</div> <div class="weui_cells"> <div class="weui_cell"> <div class="weui_cell_bd weui_cell_primary"> <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 weui_cell_primary"> <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 weui_cell_primary"> <p>标题文字</p> </div> <div class="weui_cell_ft">说明文字</div> </div> </div> <div class="weui_cells_title">带跳转的列表项</div> <div class="weui_cells weui_cells_access"> <a class="weui_cell" href="javascript:;"> <div class="weui_cell_bd weui_cell_primary"> <p>cell standard</p> </div> <div class="weui_cell_ft"> </div> </a> <a class="weui_cell" href="javascript:;"> <div class="weui_cell_bd weui_cell_primary"> <p>cell standard</p> </div> <div class="weui_cell_ft"> </div> </a> </div> <div class="weui_cells_title">带说明、跳转的列表项</div> <div class="weui_cells weui_cells_access"> <a class="weui_cell" href="javascript:;"> <div class="weui_cell_bd weui_cell_primary"> <p>cell standard</p> </div> <div class="weui_cell_ft">说明文字</div> </a> <a class="weui_cell" href="javascript:;">

评论收藏

内容反馈

杨航AI

粉丝: 760

weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266

最新资源

weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266

weUI 入门教程

自己写的 weui 项目，方便大家学习

weui的项目代码及使用示例

weui案例.zip

WeUI-Asp.net版

微信官方WeUI5+WeChat开发者工具+教程文档

WeUI目前最新示例代码

VS2013_微信WeUI_ASP.NET_Demo

mvc weui上传文件完整demo

预测房子大小的数据http://blog.csdn.net/hlx371240/article/details/39724869

https://blog.csdn.net/ChaoChao66666/article/details/12578559的图片

blog.csdn.net/weixin_45122104/article/details/122946629中的最后程序

https://blog.csdn.net/fqfq123456/article/details/127192935 拼图游原码

ScrollableLayout,网址：http://blog.csdn.net/w7822938/article/details/47173047.zip

jquery-ui.min.js

WeUI 最新版 js 及 css 下载

微信小程序开发文档，教程资料，开发工具大全，文档、代码、例子

微信小程序 npm weui包

weui-wxss：由微信官方设计团队提供的UI库，其中包括最有用的widgetsmodules

飞机大战 https://blog.csdn.net/fqfq123456/article/details/127113824

activiti插件（http://blog.csdn.net/y670340559/article/details/77637604）（详见）

arm64文件系统https://blog.csdn.net/tan1666/article/details/123156383

https://blog.csdn.net/a6661314/article/details/124358796 panda文件

引：https://rng-songbaobao.blog.csdn.net/article/details/123029321

jqweui上传图片功能-asp.net core

利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

weui微信商城全套页面模板.rar

weui.js：WeUI的轻量级JavaScript库

微信小程序-点餐系统（包含前端小程序，后台nodejs及mysql数据库表）.zip

Android 讯飞语音开发 http://blog.csdn.net/u013806766/article/details/52981497

你好，你好。

shell里如何将多列数据输出到excel表中保存

最新资源