How to open the system page in uniAPP

In uniAPP development, it is often necessary to implement the function of opening the system page. For example, call the camera, photo album, map, browser, etc. This article will introduce how uniAPP opens the system page.

1. Open the camera

In uniAPP, if you want to open the camera, you can use the plug-in "uni-app_camera" provided by uni-app.

1. Install the plug-in
In HBuilderX, right-click the project file, select "Plug-in Market", find the "uni-app_camera" plug-in and install it.

2. Add the plug-in to the project
Find manifest.json in the project folder, and add the following code in the "app-plus" node:

"camera": {

"description": "相机",
"interfaces": [{
    "id": "takePhoto",
    "async": true
}]

}

3. Open the camera page
Introduce the plug-in on the page where you need to call the camera, and then call uni's api:

import camera from '@/ js_sdk/uni-app_camera/js_sdk/uni-app_camera.js'
onChooseImage() {

camera.takePhoto({
    quality: 'high',
    success: (res) => {
        console.log('拍照成功', res)
    },
    fail: (err) => {
        console.log('拍照失败', err)
    }
});

}

2. Open the photo album

You can use uni-app The provided plug-in "uni-app_gallery" is used to realize the function of opening the photo album in uniAPP.

1. Install the plug-in
In HBuilderX, right-click the project file, select "Plug-in Market", find the "uni-app_gallery" plug-in and install it.

2. Add the plug-in to the project
Find manifest.json in the project folder, and add the following code in the "app-plus" node:

"gallery": {

"description": "相册",
"interfaces": [{
    "id": "chooseImage",
    "async": true
}]

}

3. Open the album page
Introduce the plug-in on the page where you need to call the album, and then call uni's api:

import gallery from '@/ js_sdk/uni-app_gallery/js_sdk/uni-app_gallery.js'
onChooseImage() {

gallery.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: (res) => {
        console.log('选择成功', res)
    },
    fail: (err) => {
        console.log('选择失败', err)
    }
});

}

3. Open the map

Open the map in uniAPP , you need to use the API provided by uni.

1. Open the system map
You can use the uni.openLocation() method to open the system map:

uni.openLocation({

latitude: 0, // 纬度
longitude: 0, // 经度
name: '', // 地址名称
scale: 18 // 缩放比例

});

2. Open Baidu Map
You can use the uni.navigateToMiniProgram() method to open Baidu Map:

uni.navigateToMiniProgram({

appId: 'wxeb490c6f9b154ef9', // 百度地图appid
path: 'pages/index/index', // 地图页面路径
success(res) {
    console.log(res)
}

});

4. Open the browser

To open the browser in uniAPP, you need to use the API provided by uni.

1. Open external links
You can use the uni.navigateBack() method to open external links:

uni.navigateBack({

delta: 1,
success(res) {
    console.log(res)
},
fail(err) {
    console.log(err)
}

});

2. Open the internal H5 page
You can use the uni.navigateTo() method to open the internal H5 page:

uni.navigateTo({

url: '/pages/webview/webview?url=' + encodeURIComponent(url),
success(res) {
    console.log(res)
},
fail(err) {
    console.log(err)
}

});

Summary: The above is the method and code example for opening the system page in uniAPP. By using APIs such as uni-app_camera, uni-app_gallery, uni.openLocation(), uni.navigateToMiniProgram(), uni.navigateBack() and uni.navigateTo(), you can quickly implement the function of opening the system page.

The above is the detailed content of How to open the system page in uniAPP. For more information, please follow other related articles on the PHP Chinese website!