菜单

uni-app 弹窗集成

集成 SDK

uni-app 弹窗 SDK 集成可以参考 uni-app SDK

初始化 SDK

在 App.vue 或 main.js 文件中初始化 SDK

import sensors from '神策 uni-app JS SDK 路径/index.js';
// #ifdef MP-WEIXIN
import popups from '神策 uni-app JS SDK 路径/plugin/wx-popup.esm.min.js';
// #endif
	
sensors.setPara({
    name: 'sensors',
    server_url: '',
    // 全埋点控制开关
    autoTrack: {
        appLaunch: true, // 默认为 true，false 则关闭 $MPLaunch 事件采集
        appShow: true, // 默认为 true，false 则关闭 $MPShow 事件采集
        appHide: true, // 默认为 true，false 则关闭 $MPHide 事件采集
        pageShow: true, // 默认为 true，false 则关闭 $MPViewScreen 事件采集
        pageShare: true, // 默认为 true，false 则关闭 $MPShare 事件采集
        mpClick: true, // 默认为 false，true 则开启 $MPClick 事件采集
    }
});
 
//弹窗初始化
sensors.popupInit({
    // 是否打印 log 日志
    show_log: true,
    // 弹窗 SFO 地址，请联系运营人员获取
    api_base_url: '',
	// 小程序 id
    app_id: ''
});
 
sensors.init();

引入弹窗组件

将插件目录的 wxcomponents 里内容复制到本地 uni-app 工程的 wxcomponents 下：

在小程序项目的所有需要渲染弹窗的页面中引入弹窗组件。例如在 index 页面引入：

//uniapp 官方目录结构
┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

// pages.json  注意组件目录存放结构与组件路径
"pages": [
  {
	"path": "pages/index/index",
	"style": {
		"usingComponents": {
			"popup-component": "/wxcomponents/popup-component/popup-component",// 注意组件所在路径
		}
   	 }
  },
]

// index.vue 
<popup-component id="sensors_popup"></popup-component>  // 把此组件放在 index.vue template内
注意格式
<template>
	<view class="content">
	  <popup-component id="sensors_popup"></popup-component>  // 把此组件放在 index.vue 的页面的任意位置
	</view>
</template>

在 HBuilderX 中配置 sfo_base_url  地址

原生插件集成参考 uni-app SDK 集成文档，集成原生插件后，在 mainifest.json 文件中的 App 原生插件配置中 sfo_base_url 

在原生插件中配置 sfo_base_url 地址

Android 端

神策原生插件提供自动初始化功能，但需要您进行相关功能的配置，读取 package.json 中 parameters 节点信息配置 AndroidManifest.xml。填写插件需要的 meta-data 信息。

package.json 文件 parameters 节点可配置参数说明如下：

"parameters": {
        "auto_track_type": {
          "des": "全埋点采集类型，0：不开启全埋点采集，1：应用启动，2：应用退出，3：应用启动退出，默认 0",
          "key": "com.sensorsdata.analytics.uni.AutoTrackType"
        },
        "android_max_cache_size": {
          "des": "设置本地缓存上限值，单位 MB，默认为 32MB：32，最小 16MB，若小于 16MB，则按 16MB 处理。",
          "key": "com.sensorsdata.analytics.uni.MaxCacheSize"
        },
        "show_log": {
          "des": "设置是否开启 log，true：开启，false：不开启，默认 false",
          "key": "com.sensorsdata.analytics.uni.EnableLogging"
        },
        "encrypt": {
          "des": "设置是否开启加密，true：开启，false：不开启，默认 false",
          "key": "com.sensorsdata.analytics.uni.Encrypt"
        },
        "android_data_collect": {
          "des": "设置开启数据采集，true：开启，false：不开启，默认 true",
          "key": "com.sensorsdata.analytics.uni.DataCollect"
        },
        "javascript_bridge": {
          "des": "开启自动打通所有的 WebView H5 功能。true：开启，false：不开启，默认 false",
          "key": "com.sensorsdata.analytics.uni.JavaScriptBridge"
        },
        "android_javascript_bridge_support_jellybean": {
          "des": "H5 打通是否支持 API level 16 及以下的版本。true：开启，false：不开启，默认 false。",
          "key": "com.sensorsdata.analytics.uni.JavaScriptBridgeSupportJellyBean"
        },
        "android_mp_process_flush": {
          "des": "当使用小程序 SDK 时，小程序进程是否可发送数据。",
          "key": "com.sensorsdata.analytics.uni.MPProcessFlush"
        },
        "sfo_base_url": {
          "des": "当使用弹窗 SDK 时，填入在线服务地址",
          "key": "com.sensorsfocus.apibaseurl"
        },
        "android_sfo_enable_popup" : {
          "des" : "初始化禁止弹窗显示，默认为 true，如果设置为 false，主页显示时，请调用 enablePopup",
          "key" : "com.sensorsfocus.enablePopup"
        }
      }

在 AndroidManifest.xml 文件中根据埋点需求配置插件需要的 meta-data 信息，示例如下：

       <meta-data
           	 android:name="com.sensorsdata.analytics.uni.AutoTrackType"
            android:value="3" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.MaxCacheSize"
            android:value="32" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.EnableLogging"
            android:value="false" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.Encrypt"
            android:value="false" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.DataCollect"
            android:value="true" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.JavaScriptBridge"
            android:value="true" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.JavaScriptBridgeSupportJellyBean"
            android:value="false" />
        <meta-data
            android:name="com.sensorsdata.analytics.uni.MPProcessFlush"
            android:value="false" />
        <meta-data
            android:name="com.sensorsfocus.apibaseurl"
            android:value="SFO 地址" /> 
        <meta-data
            android:name="com.sensorsfocus.enablePopup"
            android:value="true" />

iOS 端

打开 离线打包 原生工程或集成了 uni小程序SDK 的原生工程，找到原生工程的 info.plist 文件右键选择 Open As -> Source Code 源码查看，添加如下节点信息


<key>Sensorsdata-UniPlugin-App</key>
    <dict>
	 	<key>serverUrl</key>			  // 数据接收地址
		<string>数据接收地址</string>
        <key>enableJavaScriptBridge</key> // 开启自动打通所有的 WebView H5 功能。true：开启，false：不开启，默认 false
        <string>true</string>
        <key>enableLog</key>			  // 设置是否开启 log，true：开启，false：不开启，默认 false
        <string>true</string>
        <key>autoTrackEventType</key>     // 全埋点采集类型，0：不开启全埋点采集，1：应用启动，2：应用退出，3：应用启动退出，默认 0
        <string>3</string>
        <key>maxCacheSize</key>			  // 本地缓存日志的最大条目数, 默认 10000 
        <string>10000</string>
        <key>enableEncrypt</key> 		  // 设置是否开启加密，true：开启，false：不开启，默认 false
        <string>false</string>
		<key>sfoBaseUrl</key>			  // 弹窗 SFO 地址，请联系运营人员获取
        <string>SFO 地址</string> 
    </dict>

配置 Scheme

获取项目 Scheme

  • 项目的 Scheme 需要管理员账户进行获取
  • App 工程中可以同时配置多个项目的 Scheme

uni-app 中配置 Scheme

在 manifest.json 配置文件中找到「App 常用其他配置」，将上一步获取到的 Scheme 分别配置到 「Android 配置」和 「iOS 配置」中 UrlSchemes 选项中

实现弹窗回调

设置弹窗开始触达回调

注意 sensors 需要在 main.js 设置全局
/**
 * @param {string} plan_id 计划ID
 * @param {object} valueObj 弹窗内容对象（在 sf 中配置的弹窗内容）
 */
sensors.popupLoadSuccess(function (data) {
    console.log('加载弹窗成功： ', data);
});

设置弹窗触达结束回调

注意 sensors 需要在 main.js 设置全局
/**
 * 对弹窗点击事件，绑定事件处理函数
 * @param {string} plan_id 计划ID
 * @param {object} valueObj 弹窗内容对象（在 sf 中配置的弹窗内容）
 */
sensors.popupClose(function (plan_id, valueObj) {
    console.log('plan_id: ', plan_id, ' valueObj: ', valueObj);
});

设置弹窗按钮点击回调

注意 sensors 需要在 main.js 设置全局
/**
 * @param {object} valueObj 弹窗内容对象（在 sf 中配置的弹窗内容）
 */  
sensors.popupClick(function (valueObj) {
    console.log('click:',valueObj);
});

弹窗调试

创建运营计划并测试弹窗

首先在神策智能运营中创建运营计划，并且“触发条件”中的“平台类型”选择 iOS，然后配置好“触达配置”就可以点击右侧的“测试弹窗”按钮以打开二维码。

扫描二维码

使用已安装了测试 App 的设备，通过手机自带的系统相机扫描二维码，扫码后会在浏览器中打开二维码对应的网页。

唤起 App

若 App 已经成功集成 SDK 则会直接唤起 App 或提示询问是否唤起 App。

若 App 集成 SDK 存在问题或未安装 App，则会进入到如下报错界面，请检查您的 App 配置。

测试弹窗效果

跳转成功后，会在 App 内弹出弹窗。

弹窗后的关闭弹窗、点击按钮等效果与创建的运营计划一致。

上一个
Web 弹窗集成
下一个
触达通道定制开发
最近修改: 2025-01-02