一、uni-app介紹

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

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

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

1.1為什么要去學(xué)習(xí)uni-app？

相對(duì)開(kāi)發(fā)者來(lái)說(shuō)，減少了學(xué)習(xí)成本，因?yàn)橹粚W(xué)會(huì)uni-app之后，即可開(kāi)發(fā)出iOS、Android、H5、以及各種小程序的應(yīng)用，不需要再去學(xué)習(xí)開(kāi)發(fā)其他應(yīng)用的框架，相對(duì)公司而言，也大大減少了開(kāi)發(fā)成本。

1.2 環(huán)境搭建

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

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

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

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

1.3 利用HbuilderX初始化項(xiàng)目

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

1.4 運(yùn)行項(xiàng)目

在菜單欄中點(diǎn)擊運(yùn)行，運(yùn)行到瀏覽器，選擇瀏覽器即可運(yùn)行

在微信開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app

在微信開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到手機(jī)或模擬器 -> 選擇調(diào)式的手機(jī)

注意：

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

1.5 介紹項(xiàng)目目錄和文件作用

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

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

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

2.全局配置和頁(yè)面配置

2.1 通過(guò)globalStyle進(jìn)行全局配置

用于設(shè)置應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。?

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

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

<template>
  <view>
    這是信息頁(yè)面
  </view>
</template>
 
<script>
</script>
 
<style>
</style>

2.3 通過(guò)pages來(lái)配置頁(yè)面

pages數(shù)組數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)

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

通過(guò)style修改頁(yè)面的標(biāo)題和導(dǎo)航欄背景色，并且設(shè)置h5下拉刷新的特有樣式

"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：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

如果應(yīng)用是一個(gè)多 tab 應(yīng)用，可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)。

Tips:

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

案例代碼：

"tabBar": {
    "list": [
      {
        "text": "首頁(yè)",
        "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啟動(dòng)模式配置

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

屬性說(shuō)明：

list說(shuō)明：

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

最新評(píng)論