在微信開發者工具中,使用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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章