苏南大叔在本文中说说腾讯的weui这个前端框架的基本使用方法。这款框架已经问世有几年的时间了,因为其可以把微信的风格高度还原到网页之中。所以,可以说是微信公众号之类的网站,必备组件了,可以很好地保证用户体验。

weui框架组件小白入门指南:如何安装使用weui.js? - weui-hero
weui框架组件小白入门指南:如何安装使用weui.js?(图12-1)

本文的主要介绍内容是:weuijs的范例使用方式,而weui的部分,就是一笔带过。
本文测试环境:mac,weui@1.1.3weuijs@1.1.4

官方github仓库

相关github仓库地址:

相关在线范例的地址:

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-github
weui框架组件小白入门指南:如何安装使用weui.js?(图12-2)

对于设计师们,这里还有相关的psd或者sketch文件可以下载:

最简易的方式

这个部分就是最简单的使用方式了,没有比这更简单的了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
</head>
<body ontouchstart>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
    <script type="text/javascript">
        weui.alert('alert');
    </script>
    <div class="weui-tab" id="tab">
        <div class="weui-navbar">
            <div class="weui-navbar__item">反馈1</div>
            <div class="weui-navbar__item">表单2</div>
            <div class="weui-navbar__item">上传3</div>
            <div class="weui-navbar__item">其它6</div>
        </div>
    </div>
</body>
</html>

weui框架组件小白入门指南:如何安装使用weui.js? - simple-weuijs
weui框架组件小白入门指南:如何安装使用weui.js?(图12-3)

主要的关键代码就是:
引入两个库文件:

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>

书写符合weui格式的html结构:

<div class="weui-tab" id="tab">
    <div class="weui-navbar">
        <div class="weui-navbar__item">反馈1</div>
        <div class="weui-navbar__item">表单2</div>
        <div class="weui-navbar__item">上传3</div>
        <div class="weui-navbar__item">其它6</div>
    </div>
</div>

编写符合weuijs要求的script:

<script type="text/javascript">
    weui.alert('alert');
</script>

官方weuijs的范例

weuijs的官方例子是基于webpack的,所以,如果您对webpack不熟悉的话,可能理解上会有些费力。下面先说基础的命令行步骤:

git clone https://github.com/Tencent/weui.js.git
cd weui.js
npm install
npm start

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-01
weui框架组件小白入门指南:如何安装使用weui.js?(图12-4)

npm start之后,默认占用的端口号是8001webpack插件会自动打开127.0.0.1:8001,以展示运行结果。

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-02
weui框架组件小白入门指南:如何安装使用weui.js?(图12-5)

先说说git命令,有些开发小伙伴就可能没有安装git命令啊。所以下面的文章是你所需要的。

对于mac系统来说,您执行npm install的时候,可能会出现permission denied的情况。这个时候,您的解决方案是:

sudo npm i --unsafe-perm

下面的文章是相关链接:

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-error-01
weui框架组件小白入门指南:如何安装使用weui.js?(图12-6)

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-error-02
weui框架组件小白入门指南:如何安装使用weui.js?(图12-7)

修改代码

这个官方的例子,运行后,就是对examples目录进行了处理,添加了对example.js的引用而已。值的注意的是:example.js,代码里面是import的,包含了对weuijs的引用。而examples/index.html里面,并没有主动加载example.js,而是webpack主动注入的代码。

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-example-01
weui框架组件小白入门指南:如何安装使用weui.js?(图12-8)

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-example-02
weui框架组件小白入门指南:如何安装使用weui.js?(图12-9)

那么,大家把examples目录下的代码,和苏南大叔本文最开始的代码,进行对比,就可以知道其中的区别。

weui框架组件小白入门指南:如何安装使用weui.js? - weuijs-example-03
weui框架组件小白入门指南:如何安装使用weui.js?(图12-10)

最终代码

执行下面的命令:

npm run build

执行build命令后,就在dist目录下面,可以得到最终的编译过的版本了。这个版本就是可以脱离webpack而存在的版本了。

weui框架组件小白入门指南:如何安装使用weui.js? - npm-run-build
weui框架组件小白入门指南:如何安装使用weui.js?(图12-11)

修改配置

因为是基于webpack的,通过package.json里面的script可以知道:配置文件的位置是:

build/webpack.example.config.js

所以,大家可以修改一下下图中的的这些文件试试看:

weui框架组件小白入门指南:如何安装使用weui.js? - webpack-build-config
weui框架组件小白入门指南:如何安装使用weui.js?(图12-12)

相关链接

第三方修改的基于jqueryweui版本:

总结

这个weuiweuijs的文档,说起来还是挺简单的,比bootstrap比起来的话,文档就是有些分散。但是使用起来,绝对是要比bootstrap要简单的多。所以,还是那句话,"眼观六路耳听八方"就好了。

更多weui的相关经验文字,欢迎阅读苏南大叔的经验文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   weui

本站的忠实读者小伙伴,正在阅读下面这些文章: