Skip to main content
Version: 3.7.0

uni-app-x Plugin Integration Guide

This plugin is suitable for uni-app-x projects in HBuilder. It is used by packaging project resources into AndroidStudio or Xcode projects via offline packaging.

Integration Steps​

  1. Integrate into the uni-app-x project
  2. Integrate as a local UTS plugin in HBuilder
  3. Integrate into the Android/iOS project

1. Uni-app-x Project Integration​

Due to differences in compilation principles between iOS and Android, the integration steps vary.

Android​

  1. Modify the App.uvue file

    Import the plugin:

    import { Bonree } from "@/uni_modules/bonree-unix-plugin"

    Call ReportJsError in the onError method of default:

    export default {
        onError(err: any) { 
             // #ifdef APP-ANDROID
            ReportJsError(err) 
             // #endif
        }
    }

iOS​

  1. Import JS files

    Add the files BRPageMixin.js and BRWatchRouter.js to your uni-app-x project, placing them at the same level as main.js.

  2. Modify the App.uvue file

    Step 1: Import the route monitoring file

    Step 2: Mixin the route monitoring object

    <script>
        // #ifdef APP-IOS
        import BRWatchRouter from './BRWatchRouter.js'; // Import route monitoring
        // #endif
        export default {
            // #ifdef APP-IOS
            mixins:[BRWatchRouter],// Add mixin
            // #endif
            onLaunch: function() {
                console.log('App Launch')
            },
            onShow: function() {
                console.log('App Show')
            },
            onHide: function() {
                console.log('App Hide')
            }
        }
    </script>

  3. Add the BRPageMixin.js file to the project entry page

    The BRPageMixin.js file is also mixed into the page via mixin to compensate for the situation where the route instance is not yet ready when the first page renders and route information cannot be collected.

    // Page vue file, e.g., index.uvue
    <template>
        <view class="uni-container">···</view>
    </template>
    <script>
        // #ifdef APP-IOS
        import BRPageMixin from '../../BRPageMixin.js';
        // #endif
        export default {
            // #ifdef APP-IOS
            mixins:[BRPageMixin],
            // #endif
            data() {}
        }
    </script>

2. Plugin Integration in HBuilder​

  1. Copy the uni-app-x plugin package to the uni_modules directory. If the uni_modules directory does not exist, create it in the project root directory.

    17411550466179

  2. Import the plugin in the file where you need to start it, and call the startup method at the desired location.

// Import plugin
import { Bonree } from '@/uni_modules/bonree-unix-plugin';
// Start plugin
Bonree.setConfigAddress("<#Config Address#>")
Bonree.start("<#AppID#>")

3. Integration into Android/iOS Projects​

Integration into Android Project​

This plugin is developed according to the official uni-app-x specifications, so it can run normally by following the official documentation.

uni-app-x Official Plugin Integration Documentation

Integration into iOS Project​

This plugin is developed according to the official uni-app-x specifications, so it can run normally by following the official documentation.

uni-app-x Official Plugin Integration Documentation