uni-app如何使用

這篇文章主要介紹了uni-app如何使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇uni-app如何使用文章都會有所收獲，下面我們一起來看看吧。

一、uni-app介紹

uni-app 是一個使用  Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺。

即使不跨端，uni-app同時也是更好的小程序開發框架。

具有vue和微信小程序的開發經驗，可快速上手uni-app

1.1為什么要去學習uni-app？

相對開發者來說，減少了學習成本，因為只學會uni-app之后，即可開發出iOS、Android、H5、以及各種小程序的應用，不需要再去學習開發其他應用的框架，相對公司而言，也大大減少了開發成本。

1.2 環境搭建

安裝編輯器HbuilderX (應用商城下載即可）

HBuilderX是通用的前端開發工具，但為uni-app做了特別強化。

下載App開發版，可開箱即用

安裝微信開發者工具  微信開發者工具下載地址與更新日志 | 微信開放文檔

1.3 利用HbuilderX初始化項目

點擊HbuilderX菜單欄文件>項目>新建
選擇uni-app,填寫項目名稱，項目創建的目錄

1.4 運行項目

在菜單欄中點擊運行，運行到瀏覽器，選擇瀏覽器即可運行

在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 微信開發者工具，即可在微信開發者工具里面體驗uni-app

在微信開發者工具里運行：進入hello-uniapp項目，點擊工具欄的運行 -> 運行到手機或模擬器 -> 選擇調式的手機

注意：

如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功
微信開發者工具在設置中安全設置，服務端口開啟

1.5 介紹項目目錄和文件作用

• pages.json 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等

• manifest.json 文件是應用的配置文件，用于指定應用的名稱、圖標、權限等。

• App.vue是我們的跟組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件，可以調用應用的生命周期函數。

• main.js是我們的項目入口文件，主要作用是初始化vue實例并使用需要的插件。

• uni.scss文件的用途是為了方便整體控制應用的風格。比如按鈕顏色、邊框風格，uni.scss文件里預置了一批scss變量預置。

• unpackage就是打包目錄，在這里有各個平臺的打包文件

• pages所有的頁面存放目錄

• static靜態資源目錄，例如圖片等

• components組件存放目錄

為了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發規范：

頁面文件遵循 Vue 單文件組件 (SFC) 規范
組件標簽靠近小程序規范，詳見 uni-app 組件規范
接口能力（JS API）靠近微信小程序規范，但需將前綴wx 替換為uni，詳見 uni-app接口規范
數據綁定及事件處理同Vue.js 規范，同時補充了App及頁面的生命周期
為兼容多端運行，建議使用flex布局進行開發

2.全局配置和頁面配置

2.1 通過globalStyle進行全局配置

用于設置應用的狀態欄、導航條、標題、窗口背景色等。

2.2 創建新的message頁面

右鍵pages新建message目錄，在message目錄下右鍵新建.vue文件,并選擇基本模板

<template>
  <view>
    這是信息頁面
  </view>
</template>
 
<script>
</script>
 
<style>
</style>

2.3 通過pages來配置頁面

pages數組數組中第一項表示應用啟動頁

"pages": [ 、
    {
      "path":"pages/message/message"
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }
  ]

通過style修改頁面的標題和導航欄背景色，并且設置h6下拉刷新的特有樣式

"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
    {
      "path":"pages/message/message",
      "style": {
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true,
        "disableScroll": true,
        "h6": {
          "pullToRefresh": {
            "color": "#007AFF"
          }
        }
      }
    }
  ]

2.4 配置tabbar

如果應用是一個多 tab 應用，可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁。

Tips:

• 當設置 position 為 top 時，將不會顯示 icon

• tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

案例代碼：

"tabBar": {
    "list": [
      {
        "text": "首頁",
        "pagePath":"pages/index/index",
        "iconPath":"static/tabs/home.png",
        "selectedIconPath":"static/tabs/home-active.png"
      },
      {
        "text": "信息",
        "pagePath":"pages/message/message",
        "iconPath":"static/tabs/message.png",
        "selectedIconPath":"static/tabs/message-active.png"
      },
      {
        "text": "我們",
        "pagePath":"pages/contact/contact",
        "iconPath":"static/tabs/contact.png",
        "selectedIconPath":"static/tabs/contact-active.png"
      }
    ]
  }

2.5 condition啟動模式配置

啟動模式配置，僅開發期間生效，用于模擬直達頁面的場景，如：小程序轉發后，用戶點擊所打開的頁面。

屬性說明：

list說明：

關于“uni-app如何使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“uni-app如何使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。