創(chuàng)建時(shí)間:20210803
1、原生小程序開發(fā)
2娃圆、引入vant-weapp UI框架
3止后、vant-weapp 文檔:https://vant-contrib.gitee.io/vant-weapp/#/home
1含长、創(chuàng)建一個(gè)文件夾 mini-vant诀豁,在此文件夾用微信開發(fā)者工具初始化一個(gè)項(xiàng)目
2阱驾、修改app.json就谜,刪除"style": "v2"
將 app.json 中的 `"style": "v2"` 去除
小程序的[新版基礎(chǔ)組件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)
強(qiáng)行加上了許多樣式,難以覆蓋里覆,不關(guān)閉將造成部分組件樣式混亂丧荐。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2", ********此行刪除
"sitemapLocation": "sitemap.json"
}
3、修改 project.config.json
開發(fā)者工具創(chuàng)建的項(xiàng)目喧枷,miniprogramRoot 默認(rèn)為 miniprogram虹统,package.json 在其外部,npm 構(gòu)建無法正常工作隧甚。
需要手動(dòng)在 project.config.json 內(nèi)添加如下配置车荔,使開發(fā)者工具可以正確索引到 npm 依賴的位置。
注意: 由于目前新版開發(fā)者工具創(chuàng)建的小程序目錄文件結(jié)構(gòu)問題戚扳,npm構(gòu)建的文件目錄為miniprogram_npm忧便,
并且開發(fā)工具會(huì)默認(rèn)在當(dāng)前目錄下創(chuàng)建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置為'./'即可
{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],
},
}
4帽借、初始化項(xiàng)目珠增,進(jìn)入mini-vant文件夾打開命令行
yarn init 自行輸入內(nèi)容
yarn init -y 自動(dòng)生成內(nèi)容
npm同上
最后會(huì)在項(xiàng)目里面生成package.json文件
5、安裝vant-weapp
# 通過 npm 安裝
npm i @vant/weapp -S --production
# 通過 yarn 安裝
yarn add @vant/weapp --production
6砍艾、微信開發(fā)者工具構(gòu)建npm工具
7蒂教、構(gòu)建完成后,發(fā)現(xiàn)項(xiàng)目根目錄多了一個(gè)文件夾脆荷,如下圖
8凝垛、微信開發(fā)者工具配置使用npm模塊
9、引用組件
全局引用
** 配置一次蜓谋,全部頁面都可以使用
app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
局部引用
** 頁面里面的json文件引用梦皮,只能當(dāng)前頁面使用
index.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}