一、uni-app介紹

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

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

具有vue和微信小程序的開發(fā)經(jīng)驗，可快速上手uni-app

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

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

1.2 環(huán)境搭建

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

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

下載App開發(fā)版，可開箱即用

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

1.3 利用HbuilderX初始化項目

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

1.4 運行項目

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

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

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

注意：

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

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

• ??pages.json?? 文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等
• ??manifest.json?? 文件是應用的配置文件，用于指定應用的名稱、圖標、權(quán)限等。
• ??App.vue???是我們的跟組件，所有頁面都是在??App.vue??下進行切換的，是頁面入口文件，可以調(diào)用應用的生命周期函數(shù)。
• ??main.js???是我們的項目入口文件，主要作用是初始化??vue??實例并使用需要的插件。
• ??uni.scss???文件的用途是為了方便整體控制應用的風格。比如按鈕顏色、邊框風格，??uni.scss??文件里預置了一批scss變量預置。
• ??unpackage??就是打包目錄，在這里有各個平臺的打包文件
• ??pages??所有的頁面存放目錄
• ??static??靜態(tài)資源目錄，例如圖片等
• ??components??組件存放目錄

為了實現(xiàn)多端兼容，綜合考慮編譯速度、運行性能等因素，??uni-app?? 約定了如下開發(fā)規(guī)范：

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

2.全局配置和頁面配置

2.1 通過globalStyle進行全局配置

用于設置應用的狀態(tài)欄、導航條、標題、窗口背景色等。?

?2.2 創(chuàng)建新的message頁面

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

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

2.3 通過pages來配置頁面

pages數(shù)組數(shù)組中第一項表示應用啟動頁

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

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

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

2.4 配置tabbar

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

Tips:

• 當設置 position 為 top 時，將不會顯示 icon
• tabBar 中的 list 是一個數(shù)組，只能配置最少2個、最多5個 tab，tab 按數(shù)組的順序排序。

案例代碼：

"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啟動模式配置

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

屬性說明：

list說明：

到此這篇關于uni-app的基本使用的文章就介紹到這了,更多相關uni-app基本使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論