1.創建一個小程序
2. 重置 app.js 中的代碼
App({
})
3.刪除app.json裏面的componentFramework,pages/logs/logs目錄要刪除,pages/logs的文件刪除
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#ffffff",
}, "style": "v2", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }
"navigationStyle": "custom" 是設置爲自定義導航,不需要可以刪除。
4.刪除app.wxss裏的內容
5.初始化Index文件夾內的所有內容都爲空
6.更新 utils 下 util.js 的文件名爲 formatTime.js
自定義構建 npm + 集成Sass
1.根目錄下添加文件夾miniprogram,我們把主要用到的文件夾pages,utils,App.*,sitemap.json 放入miniprogram內
2.創建package.json文件:
右鍵目錄—>在內鍵終端中打開——> 輸入: npm init -y ——> 回車;
3.配置 project.config.json 的 setting.packNpmRelationList 項,指定 packageJsonPath和miniprogramNpmDistDir 的位置
packageJsonPath 表示 node_modules 源對應的 package.json;
miniprogramNpmDistDir 表示 node_modules 的構建結果目標位置;
4.安裝vant,vant是一個UI庫
右鍵目錄—>在內鍵終端中打開——> 輸入: npm i @vant/weapp ——> 回車;
構建:點擊工具——>構建npm
清除緩存,重新編譯。
配置sass:在project.config.json添加useCompilerPlugins"[{"sass"}]
如果報錯,請重新打開項目。
項目中的.wxss可以改成.scss了
VsCode推薦的幾個插件
1. WXML - Language Service
2. prettier
3. 微信小程序開發工具
4. 微信小程序助手-Y
5. 小程序開發助手(可選)