在微信开发者工具中,使用WeUI前端美化框架,微信小程序

这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用
网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件导入项目中,然后引用
一、先下载WeUI
这个是下载的GitHub地址:
https://github.com/weui/weui-wxss/
下载完后解压是这个样子的
在这里插入图片描述
然后打开src==>style,找到weui.wxss文件
在这里插入图片描述
然后复制weui.wxss文件到项目的总目录下
在这里插入图片描述
我这里就是Test7里面

二、在app.wxss中配置
我是放在总目录下的,所以这样就行了,

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


在这里插入图片描述
三、实验成果
先上代码

<!-- 充值信息 -->
<view class="weui-panel">
  <view bindtap='logout' class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <!-- 这里之后可以放图标 -->
    <view class="weui-cell__bd weui-cell_primary margin-left-icon">
      <view class='text-size-09 init-wordspace'>充值信息</view>
    </view>
    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  </view>
</view>

这个是wxml的页面
这个是没有连接上的样子,代码就写了一个充值信息的,就看看效果,别的没拷

这个是连接后的样子,可以看到在不改变wxss的情况下,仅仅是把app.wxss中加了配置,就改变了样式

因为是配置到全局内的,所以 不需要在别的地方额外配一次,都是可以引用的
另外加上两个可以看样式的网址:
这个好像是微信的
https://weui.io
这个和上面那个差不多,不过感觉好看点
http://weui.shanliwawa.top

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值