01_小程序的構建

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