html怎样使用ui套件,weui框架组件小白入门指南:如何安装使用weui.js?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。
苏南大叔在本文中说说腾讯的weui这个前端框架的基本使用方法。这款框架已经问世有几年的时间了,因为其可以把微信的风格高度还原到网页之中。所以,可以说是微信公众号之类的网站,必备组件了,可以很好地保证用户体验。
weui框架组件小白入门指南:如何安装使用weui.js?(图12-1)
本文的主要介绍内容是:weuijs的范例使用方式,而weui的部分,就是一笔带过。
本文测试环境:mac,weui@1.1.3,weuijs@1.1.4。
官方github仓库
相关github仓库地址:
相关在线范例的地址:
weui框架组件小白入门指南:如何安装使用weui.js?(图12-2)
对于设计师们,这里还有相关的psd或者sketch文件可以下载:
最简易的方式
这个部分就是最简单的使用方式了,没有比这更简单的了。
weui.alert('alert');
weui框架组件小白入门指南:如何安装使用weui.js?(图12-3)
主要的关键代码就是:
引入两个库文件:
书写符合weui格式的html结构:
编写符合weuijs要求的script:
weui.alert('alert');
官方weuijs的范例
weuijs的官方例子是基于webpack的,所以,如果您对webpack不熟悉的话,可能理解上会有些费力。下面先说基础的命令行步骤:git clone https://github.com/Tencent/weui.js.git
cd weui.js
npm install
npm start
weui框架组件小白入门指南:如何安装使用weui.js?(图12-4)
npm start之后,默认占用的端口号是8001,webpack插件会自动打开127.0.0.1:8001,以展示运行结果。
weui框架组件小白入门指南:如何安装使用weui.js?(图12-5)
先说说git命令,有些开发小伙伴就可能没有安装git命令啊。所以下面的文章是你所需要的。
对于mac系统来说,您执行npm install的时候,可能会出现permission denied的情况。这个时候,您的解决方案是:sudo npm i --unsafe-perm
下面的文章是相关链接:
weui框架组件小白入门指南:如何安装使用weui.js?(图12-6)
weui框架组件小白入门指南:如何安装使用weui.js?(图12-7)
修改代码
这个官方的例子,运行后,就是对examples目录进行了处理,添加了对example.js的引用而已。值的注意的是:example.js,代码里面是import的,包含了对weuijs的引用。而examples/index.html里面,并没有主动加载example.js,而是webpack主动注入的代码。
weui框架组件小白入门指南:如何安装使用weui.js?(图12-8)
weui框架组件小白入门指南:如何安装使用weui.js?(图12-9)
那么,大家把examples目录下的代码,和苏南大叔本文最开始的代码,进行对比,就可以知道其中的区别。
weui框架组件小白入门指南:如何安装使用weui.js?(图12-10)
最终代码
执行下面的命令:npm run build
执行build命令后,就在dist目录下面,可以得到最终的编译过的版本了。这个版本就是可以脱离webpack而存在的版本了。
weui框架组件小白入门指南:如何安装使用weui.js?(图12-11)
修改配置
因为是基于webpack的,通过package.json里面的script可以知道:配置文件的位置是:build/webpack.example.config.js
所以,大家可以修改一下下图中的的这些文件试试看:
weui框架组件小白入门指南:如何安装使用weui.js?(图12-12)
相关链接
第三方修改的基于jquery的weui版本:
weui官方的范例汇总页面,常见的使用场景,相关使用范例都是存在的:
总结
这个weui和weuijs的文档,说起来还是挺简单的,比bootstrap比起来的话,文档就是有些分散。但是使用起来,绝对是要比bootstrap要简单的多。所以,还是那句话,"眼观六路耳听八方"就好了。
更多weui的相关经验文字,欢迎阅读苏南大叔的经验文章:
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
html怎样使用ui套件,weui框架组件小白入门指南:如何安装使用weui.js?相关推荐
- Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板 演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
- [架构之路-49]:目标系统 - 系统软件 - Linux下的网络通信-7-快速数据平面开发套件DPDK - 快速部署软件入门指南
目录 前言: 第1章 概述 1.1 本文的英文参考 1.2 概述 1.3 DPDK常见的文档 第2章 系统需求 2.1.x86上的BIOS设置前提条件 2.2.编译DPDK的要求 2.3 运行DPDK ...
- 生信工作流框架搭建 | 从零开始入门指南 - 00工作流之华山论剑
本篇为biodoge<生信工作流框架搭建>系列笔记的开篇作,该系列将持续更新. 导语 小白生信工程师一枚,写这样的系列其实是个大工程,出发点很简单,工作是宏基因组相关,我司长期使用的流程p ...
- gin框架学习-Casbin入门指南(ACL、RBAC、域内RBAC模型)
目录 前言 一.Casbin概述 二.Casbin工作原理 三.Model语法 1.Request定义 2.Policy定义 3.Matcher定义 4.Policy effect定义 1)some( ...
- gin框架学习-Gorm入门指南
目录 前言 一.GORM介绍 1.GORM概述 2.为什么选择GORM? 二.安装 三.快速入门 四.模型定义 1.模型定义介绍 2.约定 3.gorm.Model 4.高级选项 1)字段级权限控制 ...
- 【JavaScript UI库和框架】上海道宁与Webix为您提供用于跨平台Web应用程序开发的JS框架及UI小部件
Webix是Javascript库 一种软件产品 用于加速Web开发的 JavaScript UI库和框架 Webix用于跨平台Web应用程序开发的JS框架,为您提供102个UI小部件和功能丰富的CS ...
- WeUI 简明入门指南
由于 WeUI 0.4.x 到 1.x 版本更新改动较大,所以本文仅适用于 0.4.x 版本,适用于 1.x 版本的入门指南请查看 WeUI 1.0 简明入门指南. 之前做智慧校园的时候想找一个开源的 ...
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
最新文章
- Crystal Reports 财务日记帐凭证套打设计
- ActivityLifecycleCallbacks
- OpenCV使用形态学转换提取水平和垂直线的实例(附完整代码)
- java hotswap_DCEVM+HotSwapAgent实现java类热加载
- windows运行linux脚本命令大全,查看和运行 Windows PowerShell 脚本
- CANopen | 移植01 - STM32H743 + Canfestival的移植并让FDCAN1运行CANopen协议
- shell脚本--判断输入的ip是否正确
- python qt gui与数据可视化编程 pdf_《Python Qt GUI与数据可视化编程》第13章
- android sdk manager 更新失败
- 数据结构和算法——线性结构(3)递归和斐波那契数列、汉诺塔问题
- 6种最好的图片无损压缩工具
- MySQL安装失败的原因
- 阿铭Linux_网站维护学习笔记20190306
- mysql开发技巧笔记
- Mac实用技巧(三)—— 四指新建桌面
- 《50个问题吃定所有对手》 博客思听 2011年1月
- 【力扣】77. 组合
- python读取文件夹下所有图片
- html点击出现对勾,html , 对勾,警告,错误 三种情况
- PyQt5使用记录之三 —— MVD模式中的委托定义与使用