UniApp でフロントエンドとバックエンドの通信を実装する方法

モバイル アプリケーション開発では、フロントエンドとバックエンドの通信が不可欠であり、これによりアプリケーションの機能と対話性が向上し、ユーザーは必要な情報をリアルタイムで取得できるようになります。クロスプラットフォーム開発機能を提供するフレームワークとして、UniApp はフロントエンドとバックエンドの通信もサポートします。この記事では、UniApp でフロントエンドとバックエンドの通信を実装する方法を紹介します。

1. カプセル化された ajax の導入

UniApp にはカプセル化された ajax リクエスト メソッドが組み込まれており、フロントエンドおよびバックエンド通信を使用するときに直接導入できます。具体的なコードは次のとおりです:

import {ajax} from '@/common/ajax.js';

ajax({
  url: 'https://www.example.com/api/example',
  method: 'GET',
  data: {
    exampleParam: 'exampleValue'
  },
  success: res => {
    console.log(res);
  },
  fail: err => {
    console.log(err);
  }
})

リクエストの際は、リクエストパスとリクエストメソッドを入力し、データフィールドにリクエストに必要なパラメータを入力する必要があります。同時に、リクエストの成功および失敗後のコールバック関数もリクエスト構成で定義する必要があります。

2. uni.request の使用

UniApp には、HTTP リクエストを開始するための uni.request メソッドも用意されており、これは基本的に ajax の使用と同じです。コードは次のとおりです:

uni.request({
  url: 'https://www.example.com/api/example',
  method: 'GET',
  data: {
    exampleParam: 'exampleValue'
  },
  success: res => {
    console.log(res);
  },
  fail: err => {
    console.log(err);
  }
})

違いは、uni.request は通常の http リクエストのサポートに加えて、サーバーとの双方向のインスタント通信に使用できる WebSocket プロトコルもサポートしていることです。

3. WebSocket の使用

双方向通信を実現するには、WebSocket プロトコルを使用できます。 WebSocket を使用するには、接続を確立し、接続オブジェクトを通じてメッセージを送受信する必要があります。サンプル コードは次のとおりです:

let socket = null;

function createSocket() {
  socket = new WebSocket('wss://www.example.com/ws');
  socket.onopen = event => {
    console.log('WebSocket connected.');
  };
  socket.onmessage = event => {
    console.log('WebSocket message received:', event.data);
  };
  socket.onclose = event => {
    console.log('WebSocket disconnected, code:', event.code);
  };
  socket.onerror = event => {
    console.error('WebSocket error:', event.error);
  };
  
  return socket;
}

function closeSocket() {
  if (socket) {
    socket.close();
    socket = null;
  }
}

function sendMsg(msg) {
  if (!socket) {
    createSocket();
  } else if (socket.readyState === WebSocket.CLOSED) {
    createSocket();
  }
  
  socket.send(msg);
}

4. uni-socket.io

UniApp を使用すると、uni-app に適した Socket.io クライアント プラグイン uni-socket.io も提供されます。これにより、WebSocket とのやり取りが簡素化されます。 uni-app の npm を介して直接インストールして使用できます。

インストール:

npm install uni-socket.io

使用法:

import io from 'uni-socket.io';

let socket = null;

function createSocket() {
  socket = io('wss://www.example.com/ws');
  socket.on('connect', () => {
    console.log('Socket.io connected.');
  });
  socket.on('message', msg => {
    console.log('Socket.io message received:', msg);
  });
  socket.on('disconnect', () => {
    console.log('Socket.io disconnected.');
  });
  socket.on('error', error => {
    console.error('Socket.io error:', error);
  });
  
  return socket;
}

function closeSocket() {
  if (socket) {
    socket.close();
    socket = null;
  }
}

function sendMsg(msg) {
  if (!socket) {
    createSocket();
  } else if (socket.disconnected) {
    createSocket();
  }
  
  socket.send(msg);
}

uni-socket.io を使用すると、io() 関数を通じて WebSocket 接続を直接作成でき、イベント管理も実装できます。 、認証およびその他の機能。

要約すると、UniApp はフロントエンドとバックエンドの通信を実現するさまざまな方法を提供しており、開発者は実際のニーズに基づいて適切な方法を選択できます。どの方法を使用しても、アプリケーションの対話性と有用性を向上させながら、アプリケーションのユーザー エクスペリエンスを向上させることができます。

以上がUniApp でフロントエンドとバックエンドの通信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。