初心者向けのuniappの使い方について話しましょう-uni-app-php.cn

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

PHPz

リリース： 2023-04-10 15:10:18

オリジナル

908 人が閲覧しました

モバイルアプリケーション市場が成長するにつれて、独自のモバイルアプリケーションを開発し始める企業や個人が増えています。しかし、多くの開発者は、複数のプログラミング言語の学習、さまざまな携帯電話システムやさまざまなサイズの画面への適応などの問題によって思いとどまっています。スイスアーミーナイフのようなクロスプラットフォーム開発フレームワーク 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 サイトの他の関連記事を参照してください。