uniappでAPIインターフェースを呼び出す方法

モバイル インターネットの発展に伴い、クロスプラットフォーム アプリケーションの開発を選択する企業が増えており、UniApp は非常に人気のあるソリューションとなっています。他のフレームワークとは異なり、UniApp は 1 つのコードを記述するだけで、複数のプラットフォーム向けの iOS、Android、およびその他のアプリケーションを同時に生成できます。同時に、UniApp の API は比較的シンプルで使いやすいため、開発者が開発作業を行うのに便利です。この記事では主にUniAppを使ってAPIインターフェースを呼び出す方法を紹介します。

1. API の概要

API (アプリケーション プログラミング インターフェイス) はアプリケーション プログラム インターフェイスを指し、事前定義された関数、プロトコル、ツールのセットを指します。平たく言えば、API は、開発者が他のプログラムと対話したり、必要なデータを取得したり、指定された操作を実行したりできる一連のプログラム インターフェイスです。 API のアプリケーション シナリオは、サードパーティのログイン、SMS 認証、支払い、物流など、非常に多岐にわたります。

UniApp では、API インターフェイスを呼び出すことで、対応する機能を実装できます。UniApp には、ルーティング、ネットワーク リクエスト、ページ レイアウト、ストレージ ストレージなど、一般的に使用される API が組み込まれています。組み込み API に加えて、プラグインを使用して API を拡張し、より多くのニーズを満たすこともできます。

2. ネットワーク リクエスト API

アプリケーションの開発では、データを取得するためにバックグラウンド インターフェイスを呼び出す必要があることがよくあります。 UniApp には、インターフェイス呼び出しを容易にするネットワーク リクエスト API が組み込まれています。 uni.request と uni.uploadFile という 2 つの主要なインターフェイスがあります。

1. uni.request

uni.request このインターフェイスは主にネットワーク リクエストを実装するために使用されます。このインターフェイスでサポートされるリクエスト メソッドは、GET、POST、PUT、DELETE、HEAD、OPTIONS、TRACE、CONNECT です。その中で、GET と POST の 2 つは最もよく使用されるリクエスト メソッドです。

uni.request には次のパラメータ オプションがあります:

successFunctionNoリクエスト成功後のコールバック関数failFunctionNo失敗後のコールバック関数request#completeFunctionNoリクエスト完了後のコールバック関数

パラメータ名	Type	必須ですか?	関数
url	文字列	is	request URL アドレス
method	String	は、GET、POST、PUT、DELETE をサポートする	リクエスト メソッドです。 、および HEAD 、 OPTIONS、 TRACE、 CONNECT
header	Object	No	設定する必要があるリクエスト ヘッダー情報
data	オブジェクト/文字列	No	要求されたデータ
dataType	String	No	戻り値のデータ型は、json、text、デフォルトをサポートします
responseType	String	No	応答タイプ、テキスト、配列バッファ、ブロブをサポート

サンプル コードは次のとおりです。

uni.request({
  url: 'https://api.example.com/login',
  method: 'POST',
  header: {
    'content-type': 'application/json'
  },
  data: {
    username: 'example',
    password: 'example123'
  },
  success: res => {
    console.log(res.data)
  },
  fail: error => {
    console.log(error)
  }
})

2. uni.uploadFile

uni.uploadFileこのインターフェイスは主にファイルをアップロードするために使用されます。このインターフェイスには次のパラメータ オプションがあります:

パラメータ名TypeRequiredFunction##url# # によって要求された URL アドレスです。 #filePathString は、アップロードするファイル パスです。ローカル パスのみがサポートされます。nameStringYesアップロードされたファイルの名前headerObjectNo設定が必要なリクエストヘッダー情報formDataObjectNoアップロードする必要がある追加パラメータsuccessFunctionNoリクエスト成功後のコールバック関数fail FunctionNoリクエスト失敗後のコールバック関数completeFunctionNoリクエスト完了後のコールバック関数

uni.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: '/path/to/file',
  name: 'file',
  header: {
    'content-type': 'multipart/form-data'
  },
  formData: {
    'name': 'example'
  },
  success: res => {
    console.log(res.data)
  },
  fail: error => {
    console.log(error)
  }
})

3. ルーティング API

String	は、
			サンプルコードは次のとおりです:

アプリケーションでは、ルーティングは非常に重要な概念です。 UniApp はルーティング関連の API インターフェイスを提供します。ここでは、

uni.navigateTo

と

uni.redirectTo

の 2 つの API を紹介します。

uni.navigateTo

1. uni.navigateTo インターフェイスは、新しいページにジャンプするために使用されるメソッドです。このインターフェイスを通じて、新しいページにジャンプし、パラメーターを渡すことができます。このインターフェイスには次のパラメータ オプションがあります:

パラメータ名

TypeRequiredFunctionString は No #failFunctionNoジャンプ失敗後のコールバック関数completeFunctionNoジャンプ完了後のコールバック関数

#url

へのページ パスであり、相対パスと絶対パスをサポートします

success

Function

ジャンプ成功後のコールバック関数

##

示例代码如下：

uni.navigateTo({
  url: '/pages/detail/detail?id=1',
  success: res => {
    console.log(res)
  },
  fail: error => {
    console.log(error)
  }
})

2. uni.redirectTo

与 uni.navigateTo 不同，uni.redirectTo 接口是用于关闭当前页面并跳转到新页面的方法。该接口有以下参数选项：

参数名	类型	是否必填	作用
url	String	是	要跳转的页面路径，支持相对路径和绝对路径
success	Function	否	跳转成功后的回调函数
fail	Function	否	跳转失败后的回调函数
complete	Function	否	跳转完成后的回调函数

示例代码如下：

uni.redirectTo({
  url: '/pages/index/index',
  success: res => {
    console.log(res)
  },
  fail: error => {
    console.log(error)
  }
})

四、Storage API

在开发应用程序时，一些数据需要本地存储，以便在下次启动应用程序时能够快速访问到。UniApp 提供了 Storage API，用于本地存储数据。该 API 有以下方法：

方法名	参数	作用
uni.setStorage	key,value	将数据存储在本地缓存中
uni.getStorage	key	从本地缓存中获取指定 key 对应的内容
uni.removeStorage	key	从本地缓存中删除指定 key
uni.clearStorage	无	清空本地缓存

示例代码如下：

// 存储数据
uni.setStorage({
  key: 'username',
  data: 'example',
  success: function () {
    console.log('数据存储成功')
  }
})
// 获取数据
uni.getStorage({
  key: 'username',
  success: function (res) {
    console.log(res.data)
  }
})
// 删除数据
uni.removeStorage({
  key: 'username',
  success: function () {
    console.log('数据删除成功')
  }
})

五、总结

在本文中，我们主要介绍了 UniApp 的 API，其中包括网络请求、路由、Storage 存储等。了解了这些 API 后，开发者就能更加轻松地开发适用于多个平台的应用程序。当然，了解这些 API 并不是 UniApp 开发的全部。在实际的开发中，开发者还需要学习许多其它的知识，例如：组件、插件、生命周期等等。相信随着技术的不断深入，UniApp 能够成为越来越多开发者的首选开发解决方案。

以上がuniappでAPIインターフェースを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。