最近在研究微信小程序,發現一款ui框架want,在這里記錄下使用方法,以及簡單的處理骨架屏的方法
want小程序官方文檔地址:https://youzan.github.io/vant-weapp/#/intro,
第一步 通過 npm 安裝
需要注意的是 package.json 和 node_modules 必須在 miniprogram 目錄下(沒有不要緊,先安裝這個,后面細說)
# 通過 npm 安裝 npm i @vant/weapp -S --production # 通過 yarn 安裝 yarn add @vant/weapp --production # 安裝 0.x 版本 npm i vant-weapp -S --production
第二步 構建 npm 包
打開微信開發者工具,點擊 工具 -> 構建 npm,並勾選 使用 npm 模塊 選項,構建完成后,即可引入組件(如果沒有構建npm選項建議更新微信開發者工具)
tps:點擊構建npm出現沒有找到可以構建的npm
解決方法:1、找到小程序文件夾的根目錄,執行 npm init 一直回車回車。。。
2、執行npm i @vant/weapp -S --production
執行完再去小程序里面執行構建npm包就可以了
步驟三 修改 app.json
將 app.json 中的 "style": "v2"
去除,小程序的新版基礎組件強行加上了許多樣式,難以去除,不關閉將造成部分組件樣式混亂。
步驟四 項目中使用ui組件(以button為例)
1、在頁面的json文件里引入button組件
2、wxml文件里寫入組件
使用骨架屏小總結
1、什么是骨架屏?
骨架屏可以理解為是當數據還未加載進來前,頁面的一個空白版本,在頁面完全渲染完成之前,用戶會看到一個樣式簡單,描繪了當前頁面的大致框架的骨架屏頁面,然后骨架屏中各個占位部分被實際資源完全替換,這個過程中用戶會覺得內容正在逐漸加載即將呈現,降低了用戶的焦躁情緒,使得加載過程主觀上變得流暢。

2、在vant中使用骨架屏
官網地址(官網比我寫的詳細一萬倍):https://youzan.github.io/vant-weapp/#/skeleton
tps1:修改固定樣式(修改每一行的高度,這個在官方文檔里面沒有說明)
tps2:在驗證效果時最好寫個定時器來看效果,官方文檔寫法效果不明顯