聊聊初學者如何使用uniapp

隨著手機應用市場的日益壯大，越來越多的公司或個人開始開發自己的手機應用。但是，學習多種程式語言、適合各種手機系統和大小不一的螢幕等問題讓許多開發者望而卻步。瑞士軍刀般的跨平台開發框架uniapp應運而生，它是一款可以在多個平台上運行的開發框架，可以讓開發者在一處程式碼下開發出可適用於多個平台的全平台應用程式。

uniapp基於Vue框架，將其原始碼編譯成不同平台的原生應用程式。支援的平台包括：iOS、Android、H5、小程式、快應用程式、App等。本文將指導初學者如何使用uniapp。

安裝uniapp

首先，在安裝uniapp之前，你需要先安裝Node.js環境，並確保其版本為8.0以上。

安裝完Node.js環境之後，我們可以使用npm（Node.js的套件管理工具）命令列安裝uniapp腳手架工具。

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

這樣，就可以安裝uniapp成功，並建立出一個初始專案my-project。

uniapp的目錄結構

建立好專案後，我們來看看專案的目錄結構。專案的主要資料夾包括：

• components：存放元件資料夾，以 .vue 後綴結尾。
• pages：存放頁面資料夾，以 .vue 後綴結尾。
• static：存放靜態文件，如圖片及字體等。
• unpackage：專案打包後產生的資料夾。
• App.vue：整個應用程式的主頁。
• main.js：整個應用程式的入口檔案。

寫uniapp應用程式

我們已經成功安裝了uniapp並創建出一個初始項目，那麼接下來，我們來寫一些簡單的程式碼。

建立一個頁面

在專案的pages資料夾中新建一個vue文件，如home.vue。在檔案中寫入以下程式碼：

<template>
  <view class="content">
    <text>{{ greeting }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        greeting: 'Hello uniapp!'
      }
    }
  }
</script>

這樣，我們就新建了一個頁面。

導覽到另一個頁面

下一步，假設我們要在頁面1中點選一個按鈕，然後跳到頁面2。我們可以在頁面1中加入以下程式碼：

<button @click="goToPage2">Go to page 2</button>

當點擊按鈕後，需要在頁面1的script標籤中加入以下程式碼：

methods: {
  goToPage2() {
    uni.navigateTo({
      url: '/pages/page2.vue'
    })
  }
}

這樣，我們就可以在頁面1中跳到頁面2。

圖片的引入

假設我們需要在頁面中引入一張圖片，你需要先將圖片存放在static資料夾下，然後在.vue檔案中使用相對路徑來引用。

<template>
  <view>
    <image :src="`/static/${image}`" mode="aspectFit"></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        image: 'image.jpg'
      }
    }
  }
</script>

發起網路請求

get請求：

uni.request({
  url: 'https://www.xxx.com/api/list',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

post請求：

uni.request({
  url: 'https://www.xxx.com/api/list',
  method: 'POST',
  data: {
    page: 1,
    limit: 10
  },
  success(res) {
    console.log(res)
  }
})

執行uniapp

完成上述程式碼撰寫後，我們需要在命令列中執行以下命令：

npm run dev:%PLATFORM%

%PLATFORM%代表所需的平台，此處可以填寫iOS、Android等。執行以上指令後，就可以在模擬器或真機上預覽專案效果了。

總結

uniapp為開發者提供了跨平台開發的解決方案，大幅降低了開發成本，同時也能夠提升開發效率。使用它，開發者只需要掌握一種程式語言，就可以在多個平台上開發出全平台應用，幫助開發者更有效率地進行開發操作。

以上是聊聊初學者如何使用uniapp的詳細內容。更多資訊請關注PHP中文網其他相關文章！