聊聊初學者如何使用uniapp-uni-app-PHP中文網

首頁

web前端

uni-app

聊聊初學者如何使用uniapp

PHPz

Apr 10, 2023 pm 02:20 PM

隨著手機應用市場的日益壯大，越來越多的公司或個人開始開發自己的手機應用。但是，學習多種程式語言、適合各種手機系統和大小不一的螢幕等問題讓許多開發者望而卻步。瑞士軍刀般的跨平台開發框架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>
    <text>{{ greeting }}</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        greeting: &#39;Hello uniapp!&#39;
      }
    }
  }
</script>

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

導覽到另一個頁面

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

<button>Go to page 2</button>

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

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

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

圖片的引入

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

<template>
  <view>
    <image></image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        image: &#39;image.jpg&#39;
      }
    }
  }
</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)
  }
})