創(chuàng)建一個uniapp項目
下載 HBuilderX 澡腾,安裝 sass 插件
新建項目,選擇 uniapp祟偷。
├─pages // 頁面存放文件夾,等同于 微信小程序中的 pages
│ └─index // 默認(rèn)生成的頁面
├─static // 靜態(tài)資源存放文件夾
└─uni_modules // uni-app組件目錄
│ └─uni-xxx // uni-app 所提供的業(yè)務(wù)組件卫旱,等同于 微信小程序中的組件
├─App.vue // 應(yīng)用配置文件佑吝,用來配置全局樣式、生命周期函數(shù)等鳖擒,等同于 微信小程序中的app.js
└─main.js // 項目入口文件
├─mainfest.json // 配置應(yīng)用名稱溉浙、appid、logo蒋荚、版本等打包信息戳稽,
└─pages.json // 配置頁面路徑、窗口樣式期升、tabBar 等頁面類信息惊奇,等同于 微信小程序中的app.json
└─uni.scss // uni-app內(nèi)置的常用樣式變量
使用微信開發(fā)者工具 運行項目
-
在 HBuilderX 菜單選項中互躬,選中"運行",選中"運行到小程序模擬器" 颂郎,點擊"運行設(shè)置"吼渡,設(shè)置 微信小程序開發(fā)工具 的路徑(將應(yīng)用程序中的APP圖標(biāo)拖到終端,即可獲得路徑)乓序。
微信開發(fā)者工具 "詳情"->"本地設(shè)置" ?不校驗合法域名
微信開發(fā)者工具 菜單欄 "設(shè)置"->"安全設(shè)置" ?服務(wù)端口
使用 VSCode 編寫代碼
直接下載VSCode诞吱,然后打開項目文件,編輯后 Command + S保存竭缝,即可在微信開發(fā)者工具的模擬器上看到運行效果房维。
安裝擴展:
- uni-helper - 讓開發(fā)者在 VSCode 中開發(fā) uni-* 的體驗盡可能好。
- uni-app-snippets - 支持 uni-app 基本能力的代碼片段抬纸,包括組件和 API
-
uni-app-schemas - 支持 uni-app
pages.json
和manifest.json
簡單的格式校驗 - uni-ui-snippets - 支持 uni-ui 組件代碼片段