# 微信小程序SDK接入 #### 使用前提 - 使用APM服务微信小程序 SDK前，您需要注册华为云账号并开通华为云APM服务。 - 为确保微信小程序监控数据上报正常，需将上报地址添加到微信开发者平台域名列表，将上报域名添加为合法域名。 #### 传输协议 HTTPS #### 版本更新说明 表1版本更新说明 | 版本号 | 更新说明 | |:---|:---| | 2.0.7 | 新增采样率设置。 | | 2.0.5 | 新增uid和tag字段，与setUid和setTag方法。 | | 2.0.4 | 修复SDK中覆盖了小程序原函数作用域的问题。 | | 2.0.1 | 添加README帮助文档。 | | 2.0.0 | 小程序SDK上线。 | #### 配置上报地址 将APM上报地址"https://apm-web.cn-north-4.myhuaweicloud.com"添加到小程序开发者平台域名列表。 以微信小程序为例： 配置地址：https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN。 配置位置：登录小程序后台，在"开发 \> 开发设置 \> 服务器域名"中配置，如有多个域名配置以分号分隔开。 ![](https://support.huaweicloud.com/usermanual-apm2/zh-cn_image_0000002518336306.png "点击放大") #### 操作步骤 1. 登录[APM控制台](https://console.huaweicloud.com/apm2/)。 2. 在左侧导航栏选择"前端监控 \> 前端站点"，单击"接入前端站点"。 3. 在"接入前端站点"弹窗，选择"微信小程序"，选择"所属应用"，填入"站点名称"，单击"创建前端站点"。 4. 安装SDK，在项目根目录下执行**npm i apm-mini-sdk**，拉取SDK软件包。 5. 埋码代码会自动完成小程序埋点，建议在app.js中执行埋码代码，也可以在项目的任何位置执行。引入SDK方式分为：文件引入方式和npm方式引入。 - 采用npm方式集成SDK。 1. 确保项目有"package.json"文件，如果项目中没有"package.json"文件，可以在项目的根目录下，使用**npm init**命令来创建。 2. 运行安装SDK的命令，安装SDK软件包。 3. 单击开发者工具菜单栏中的"工具 \> 构建npm"，构建当前工程的npm库文件。在"miniprogram_npm"文件夹中查看有"apm-mini-sdk"文件夹表示引入成功。 ![](https://support.huaweicloud.com/usermanual-apm2/zh-cn_image_0000002549696153.png) ![](https://support.huaweicloud.com/usermanual-apm2/zh-cn_image_0000002518176394.png) 4. 从页面复制用于埋码的代码放置到app.js文件中。 ![](https://support.huaweicloud.com/usermanual-apm2/zh-cn_image_0000002549816155.png "点击放大") - 采用文件引入方式集成SDK。 1. 找到SDK文件夹中的app.js文件"node_modules \> apm-mini-sdk \> app.js"，将app.js文件从node_modules复制到根路径并改名。 ![](https://support.huaweicloud.com/usermanual-apm2/zh-cn_image_0000002549816151.png "点击放大") 2. 从页面复制用于埋码的代码放置到app.js文件中。 ![](https://support.huaweicloud.com/usermanual-apm2/zh-cn_image_0000002698936853.png "点击放大") 表2配置参数说明 | 参数名称 | 是否必填 | 默认值 | 描述 | |:---|:---|:---|:---| | appId | 是 | - | 前端站点ID，每个站点有自己的appId。 | | apiRepo | 否 | true | API自动上报开关。 API自动上报：用于查看API详情和统计API成功率。 | | thirdApi | 否 | true | 三方API上报开关。 三方API上报：上报CrossOrigin第三方接口信息。 | | hashMode | 否 | true | hashMode自动解析开关。 hashMode自动解析：URL中#相关内容，在开启时做URL一部分处理，不开启时被当作锚点处理。 | | JsErrorClear | 否 | true | JS错误追踪开关。 JS错误追踪开关：监听和上报所有JS错误。 说明： 此功能会改变业务在浏览器上显示的路径。 | | smartJsErr | 否 | true | Js错误智能采集开关。 Js错误智能采集：短时间内大批量JS错误智能消减，在一次访问中超过100条的相同JS错误则不进行上报。 | | webResource | 否 | true | 页面资源上报开关，将控制是否采集加载性能相关信息。 | | traceType | 否 | apm | 链路追踪开关。 开启后可与可观测链路OpenTelemetry版产品做前后端链路追踪，默认与"应用监控 \> 调用链"做前后端链路追踪。 | | uid | 否 | - | 用户自定义ID，字符串类型。1.0.46及以上版本支持配置该参数。 | | tag | 否 | - | 用户自定义标签，字符串类型。1.0.46及以上版本支持配置该参数。 | | enableInp | 否 | false | 采集绘制延迟指标开关。 | | sampleRate | 否 | 1 | 采样率，有效值0\~1。例：填入值0.5，表示50%的采样率。Web\&H5 SDK 在1.0.59及以上版本支持配置该参数。 | | pushState | 否 | false | 路由变化时，是否上报PV数据的开关。在URL变化时上报PV（页面浏览）数据，用于统计用户访问路径。 | 6. 自定义上报统计 （可选步骤） | 方法名称 | 参数说明 | |:---|:---| | agent.log(key: String, value: String) | key：事件名称，String类型，最大长度为2048个字符。 value：事件内容，支持String、Array、HashMap、 Number等有效的JSON对象，转JSON字符串最大长度为30720个字符。 | 7. 动态设置uid。（可选步骤） | 方法名称 | 参数说明 | |:---|:---| | agent.setUid(uid: String) | uid：String类型，最大长度为2048个字符。 | 8. 动态设置tag。（可选步骤） | 方法名称 | 参数说明 | |:---|:---| | agent.setTag(tag: String) | tag：String类型，最大长度为2048个字符。 | 9. 自定义上报加载性能数据。在PerformanceData中有值，且数值相加大于0时上报数据。 ``` agent.addPerformanceData(data: PerformanceData) ``` 表3PerformanceData参数说明 | 配置参数 | 参数类型 | 是否必填 | 默认值 | 说明 | |:---|:---|:---|:---|:---| | loadTime | 数值型 | 否 | 0 | 加载时间 | | fcp | 数值型 | 否 | 0 | 首屏时间 | | fp | 数值型 | 否 | 0 | 白屏时间 | | domtti | 数值型 | 否 | 0 | 可交互时间 | | cls | 数值型 | 否 | 0 | 累计布局偏移 | | inp | 数值型 | 否 | 0 | 绘制交互 | | lcp | 数值型 | 否 | 0 | 最大内容绘制 | 10. 自定义上报错误数据。 ``` agent.addErrorData(data: ErrorData) ``` 表4ErrorData参数说明 | 配置参数 | 参数类型 | 是否必填 | 默认值 | 说明 | |:---|:---|:---|:---|:---| | type | 字符型 | 是 | 无 | 错误类型 | | message | 字符型 | 是 | 无 | 错误信息 | | stack | 字符型 | 否 | 无 | 错误堆栈 | #### 数据上报策略 1. 用户基础数据、自定义上报数据会在访问页面时立即上报。 2. 页面性能数据会在页面加载完成后触发。 3. 其他类型数据（API数据、JS错误数据等）会以一分钟的时间间隔上报数据。