初心者向けのuniappの使い方について話しましょう

モバイル アプリケーション市場が成長するにつれて、独自のモバイル アプリケーションを開発し始める企業や個人が増えています。しかし、多くの開発者は、複数のプログラミング言語の学習、さまざまな携帯電話システムやさまざまなサイズの画面への適応などの問題によって思いとどまっています。スイス アーミー ナイフのようなクロスプラットフォーム開発フレームワーク uniapp は、複数のプラットフォームで実行可能な開発フレームワークであり、開発者は 1 つのコードで複数のプラットフォームに適用できるフルプラットフォーム アプリケーションを開発できます。

Uniapp は Vue フレームワークに基づいており、そのソース コードをさまざまなプラットフォーム用のネイティブ アプリケーションにコンパイルします。サポートされているプラ​​ットフォームには、iOS、Android、H5、ミニ プログラム、クイック アプリ、アプリなどが含まれます。この記事では初心者向けに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 のインストールと初期プロジェクトの作成に成功しました。次に、簡単なコードをいくつか書いてみましょう。

ページの作成

プロジェクトのページ フォルダーに home.vue などの新しい 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 にジャンプします。

画像の導入

ページに画像を導入する必要があるとします。最初に画像を静的フォルダーに保存し、次に、相対パスを使用して .html ファイル内で画像を参照する必要があります。 vueファイル。

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

ネットワーク リクエストの開始

get request:

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

post request:

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

Run uniapp

上記のコードを完了した後、コマンド ラインで次のコマンドを実行する必要があります。

npm run dev:%PLATFORM%

%PLATFORM% は必要なプラットフォームを表します。ここに iOS、Android などを入力できます。上記のコマンドを実行すると、シミュレーターまたは実機でプロジェクトの効果をプレビューできます。

概要

uniapp は開発者にクロスプラットフォーム開発ソリューションを提供し、開発コストを大幅に削減し、開発効率を向上させます。これを使用すると、開発者は 1 つのプログラミング言語をマスターするだけで、複数のプラットフォームでフルプラットフォームのアプリケーションを開発できるため、開発作業をより効率的に行うことができます。

以上が初心者向けのuniappの使い方について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。