01_小程式的構建

野码發表於2024-04-21

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",
"navigationStyle": "custom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
"navigationBarTitleText": "Weixin", 導航標題
"navigationBarBackgroundColor": "#ffffff" 導航的顏色

"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. 小程式開發助手(可選)

相關文章