微信小程序weui的使用

墨蓝 2022-12-11 05:22 2309阅读 0赞

小程序weui官网：[https://developers.weixin.qq.com/miniprogram/dev/extended/weui/][https_developers.weixin.qq.com_miniprogram_dev_extended_weui]

更多请看[https://www.jianshu.com/p/ada94d3a3e86][https_www.jianshu.com_p_ada94d3a3e86]

### 方法一：npm导入WeUI（推荐） ###

### 1. 在项目根路径下开启终端 ###

### 2. 执行 `npm init` 创建`package.json` (不想一个一个配置也可以执行`npm init -y`) ###

### 3. npm安装WeUi，执行`cnpm install --save weui-miniprogram` ###

### 4. 然后点击工具选择构建npm ###

![在这里插入图片描述][2020092817050346.png_pic_center]

### 5. 然后会提示完成构建，目录会多了一个文件夹，这个文件夹放的就是我们要用的组件和css样式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

### 6. 使用 ###

在全局css文件app.wxss导入WeUI的样式，这样全部page可以用到了

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

"mp-checkbox": "../../miniprogram_npm/weui-miniprogram/checkbox/checkbox"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

checkbox就是我用来演示的单选框组件，要用其他组件的话打开miniprogram\_npm文件夹下的weui-miniprogram文件夹，然后里边就是官方已有的组件，要用改一下名字和地址名就ojbk了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]

然后在index.wxml中使用组件

<mp-checkbox label="hello！"></mp-checkbox>

效果：

结束！！！

## 方法二：下载导入方式 ##

#### 1.下载weui ####

进入GitHub [https://github.com/weui/weui-wxss/][https_github.com_weui_weui-wxss]进入如下页面，点击红色框选下载程序代码  
　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]  
　　解压后进入文件夹，图示路径下的weui.wxss就是我们所需要的weui库

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]

#### 2.引入weui ####

打开微信开发者工具创建项目（这个就不在介绍了），目录如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]  
　　创建好项目，接下来要做的就是将刚才下载解压的weui文件夹里的weui.wxss，直接复制粘贴放在项目根目录下即可  
　　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 7]  
到此引入步骤还没结束，要在项目中使用，还需要在全局app.wxss中加入@import “weui.wxss”，至此完成引入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 8]

#### 3.使用weui ####

从GitHub上下载的weui文件夹里除了我们要使用的weui.wxss文件，还有一个很重要的文件夹，那就是example文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 9]  
　　直接将该文件扔进vscode里，我们就可以看到各个组件的代码。微信小程序weui网站 https://weui.io/ 上有小程序weui的样式展示，当然我们也可以直接进weui的小程序手机上查看weui的样式，然后根据需求来选择组件的使用，但是这里都没有介绍weui具体的使用，但是example文件夹里有。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 10]  
上图所示就是weui使用代码，这里我们随意挑选一个模块badge示例，对应的badge.wxml的代码其实就是weui的各个badge徽章标记的样式，我们直接将badge.wxml中的代码复制，粘贴到小程序项目中的新建页面test.wxml中看看。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 11]  
保存一下，我们就可以在模拟器中看到如下效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 12]

[https_developers.weixin.qq.com_miniprogram_dev_extended_weui]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
[https_www.jianshu.com_p_ada94d3a3e86]: https://www.jianshu.com/p/ada94d3a3e86
[2020092817050346.png_pic_center]: /images/20221123/0f53e237597944dd97e3d7db9e441b34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/52066524586648a9b3ef3208511b5ee0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/1041ce0377674c658787fb6b532776d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/e48be2e7e02d404297d01c43d0cbf30c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/29dcae197fea4313af3f8afa19959f3e.png
[https_github.com_weui_weui-wxss]: https://github.com/weui/weui-wxss/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/ba2884396048413f8ed9cd725105ce5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/e9971fd8d6d244d88422f24b84fa6386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/b7865cbde9b14f19a267dfa2065c9a23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/4d662b7213174012875e258d90cb9261.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/32ed00fc46c14ac8b947c3bc3706c724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/fa9146d4ec5a47eab5d10800bf06bf13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/f464da54c645496897a873a6ac3f9029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/cf75efe36c19446088fdc5db6b26a70b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/0020fa23efa64489909881c97b7860c4.png