小程式的頁面層級結構

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/16/12503954.html
-Advertisement-
Play Games

新建項目以後,可以看到官方的種子項目 這是首頁 點擊頭像可以跳轉到另一個頁面 目錄結構 wxml類似於html,wxss類似於css,.json通常用來做配置(可以沒有) 應用程式級別文件 app.js 應用程式級別的邏輯 app.json 應用程式級別的配置 app.wxss 應用程式級別的全局樣 ...


新建項目以後,可以看到官方的種子項目

這是首頁

 

 

點擊頭像可以跳轉到另一個頁面

 

 

目錄結構

 

 wxml類似於html,wxss類似於css,.json通常用來做配置(可以沒有)

 

應用程式級別文件

 

 app.js 應用程式級別的邏輯

app.json 應用程式級別的配置

app.wxss 應用程式級別的全局樣式

 

就近原則:

在app.wxss里設置

text{
  color:lightblue;
}

在index.wxss里設置

text{
  color:pink;
}

最終頁面顯示粉色

 

 

json配置文件也遵循就近原則

 

project.config.json 是小程式自動生成的,一般來說不需要去管理和改動

utils/util.js 幫助類文件,裡面有一些功能性的函數

 

當然,這目錄結構是官方推薦的目錄結構,也不是一定要遵循的

這是一個簡單的種子項目,有時並不能滿足複雜的項目需求,可以根據實際情況修改目錄結構

 

小程式的頁面層級結構

 

 

小程式歷史版本曾經對層級做過限制,隨著版本更替也許會有不同的限制,也可能不做限制

但還是建議層級不要超過5層,層級太多非常影響用戶體驗;而且會導致小程式體積變大(一般限制是2M,但後期可能會調整)

如果因為某些原因小程式體積確實超出,可以使用【分包載入】

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 為什麼模擬器iphone6解析度375,而設計圖一般給750 • 1個pt可以有1個px構成,也可以有2個,還可以有3個甚至更多組成• Iphone6下 2個 px才構成一個 pt 而微信小程式給出的是邏輯解析度,而設計師給的一般是物理解析度 如何做不同解析度設備的自適應?• 以ip6的物理像素75 ...
  • 首先刪除index/log/utils文件夾 還有app.json/app.js/app.wxss 會出現報錯,未找到app.json文件 然後新建自己的app.js/app.json/app.wxss 現在的報錯是 先不管它,等下再說 在pages目錄下新建一個welcome目錄 在welcome ...
  • 1、查看本機公鑰; 打開git bush,執行 cd ~/.ssh 進入.ssh文件夾(C:\Users\Administrator\.ssh) 執行 ls 命令,查看列表 執行 cat id_rsa.pub 或者 vim id_rsa.pub 查看id_rsa.pub這個文件,出現的一串代碼即是公 ...
  • 實例 當雙擊按鈕時,隱藏或顯示元素: ~~~ $("button").dblclick(function(){ $("p").slideToggle(); }); ~~~ "親自試一試" 定義和用法 當雙擊元素時,會發生 dblclick 事件。 當滑鼠指針停留在元素上方,然後按下並鬆開滑鼠左鍵時, ...
  • 實例 當點擊滑鼠時,隱藏或顯示 p 元素: ~~~ $("button").bind("click",function(){ $("p").slideToggle(); }); ~~~ "親自試一試" 定義和用法 bind() 方法為被選元素添加一個或多個事件處理程式,並規定事件發生時運行的函數。 ...
  • 實例 構建表單中所有值的列表: ~~~ $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); ~~~ "親自試一試" 定義和用法 map() 把每個元素通過函數傳遞到當前匹配集合中 ...
  • 項目常用eslint配置(Vue/React/TypeScript) 記錄一下常用的eslint配置。 Vue項目常用eslint配置 需要安裝依賴(Vue這裡使用standard擴展和vue插件,所以需要安裝) .eslintrc.js文件配置 javascript // https://esli ...
  • 實例 本例演示如何通過 closest() 完成事件委托。當被最接近的列表元素或其子後代元素被點擊時,會切換黃色背景: ~~~ $( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("h ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...