正在開(kāi)發(fā)的微信小程序,想使用weui組件庫(kù)。? 步驟如下:
基礎(chǔ):1.小程序開(kāi)發(fā)工具:1.06.22
1. 初始化
以管理員身份運(yùn)行命令行窗口(cmd)或使用VSCode進(jìn)入終端,在cmd中進(jìn)入項(xiàng)目的根目錄。然后輸入以下命令:
npm init
后面一路按回車健即可,最終會(huì)在項(xiàng)目的根目錄中創(chuàng)建出一個(gè)名為package.json的文件。
2. 安裝weui組件庫(kù)
在cmd中緊接著輸入以下命令:
?npm install weui-miniprogram --save
命令執(zhí)行完畢后會(huì)多出來(lái)一個(gè)node_modules文件夾,里面包含了weui組件庫(kù)。
3. 構(gòu)建npm
在項(xiàng)目根目錄找到package.config.json文件,修改相關(guān)的配置如下:
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
在微信開(kāi)發(fā)者工具中,選擇“工具”->“構(gòu)建npm”。 構(gòu)建完成會(huì)出現(xiàn)這樣的目錄結(jié)構(gòu)。
4. 重啟項(xiàng)目
在開(kāi)發(fā)者工具中“項(xiàng)目”->“重新打開(kāi)此項(xiàng)目”,完成對(duì)項(xiàng)目的重啟。
注意:這一步非常重要?。?!否則引入組件會(huì)提示找不到文件!??!
5. 引入wxss
在app.wxss中,引入weui庫(kù)的wxss文件
@import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
引入時(shí)要根據(jù)實(shí)際情況調(diào)整路徑。
6. 引入組件
7.模板中使用組件
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-501946.html文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-501946.html
?
到了這里,關(guān)于微信小程序前端引入weui組件庫(kù)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!