Detailed explanation of how to use plus in uni-app

With the rapid development of mobile Internet, mobile application development has attracted more and more attention. As a cross-terminal development framework, uni-app has become the first choice of many developers. As an important component of the uni-app framework, plus is also needed by many developers. So, how to use plus in uni-app? This article will explain it in detail.

1. What is plus?

plus is a uni-app that integrates the powerful capabilities of HBuilderX. Through plus, you can call the native functions of the device, such as taking pictures, recording, navigation, etc. plus can greatly enhance the functionality of uni-app and give our application a more complete user experience.

2. How to use plus

For beginners, plus may be a bit unfamiliar. However, you only need to follow the following steps to master it easily:

1. Declare the permissions of plus in manifest.json. The sample code is as follows:

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

2. In Import the plus module in the code

Take using the camera function as an example:

<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>

As you can see, we can easily call the camera function of the device by importing the plus module. Among them, plus.gallery.pick is used to select pictures, and plus.camera.saveImage is used to save pictures.

3. Commonly used functions of plus

In uni-app, the plus module provides many common functions to facilitate developers to quickly realize their needs. Here are a few common functions:

1. Get device information

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. Scan function

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

3. Get network status

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;
  }
});

Through the above code, we can obtain device information, scan QR codes, obtain network status and other functions.

4. Summary

In this article we introduce the usage and common functions of the plus module in uni-app. Although beginners may find plus a bit troublesome to use, they can easily master it by just following the above steps. As an important part of the uni-app framework, plus provides many native function calls to bring a better user experience to our applications.

The above is the detailed content of Detailed explanation of how to use plus in uni-app. For more information, please follow other related articles on the PHP Chinese website!