微信小程序使用vant框架 以及使用骨架屏小計


最近在研究微信小程序,發現一款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:在驗證效果時最好寫個定時器來看效果,官方文檔寫法效果不明顯

 

 

 

 

 



 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM