uni-app 插件集成指南

本插件适用于HBuilder中的UniApp项目(暂不支持uni-app x项目)，以uni小程序SDK或离线打包的形式将项目资源打包到AndroidStudio中或Xcode中的方式使用。

集成步骤

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

一.uni-app项目集成

1.引入js文件

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

2.修改App.vue文件

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

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

​ 第三步：添加error错误采集代码

<script>
	// 第一步：import引入路由监听文件
	import BRWatchRouter from "./BRWatchRouter.js"; // 引入路由监听
	export default {
		mixins: [BRWatchRouter], // 第二步，混入mixin
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		onError: function(error) {
			BRWatchRouter.methods.errorFn(error) // 第三步，采集error错误信息
		}
	}
</script>

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

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

// 页面vue文件，例如index.vue
<template>
	<view class="uni-container">···</view>
</template>
<script>
	import BRPageMixin from '../../BRPageMixin.js';
	export default {
		mixins:[BRPageMixin],
		data() {}
	}
</script>

二.HBuilder中插件集成

1. 将Uni插件包复制到nativeplugins目录下，如果nativeplugins目录不存在，则在项目根目录下创建。

   

2. 打开项目中的manifest.json，选择[安卓/iOS原生插件配置]，点击[选择本地插件]， 选择插件列表中的[BonreeUniAppNativePlugin]插件，点击确定。

   

   

注意：添加本地插件后，需要提交云端打包（制作自定义基座也属于云端打包）后插件才会生效。

参考uniapp的官方文档：uni-app原生插件本地配置、自定义基座

三.在Android/iOS工程中集成

在Android工程中集成

根据项目集成Uniapp的方式,选择下面两种集成方式中适合的一种。

1. uni小程序sdk 集成方式

1.1 首先在AndroidStudio中接入SDK。

参见帮助中心Android-Native的集成与接入部分。

1.2 项目Application中引入module。

try {
    UniSDKEngine.registerModule("BonreeUniAppNativePlugin", BonreeUniPlugin.class);
} catch (UniException e) {
    e.printStackTrace();
}

2. App离线打包

2.1 首先在AndroidStudio中接入SDK。

参见帮助中心Android-Native的集成与接入部分。

2.2 需要注册module。

在assets/dcloud_uniplugins.json中添加
{
  "plugins": [
	{
	  "type": "module",
	  "name": "BonreeUniAppNativePlugin",
	  "class": "com.bonree.sdk.agent.engine.external.BonreeUniPlugin"
	}
  ]
}

在iOS工程中集成

将下载的插件解压，我们将看到插件文件夹BonreeUniAppNativePlugin中的iOS目录下的有四个xcframework文件，分别为BonreeRUM.xcframework、BonreeCore.xcframework、BonreeBusiness.xcframework、BonreeUniAppNativePlugin.xcframework，接下来我们将使用这四个xcframework。

1. uni小程序sdk集成方式

1.1 将以上四个xcframework中集成到宿主应用的工程中，具体步骤参考iOS集成文档中的手动集成部分和接入部分。

1.2 打开宿主应用工程，在应用启动时注册BonreeUniAppNativePlugin。如下：

• 导入头文件

  #import <BonreeUniAppNativePlugin/BonreeUniAppNativePlugin.h>

• 注册

  Objective-C

  [BonreeUniAppNativePlugin registerModule];

  Swift

  BonreeUniAppNativePlugin.registerModule()

2. App离线打包

2.1 将以上四个xcframework集成到iOS离线打包工程中，具体集成步骤参考iOS集成文档中的手动集成部分和接入部分。

2.2 打开离线打包工程，在Info.plist文件的dcloud_uniplugins节点下，添加以下内容：

<dict>
    <key>hooksClass</key>
    <string></string>
    <key>plugins</key>
    <array>
	    <dict>
		    <key>class</key>
		    <string>BonreeUniAppNativePlugin</string>
		    <key>name</key>
		    <string>BonreeUniAppNativePlugin</string>
		    <key>type</key>
		    <string>module</string>
	    </dict>
    </array>
</dict>