uni-appでのplusの使い方を詳しく解説

モバイルインターネットの急速な発展に伴い、モバイルアプリケーション開発はますます注目を集めています。クロスターミナル開発フレームワークとして、uni-app は多くの開発者の最初の選択肢となっています。 Plus はユニアプリ フレームワークの重要なコンポーネントとして、多くの開発者にも必要とされています。では、uni-app で plus を使用するにはどうすればよいでしょうか?この記事では詳しく説明します。

1.プラスとは何ですか？

plus は、HBuilderX の強力な機能を統合したユニアプリです。 Plus を通じて、写真の撮影、録音、ナビゲーションなどのデバイスのネイティブ機能を呼び出すことができます。さらに、uni-app の機能を大幅に強化し、アプリケーションにより完全なユーザー エクスペリエンスを提供できます。

2. plusの使い方

初心者にとってplusは少し馴染みのないものかもしれません。ただし、次の手順に従うだけで簡単にマスターできます:

1. マニフェスト.json で plus の権限を宣言します。サンプル コードは次のとおりです:

"AppID": {
  "plus": {
    "ios": {
      "plist": {
        "NSCalendarsUsageDescription": "允许该应用程序访问日历",
        "NSCameraUsageDescription": "允许该应用程序访问相机",
        "NSContactsUsageDescription": "允许该应用程序访问通讯录",
        "NSLocationAlwaysUsageDescription": "允许该应用程序永久使用您的位置信息",
        "NSLocationWhenInUseUsageDescription": "允许该应用程序在使用期间使用您的位置信息",
        "NSMicrophoneUsageDescription": "允许该应用程序访问麦克风",
        "NSPhotoLibraryUsageDescription": "允许该应用程序访问照片库",
        "NSBluetoothPeripheralUsageDescription":"","NSMotionUsageDescription":"","NSRemindersUsageDescription":"","NSHealthShareUsageDescription":"","NSHealthUpdateUsageDescription":"",
        "ITSAppUsesNonExemptEncryption":"false"
      }
    },
    "android": {}
  }
}

2. コード内の plus モジュールのインポート

例としてカメラ関数を取り上げます:

<template>
  <view @tap="takePhoto">
    <text>Take Photo</text>
  </view>
</template>

<script>
  import {plus} from 'uni-app-plus';

  export default {
    methods: {
      takePhoto () {
        plus.gallery.pick(({tempFilePaths}) => {
          plus.camera.saveImage({
            filePath: tempFilePaths[0],
            success: ({savedFilePath}) => {
              uni.showModal({
                content: `保存成功，路径：${savedFilePath}`
              });
            },
            fail: (error) => {
              uni.showModal({
                content: `保存失败：${JSON.stringify(error)}`
              });
            }
          });
        });
      }
    }
  };
</script>

ご覧のとおり、次のカメラ関数を簡単に呼び出すことができます。 plus モジュールをインポートしてデバイスをインポートします。このうち、plus.gallery.pickは写真の選択に使用され、plus.camera.saveImageは写真の保存に使用されます。

3. plus の一般的に使用される機能

uni-app では、plus モジュールは、開発者がニーズをすぐに実現できるように、多くの共通機能を提供します。以下に、一般的な関数をいくつか示します。

1. デバイス情報の取得

uni.getSystemInfo({
  success: function (res) {
    console.log(res.model);
    console.log(res.pixelRatio);
    console.log(res.windowWidth);
    console.log(res.windowHeight);
    console.log(res.language);
    console.log(res.version);
    console.log(res.platform);
    console.log(res.system);
    console.log(res.statusBarHeight);
  }
});

2. スキャン関数

plus.barcode.scan({
  success: function (res) {
    console.log(res.text);
    console.log(res.format);
    console.log(res.cancelled);
  }
});

3. ネットワーク ステータスの取得

plus.networkinfo.getCurrentType(function (type) {
  switch (type) {
    case plus.networkinfo.CONNECTION_UNKNOW:
      console.log('未知网络');
      break;
    case plus.networkinfo.CONNECTION_NONE:
      console.log('无网络');
      break;
    case plus.networkinfo.CONNECTION_ETHERNET:
      console.log('有线网络');
      break;
    case plus.networkinfo.CONNECTION_WIFI:
      console.log('WiFi网络');
      break;
    case plus.networkinfo.CONNECTION_CELL2G:
      console.log('2G蜂窝网络');
      break;
    case plus.networkinfo.CONNECTION_CELL3G:
      console.log('3G蜂窝网络');
      break;
    case plus.networkinfo.CONNECTION_CELL4G:
      console.log('4G蜂窝网络');
      break;
  }
});

上記のコードを通じて、デバイス情報の取得、QR コードのスキャン、ネットワーク ステータスの取得、その他の機能を実行できます。

4. まとめ

この記事では、uni-appのplusモジュールの使い方と共通機能を紹介します。初心者にとっては少し使い方が面倒に感じるかもしれませんが、上記の手順を踏むだけで簡単に使いこなすことができます。ユニアプリ フレームワークの重要な部分として、Plus はアプリケーションに優れたユーザー エクスペリエンスをもたらすための多くのネイティブ関数呼び出しを提供します。

以上がuni-appでのplusの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。