跳到主要内容
版本：3.7.0

uni-app-x 插件集成指南

本插件适用于HBuilder中的uni-app-x项目，以离线打包的形式将项目资源打包到AndroidStudio中或Xcode中的方式使用。

集成步骤​

  1. uni-app-x项目集成
  2. HBuilder中以本地UTS插件的形式集成
  3. 在Android/iOS工程中集成

一.uni-app-x项目集成​

由于iOS与Android编译原理不同，所以集成步骤有所不同。

Android​

1.修改App.uvue文件

引入插件：

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

在default的onError方法调用ReportJsError

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

iOS​

1.引入js文件

在uni-app-x项目中添加文件BRPageMixin.js和BRWatchRouter.js，层级跟main.js同层级。

2.修改App.uvue文件

​ 第一步：引入路由监听文件

​ 第二步：mixin混入路由监听对象

<script>
	// #ifdef APP-IOS
	import BRWatchRouter from './BRWatchRouter.js'; // 引入路由监听
	// #endif
	export default {
		// #ifdef APP-IOS
		mixins:[BRWatchRouter],// 混入mixin
		// #endif
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

3.在项目入口页面中添加BRPageMixin.js文件

BRPageMixin.js文件也是通过mixin的方式混入到page页面，来弥补第一个页面渲染的时候路由实例未完成采集不到路由的情况。

// 页面vue文件，例如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>

二.HBuilder中插件集成​

  1. 将uni-app-x插件包复制到uni_modules目录下，如果uni_modules目录不存在，则在项目根目录下创建。

    17411550466179

  2. 在需要启动插件的文件中引入插件，并在需要启动插件的位置调用启动方法。

//引入插件
import { Bonree } from '@/uni_modules/bonree-unix-plugin';
//启动插件
Bonree.setConfigAddress("<#Config地址#>")
Bonree.start("<#AppID#>")

三.在Android/iOS工程中集成​

在Android工程中集成​

本插件按照uni-app-x官方规范制作，故按照官方文档指引即可正常运行。

uni-app-x官方插件集成文档

在iOS工程中集成​

本插件按照uni-app-x官方规范制作，故按照官方文档指引即可正常运行。

uni-app-x官方插件集成文档