微信小程序学习(三):在微信开发者工具中,使用WeUI前端美化框架,微信小程序

微信小程序学习(三):在微信开发者工具中,使用WeUI

这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用
网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件导入项目中,然后引用

一、先下载WeUI

这个是下载的GitHub地址:
https://github.com/weui/weui-wxss/
下载完后解压是这个样子的
微信小程序学习(三):在微信开发者工具中,使用WeUI前端美化框架,微信小程序_第1张图片
然后打开src==>style,找到weui.wxss文件
微信小程序学习(三):在微信开发者工具中,使用WeUI前端美化框架,微信小程序_第2张图片
然后复制weui.wxss文件到项目的总目录下
微信小程序学习(三):在微信开发者工具中,使用WeUI前端美化框架,微信小程序_第3张图片
我这里就是Test7里面

二、在app.wxss中配置

我是放在总目录下的,所以这样就行了,

/**app.wxss**/
@import "weui.wxss";

另外说一下,每个"…/“是向上翻一层目录,没有数对”…/"的话就可能引用不到
在这里插入图片描述

三、实验成果

先上代码



  
    
    
      充值信息
    
    
  

这个是wxml的页面
这个是没有连接上的样子,代码就写了一个充值信息的,就看看效果,别的没拷
在这里插入图片描述
这个是连接后的样子,可以看到在不改变wxss的情况下,仅仅是把app.wxss中加了配置,就改变了样式
微信小程序学习(三):在微信开发者工具中,使用WeUI前端美化框架,微信小程序_第4张图片

因为是配置到全局内的,所以 不需要在别的地方额外配一次,都是可以引用的

另外加上两个可以看样式的网址:
这个好像是微信的
https://weui.io
这个和上面那个差不多,不过感觉好看点
http://weui.shanliwawa.top

你可能感兴趣的:(微信小程序学习)