@ZZHow(ZZHow1024)

參考課程:

【尚硅谷微信小程序開發教程】

[https://www.bilibili.com/video/BV1LF4m1E7kB]

009_文件和目錄結構介紹+新建頁面與調試基礎庫

• 一個完整的小程序項目分為兩個部分：主體文件、頁面文件

• 主體文件又稱全局文件，能夠作用于整個小程序，影響到小程序的每個頁面，主體文件必須放到項目的根目錄下

  • 主體文件由三部分組成：
    1. app.js：小程序入口文件
    2. app.json：小程序的全局配置文件
    3. app.wxss：小程序的全局樣式
  • 注意：主體文件的名字必須是app，app.js 和 app.json 文件是必須的

• 頁面文件 是每個頁面所需的文件，小程序頁面文件都存放在 pages 目錄下，一個頁面一個文件夾

  • 每個頁面通常由四個文件組成，每個文件只對當前頁面有效：
    1. .js：頁面邏輯
    2. .wxml：頁面結構
    3. …wxss：頁面樣式
    4. .json：小頁面配置
  • 注意：.js文件 和 .wxml 文件是必須的

• 將 Skyline 渲染模式切換為 Webview 渲染模式

  • 原因：Skyline 渲染模式是新的渲染模式，目前還不成熟

  • 操作：

    **//去掉以下配置項**"renderer": "skyline","rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}},"componentFramework": "glass-easel",
    

• 快速新建頁面：

  • 在 app.json 中找到 pages 配置項，添加一個頁面即可。

010_如何調試小程序項目

• 預覽、真機調試：手機掃碼調試
• 模擬器調試：開發者工具右側
  • 若出現不符合預期的情況：
    • 清緩存
    • 項目 - 重新打開此項目

011_配置文件介紹

• 常見的四個配置文件
  1. app.json：小程序全局配置文件，用于配置小程序的一些全局屬性和頁面路由。
  2. 頁面json：小程序頁面配置文件，也稱局部配置文件，用于配置當前頁面的窗口樣式、頁面標題等。
  3. project.config.json：小程序項目的配置文件，用于保存項目的一些配置信息和開發者的個人設置。
  4. sitemap.json：配置小程序及其頁面是否允許被微信索引l，提高小程序在搜索引擎搜索到的概率。

全局配置

• pages 配置：

  • 頁面路由不需要寫文件后綴，框架會自動去尋找對應位置的四個文件進行處理。
  • 小程序中新增/減少頁面，都需要對pages數組進行修改。
  • 未指定 entryPagePath 時，數組的第一項代表小程序的初始頁面（首頁）。

• window 配置：

  • “navigationBarTitleText”：頂部標題

  • "navigationBarBackgroundColor”：頂部標題顏色

  • “enablePullDownRefresh”：是否允許下拉

  • "backgroundColor”：窗口的背景色

  • 官方文檔：

    全局配置 | 微信開放文檔

• tabBar配置：

  • “color”：tab 上的文字默認顏色，僅支持十六進制顏色

  • “selectedColor”：tab 上的文字選中時的顏色，僅支持十六進制顏色

  • 官方文檔：

    全局配置 | 微信開放文檔

頁面配置

• 會覆蓋全局配置中的內容

項目配置

• project.private.config.json 寫到 .gitignore 避免版本管理的沖突。

• 與最終編譯結果有關的設置必須設置到 project.config.json 中。

• 如何配置sass

  "useCompilerPlugins": ["sass"
  ]
  

  之后將 .wxss 文件改為 .scss

sitemap.json配置

• 沒有sitemap.json則默認所有頁面都能被索引。
• {“action”: “allow”, “page”: “*”}是優先級最低的默認規則，未顯式指明"disallow"的都默認被索引。