微信小程序开发之微信组件weui的使用流程

weui,可以认为一个框架,和bootstrap差不多

开发文档:http://old.jqweui.com/components

github js文档: https://github.com/Tencent/weui.js

菜鸟教程:http://www.runoob.com/w3cnote/weui-for-weixin-web.html

效果展示: https://weui.io

下载链接(相当于bootstrap安装包): https://github.com/weui/weui-wxss/

这里简单介绍一下小程序如何引入weui及其简单的使用

weui的使用

样式链接导入

1 . 使用微信官方链接

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css">

2.使用Staticfile CDN的链接

 <link rel="stylesheet" href="https://cdn.staticfile.org/weui/0.4.3/style/weui.css">

3.使用cdnjs的链接

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <!-- 引入 WeUI ,相当于bootstrap的css文件,引入后即可设置样式-->
    <!-- 网上找到的连接 -->
    <!-- <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css"> -->
    <!-- 使用微信官方链接 -->
    <!-- <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css"> -->
    <!-- 使用Staticfile CDN的链接 -->
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/weui/0.4.3/style/weui.css"> -->
    <!-- 使用cdnjs的链接 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css">
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.js"></script>
</head>
<body ontouchstart>
    <!-- 使用 WeUI -->
    <a href="" class="weui_btn weui_btn_primary">绿色按钮</a>
    <div class="weui_cells_title">带图标、说明、跳转的列表项</div>
</body>
</html>

打开 http://old.jqweui.com/components复制粘贴就能使用

posted @ 2022-04-02 09:47  coderwcb  阅读(225)  评论(0编辑  收藏  举报