Skip to content

模板下載 ​

本頁面提供了uni-app開發中常用的項目模板和頁面模板,幫助開發者快速搭建應用,讓你的開發效率翻倍!

目錄 ​

官方項目模板 ​

基礎模板 ​

uni-app官方提供的基礎項目模板,適合從零開始的項目,新手也能輕鬆上手!

模板名稱描述下載連結
默認模板包含基本頁面結構的uni-app項目下載
Hello uni-app演示uni-app框架的組件、API、模板等下載
uni-ui項目模板集成uni-ui的項目模板下載

行業模板 ​

針對特定行業的項目模板,包含行業常用功能和頁面,讓你的項目更專業!

模板名稱描述下載連結
電商模板包含商品列表、詳情、購物車、訂單等電商核心功能下載
新聞資訊模板包含文章列表、詳情、評論等資訊類功能下載
聊天社交模板包含即時通訊、好友列表、聊天界面等社交功能下載
影片模板包含影片播放、列表、評論等影片應用功能下載
問答社區模板包含問題發布、回答、點讚等社區互動功能下載

頁面模板 ​

登錄註冊模板 ​

各種風格的登錄註冊頁面模板,讓你的應用登錄界面更吸引人!

模板名稱描述預覽下載連結
簡約登錄模板簡潔風格的登錄/註冊頁面簡約登錄模板下載
圖片背景登錄模板帶背景圖的登錄/註冊頁面圖片背景登錄模板下載
驗證碼登錄模板支援短信驗證碼登錄的頁面驗證碼登錄模板下載
社交帳號登錄模板支援微信、QQ等第三方登錄的頁面社交帳號登錄模板下載

列表模板 ​

各種風格的列表頁面模板,讓你的數據展示更美觀!

模板名稱描述預覽下載連結
卡片列表卡片式佈局的列表頁面卡片列表下載
圖文列表圖文混排的列表頁面圖文列表下載
商品列表適合電商應用的商品列表頁面商品列表下載
瀑布流列表瀑布流佈局的列表頁面瀑布流列表下載

詳情頁模板 ​

各種風格的詳情頁面模板,讓內容展示更精彩!

模板名稱描述預覽下載連結
文章詳情適合部落格、新聞等文章詳情頁面文章詳情下載
商品詳情適合電商應用的商品詳情頁面商品詳情下載
影片詳情適合影片應用的影片詳情頁面影片詳情下載
個人資料用戶個人資料頁面個人資料下載

表單模板 ​

各種表單頁面模板,讓數據收集更輕鬆!

模板名稱描述預覽下載連結
基礎表單包含常用表單元素的頁面基礎表單下載
分步表單分步驟填寫的表單頁面分步表單下載
高級表單包含複雜驗證和互動的表單頁面高級表單下載
搜索頁面各種搜索頁面模板搜索頁面下載

組件模板 ​

導航組件模板 ​

各種導航組件模板,讓你的應用導航更流暢!

模板名稱描述預覽下載連結
頂部導航欄自定義頂部導航欄模板頂部導航欄下載
底部選項卡自定義底部選項卡模板底部選項卡下載
側邊欄導航側邊欄導航模板側邊欄導航下載
分段器導航分段器導航模板分段器導航下載

功能組件模板 ​

各種功能組件模板,讓你的應用功能更豐富!

模板名稱描述預覽下載連結
圖片上傳圖片選擇和上傳組件圖片上傳下載
評論組件評論列表和發表評論組件評論組件下載
日曆組件日期選擇和日曆展示組件日曆組件下載
購物車組件購物車功能組件購物車組件下載

如何使用模板 ​

方法一:透過HBuilderX創建項目時使用模板 ​

  1. 打開HBuilderX,點擊"文件" > "新建" > "項目"
  2. 在項目模板列表中選擇需要的模板
  3. 填寫項目名稱和存儲路徑
  4. 點擊"創建"按鈕完成項目創建

方法二:導入已下載的模板 ​

  1. 下載模板壓縮包並解壓
  2. 打開HBuilderX,點擊"文件" > "導入" > "從本地目錄導入"
  3. 選擇解壓後的模板文件夾
  4. 點擊"導入"按鈕完成導入

方法三:複製模板代碼到現有項目 ​

  1. 下載並解壓模板
  2. 打開模板文件夾,找到需要的頁面或組件代碼
  3. 將代碼複製到您的項目中對應位置
  4. 根據需要修改和調整代碼

模板開發和貢獻 ​

如果您有優秀的模板想要分享給社區,可以透過以下方式貢獻:

  1. 在DCloud插件市場上傳您的模板
  2. 在uni-app GitHub倉庫提交PR
  3. 在uni-app社區分享您的模板

常見問題 ​

模板無法正常運行怎麼辦? ​

  1. 檢查是否安裝了模板依賴的插件和組件
  2. 確認HBuilderX和uni-app版本是否與模板要求一致
  3. 查看模板說明文檔中的注意事項
  4. 在社區中搜索或提問相關問題

如何修改模板樣式? ​

  1. 找到模板中的樣式文件(通常是.css、.scss或.less文件)
  2. 根據需要修改樣式代碼
  3. 如果使用了主題變量,可以透過修改主題變量統一調整樣式

如何擴展模板功能? ​

  1. 分析模板代碼結構,了解實現原理
  2. 在不破壞原有功能的基礎上添加新功能
  3. 遵循模板的代碼風格和命名規範
  4. 測試確保新功能不影響原有功能

資源連結 ​

一次開發,多端部署 - 讓跨平台開發更簡單