内容统计是uni统计的特色功能之一，是内容详情页的访问统计。
如果你做的是新闻App，那么新闻详情页就是内容统计，你可以方便的了解什么样的新闻访问次数、分享次数更高。
如果你做的是电商App，那么商品详情页就是内容统计，你可以方便的了解什么样的商品人们最感兴趣、分享次数更多。

如果详情页标题，是pages.json配置的原生导航，且正是内容标题本身，那么无需配置。在uni统计里可直接查看报表。
但如果使用自定义导航栏或者内容标题写在了别处，参考本文下方【页面标题采集】一节上报正确的页面标题，以方便报表展示。

内容统计会根据 url 的参数进行分析，根据参数的不同，将相同的页面进行分组。如资讯类应用的新闻页面，不同的新闻内容计为多个内容页。 商城类应用的商品详情页面，不同的产品计为多个内容页

【重要】为了保证采集到的内容 url 是正确有效的，需要先配置【页面规则】才会采集内容页面。页面规则介绍及配置方法详见下文。

实际场景使用说明

我们以社区版的 Hello uni-app 为例，现在我们想知道每个帖子的访问人数最多，那个问题是用户最关注的， 这个时候就需要用到内容统计了。

那么我们如果统计到同一个页面不同的内容呢 ？

内容统计名词说明

1. 页面
   不同 url 表示一个不同的页面，如在 pages.json --> pages 下的每一项都表示一个不同页面

2. 内容页
   相同的 url，不同的参数值表示一个内容页面

3. 内容名称
   可以让用户直观感受的名称，如某个商品的详情，某个新闻的描述，可通过自定义事件自主上报

什么是页面规则

页面规则是用于生成内容统计 url 的规则。通过设置页面有效参数，通过带参数的 url 对内容进行标识。

如当前我们需要统计的页面地址为 pages/forum/detail/detial 的一个详情内容页，而这个页面是需要从前一个页面携带参数跳转过来的。通过携带的参数，我们才能知道这个页面的内容是什么。

例：

如下是一个页面完整的 url 表达

pages/forum/detail/detial?id=1&type=2&title=搜索内容

当前 url 传递了三个参数 id、type、title ，但是只有 id 和type 这两个参数才是有效参数，需要通过这两个参数来决定展示内容（如 request 请求数据）

id、type 就是当前页面的页面规则，这两个参数是区分页面的唯一方式，缺一不可。

配置页面规则

进入到统计后台，点击列表左侧导航的 内容统计 --> 页面规则 --> 编辑规则

如下图，点击添加参数，添加 id 和 type ，确定保存规则，

这个时候的规则如下

• 当前页面 url 中包含 id 、type 两个参数，且这两个参数值相同的情况下，我们认为这是同一个内容页面

• 当前页面 url 中包含 id 、type 两个参数，且这两个参数值不同的情况下，我们认为这是一个新的内容页面

• 当前页面 url 中不包含任何规则中的参数，那么此页面将不会在内容统计中显示

Tips

• 每条规则可以添加多个参数，进行匹配时，每条规则单独生效。
• 每个页面可以添加多个规则（最多 5 个规则），进行匹配时，后添加的规则优先级较高
• 目前的匹配规则只能处理通过 url 显式传递参数，且参数形式为上述示例中的键值对格式。

页面标题采集

在页面规则配置成功之后，在 内容统计 --> 内容统计 中的会显示根据规则匹配到的页面，到这一步，应该可以正常统计到详情页，为了更直观的感受，需要采集页面标题。

统计 SDK 会自动采集页面标题，页面标题的采集来源有以下几种

• 采集原生导航栏标题（通过 pages.json 获取）
• 采集 uni.setNavigationBarTitle()
• 采集 uni.reprot()

如果采集的页面标题不符合业务需求，可以通过后台手动修改页面标题。

如果以上几种设置页面标题的行为同时存在，则统计后台按照以下优先级显示页面标题 ：

后台直接修改页面标题 > uni.report > uni.setNavigationBarTitle > 原生导航栏获取

如果配置正确的页面规则，正确采集标题，则如下图展示

由于小程序有域名访问白名单限制。在各平台小程序中使用 uni 统计，需要配置合法域名 tongji.dcloud.io，不然统计无法生效。

以微信小程序为例配置合法域名

• 登录微信公众平台
• 点击开发 --> 开发设置 --> 服务器域名 --> 修改

• 需要管理员权限微信扫码确认身份

• 在 request 合法域名中配置 tongji.dcloud.io 为合法域名，点击 保存并提交

• 打开微信开发者工具，配置对应 appid ，点击详情 --> 项目配置 ，在域名信息下 request 合法域名中可以看到第四步配置的 tongji.dcloud.io ，表示配置成功

其他小程序平台类似，请在后台添加域名。

注意事项
HBuilderX Alpha 2.2.7 + 版本优化统计接口上报性能，已启用uni统计的历史项目，尽早在小程序后台request安全域名中新增 tongji.dcloud.io

承接APP，小程序定制开发

app效果：

h5，微信小程序无此bug

代码如下
<template>
<view>
<view style="height: 100rpx;"></view>
{{JSON.stringify(value)}}
<button @click="openPopup">打开选择器</button>

    <uniPopup :show="false" ref="popup" type="bottom" >  
        <picker-view class="single-picker" indicator-style="height: 80rpx;" @change="changePicker" :value="value">  
            <picker-view-column>  
                <block v-for="(item,index) in list" :key="index">  
                    <view class="disease-item">{{item[labelKey]}}</view>  
                </block>  
                <!-- 匿名插槽,可用于 插入显示列表加载提示 -->  
                <slot></slot>  
            </picker-view-column>  
        </picker-view>  
    </uniPopup>  
</view>  

</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
name: "getlocation",
components:{
uniPopup
},
data() {
return {
labelKey: "name",
list: [],
value: [0]
}
},
onLoad() {
this.getList();
},
methods: {
getList() {
for (var i = 0; i < 12; i++) {
this.list.push({
name: "picker-" + i,
id: i
})
}
},
changePicker(e) {
console.log(e.detail.value)
this.value = e.detail.value;
//this.$emit("change",e.detail.value);
},
openPopup() {
this.$refs.popup.open();
},
changePopUp(obj) {
console.log(this.value)
}
}
}
</script>

<style lang="scss">
.single-picker{
height: 50vh;
}
</style>

因less npm升级为3.10.0，引发了向下兼容问题。而HBuilderX自带的less插件没有锁版。导致部分使用HBuilderX的less插件的开发者无法正常编译uni-app。
目前HBuilderX的插件服务器已经升级。
之前（2019年8月17日-2019年8月18日）部分用户安装了有问题的less插件，请重新安装。

解决方案：

卸载重装 less 插件：工具->插件安装-less编译->卸载-安装

百度

hbuilderx安装less编译插件，uniapp项目运行到浏览器是报Module build failed (from ./node_modules/less-loader/dist/cjs.js): Class constructor FileManager cannot be invoked without 'new in undefined (line undefined, column undefined)。

部分安卓设备使用 websocket 后导致出现启动白屏，可以尝试以下临时解决方案：

• 非首页在 onUnload 的时候关闭 socket 连接，首页在 onBackPress 的时候关闭 socket 连接。
• 使用第三方 websocket 插件 plus-websocket
• 使用非自定义组件编译模式（不推荐）

为了方便大家交流,我创建了一个uniapp接单的QQ群,欢迎 大家加入
群号:47323557

原文记录地址：点击前往

这几天使用uni-app开发某银行的一个微信小程序，需要集成接入腾讯云的人脸核身SDK，如上图所示，记录下整合接入过程及踩的一些坑，帮助后面需要的朋友们。关于uni-app接入人脸核身SDK有不懂的地方可以在下面提问，看到会及时回复。

申请服务

不是所有的企业都能够申请的，需要符合以下行业要求的客户才能申请
政务：政府机构或事业单位
金融：银行、保险
医疗：公立医疗机构
运营商：电信运营商
教育：公立教育机构
交通：航空、客运、网约车、交通卡、共享交通、轨道交通、租车
旅游：酒店
物流：快递、邮政、物流
由于SDK会调用小程序原生的wx.startFacialRecognitionVerify方法，所以总共得申请2个服务:
SDK服务：申请人脸核身服务
小程序：查看申请流程（需要发送邮件申请，使用该服务的小程序的appid，后面开发也是用的这个）
重要的事情说3遍

以上这2个服务都需要申请，缺一不可。
以上这2个服务都需要申请，缺一不可。
以上这2个服务都需要申请，缺一不可。

下载SDK

由于不是我申请的，所以怎么下载我也不知道，听群里的人说的是SDK腾讯云下发给客户的。

SDK目录结构

SDK接入

参考腾讯云文档的接入方法：https://cloud.tencent.com/document/product/1007/31071
文档是针对原生小程序写的，所以页面引入的方法有所不同
由于uni-app不支持直接引入小程序的原生页面，所以这里能想到的就是将它当作成一个微信小程序的组件，然后uni-app的页面引入这个组件

解压引入SDK

在uni-app项目中新建wxcomponents目录，将SDK解压后放到该目录

pages.json中globalStyle中全局引入小程序的组件，注意引用的路径

"usingComponents": {  
  "verify-mpsdk": "/wxcomponents/verify_mpsdk/index/index"  
}

新建人脸核身页面

pages中新建人脸核身的页面face(名字可以随意，根据自己的需要起名)，
pages.json中配置页面

face页面中引入verify-mpsdk组件

最终的人脸核身的页面访问就是/pages/face/face

初始化SDK

在需要的页面初始化SDK，如有个页面需要点击按钮进行人脸核身，就在这个页面进行初始化。
这个直接照着文档快速入门中的来就行了，这里就直接使用uni-app默认的index页面，
适当修改下即可，大概代码如下：

<template>  
  <view class="content">  
    <button type="primary"  
      @tap="gotoVerify">  
      进入人脸核身  
    </button>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
          BizToken: ''  
      }  
    },  
    onLoad() {  
      // 初始化慧眼实名核身组件  
      const Verify = require('@/wxcomponents/verify_mpsdk/main.js')  
      Verify.init()  
    },  
    methods: {  
      // 单击进入人脸核身按钮时，触发该函数  
      gotoVerify () {  
        this.BizToken = '' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken  
        // 调用实名核身功能  
        wx.startVerify({  
          data: {  
            token: this.BizToken // BizToken  
          },  
          success: (res) => { // 验证成功后触发  
            // res 包含验证成功的token, 这里需要加500ms延时，防止iOS下不执行后面的逻辑  
            setTimeout(() => {  
                // 验证成功后，拿到token后的逻辑处理，具体以客户自身逻辑为准  
                console.log(res)  
            }, 500)  
          },  
          fail: (err) => {  // 验证失败时触发  
            // err 包含错误码，错误信息，弹窗提示错误  
            setTimeout(() => {  
              console.log(err)  
              wx.showModal({  
                  title: "提示",  
                  content: err.ErrorMsg,  
                  showCancel: false  
              })  
            }, 500)  
          }  
        })  
      }  
    }  
  }  
</script>

注意下这里的BizToken,需要调用后端服务接口来获取，
需要后端的同学调用腾讯云提供的DetectAuth来返回前端需要的BizToken，
调试开发阶段我们可以先通过腾讯云提供的工具
API 3.0 Explorer
直接来获取这个BizToken
如果服务申请成功后控制台一般能找到SecretId，SecretKey，RuleId
注意Endpoint和Region选择的地区得保持和申请时选择的地区一致。
填写完成后点击在线调用中的发送请求按钮，如果填的都对的话返回信息里面会有BizToken
拿到BizToken后就可以直接使用了，修改下上面的代码：
xxxxxxxxxxxxxxxxx就是拿到的BizToken

  this.BizToken = 'xxxxxxxxxxxxxxxxx' // 这里需要我们去客户后端调用DetectAuth接口获取BizToken

开发调试

上面都做完后就可以进行调试了
需要先在项目中manifest.json中配置上小程序的appid，这个appid就是上面申请服务中的appid，不然无法开启调试。

然后运行到微信开发工具（这里就不多说了），如果提示不是开发人员，就让该appid的管理员将你加到开发组里面就行了。
运行成功后点击开发者工具的真机调试，扫描二维码开启真机调试模式。
接下来就是踩坑了，会出现各种问题。

踩坑及解决方法

Component is not found in path

这里开发者工具里面都是显示正常的，不会报这个错，
手机扫码进入调试后控制台会出现这个报错，
提示组件找不到，但是我们的路径都是对的，
Component is not found in path "wxcomponents/verify_mpsdk/index/index"

问题出在这里将verify_mpsdk当成自定义组件了，
小程序自定义组件引入的时候需要在文件JSON中指定"component": true
找到wxcomponents\verify_mpsdk\index\index.json文件，加入"component": true即可
重新开启调试扫码后上面的报错就没了。

navigateTo:fail page

点击按钮调用gotoVerify后会报一个页面找不到的错
navigateTo:fail page "verify_mpsdk/index/index?isNotice=false" is not found

SDK默认的是跳转验证页面的地址是verify_mpsdk/index/index，
文档找了半天也没找到相应的配置地址，最后在SDK里面搜索找到了这个地址。
所以只需要把这个地址改成我们所需要的地址就行了。
找到wxcomponents\verify_mpsdk\main.js，里面搜索verify_mpsdk/index/index,
找到后修改成上面人脸核身页面的地址pages/face/face
保存后重试就能跳转到人脸核身的页面了。

无操作、无报错大坑

进入人脸核身的页面后会发现啥操作都没，控制台也没报错

一度认为我自己弄的有问题，搞了好久也没弄好，也提了个工单（腾讯云工单反馈率还是很快的，几分钟后就有人回复了，这点赞一个），
将代码和相关操作在工单里描述了下，对方也觉得的没问题，按照快速入门的代码应该是没问题的，
对方也没找到啥问题，就让我加了一个腾讯云慧眼小助手的微信，
本想着下午加人家看看啥问题的，中午吃完饭闲着的时候将SDK里面的文件都格式化后终于在index.js里面找到问题所在了。
wxcomponents\verify_mpsdk\index\index.js文件中有个onLoad生命周期，

正常原生微信小程序进入到这个页面的时候会执行onLoad里面的代码，
但是我们上面将这个SDK当作是一个自定义组件了，
在uni-app中组件是不存在onLoad这个生命周期的，这个是页面所属的生命周期。
找到问题所在就好解决了，我们可以在人脸核身的页面pages/face/face手动执行onLoad
修改下pages/face/face的代码，如下：

<template>  
  <view class="face">  
    <verify-mpsdk ref="verifyMpsdk"></verify-mpsdk>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
        return {  

        }  
    },  
    onLoad(i) {  
        // 页面onLoad的时候手动调用  
        this.$refs.verifyMpsdk.onLoad(i)  
    }  
  }  
</script>

保存后重试，就能正常显示了

SDK图片异常

点击快速验证进入下一步及后面的步骤的时候发现，页面的图片都挂掉了不显示，
一开始我一直用的真机调试，页面上也不会出现破图，控制台也不会报图片异常的错误，
导致我不知道怎么进行拍摄身份证，以为会自动识别身份证然后自动下一步，
最后在开发者工具里面跑了一遍才知道是图片找不到了，然后拍照的图片按钮自然也就显示不了了。

最后在SDK里面搜索/verify_mpsdk/images，在下面文件中找到关键词，
wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml

既然这种形式导致运行的时候图片找不到，我们可以把SDK所用的图片都复制到项目的static目录里
在static中新建verify_mpsdk目录，将SDK中的图片即wxcomponents\verify_mpsdk\images
复制到static\verify_mpsdk中，最终形成以下目录形式

最后将wxcomponents\verify_mpsdk\templates\ocr\ocr.wxml中的/verify_mpsdk/images批量替换成
/static/verify_mpsdk/images后重试即可，然后就都正常了。

完整流程

最后用真机调试完整跑一把

备注：如果最上面的wx.startFacialRecognitionVerify服务没有申请到此时点击下一步的会弹出一个无权限的弹窗无法进行下一步

这里就是活体人脸检测了，需要将脸对准框框，点击开始后需要读几个数字，

最后验证通过后会回到之前的页面（调用gotoVerify()方法的页面）， 验证成功后，会拿到一个BizToken，
可以在wx.startVerify回调函数success中打印自行查看。
拿到BizToken后可以调用后端的接口，后端通过调用 GetDetectInfo 接口获取并返回本次核身的详细信息，包括身份证上的信息和身份证证图片等信息。
前端拿到这些信息后根据自己的程序需要做处理。

结语

整合过程中遇到不少问题，百度加google也找不到相关的详细信息，
人脸核身的相关文档都很简单，出现问题后无从下手，只能慢慢自己摸索解决了，
最后写篇文章记录下整个过程，也能帮到后面需要集成这个SDK的朋友们。

注意：:此方法本人仅用在微信小程序，其他端没有测试，h5测试用不了

1. 安装依赖
   npm install echarts mpvue-echarts

2. 找到mpvue-echarts模块里的echarts文件，找到相应代码覆盖即可，替换如下

   <template>  
   <canvas  
   v-if="canvasId"  
   class="ec-canvas"  
   :id="canvasId"  
   :canvasId="canvasId"  
   @touchstart="touchStart"  
   @touchmove="touchMove"  
   @touchend="touchEnd"  
   @error="error"  
   ></canvas>  
   </template>  
   <script>  
   import WxCanvas from "./wx-canvas";  
   export default {  
   props: {  
   canvasId: {  
     type: String,  
     default: "ec-canvas"  
   },  
   lazyLoad: {  
     type: Boolean,  
     default: false  
   },  
   disableTouch: {  
     type: Boolean,  
     default: false  
   },  
   throttleTouch: {  
     type: Boolean,  
     default: false  
   }  
   },  
   // #ifdef H5  
   mounted() {  
   if (!this.lazyLoad) this.init();  
   },  
   // #endif  
   // #ifndef H5  
   onReady() {  
   if (!this.lazyLoad) this.init();  
   },  
   // #endif  
   methods: {  
   setChart(chart) {  
     this.chart = chart;  
   },  
   init() {  
     const { canvasId } = this;  
     this.ctx = wx.createCanvasContext(canvasId, this);  
     this.canvas = new WxCanvas(this.ctx, canvasId);  
     const query = wx.createSelectorQuery().in(this);  
     query  
       .select(`#${canvasId}`)  
       .boundingClientRect(res => {  
         if (!res) {  
           setTimeout(() => this.init(), 50);  
           return;  
         }  
         this.$emit("onInit", {  
           width: res.width,  
           height: res.height  
         });  
       })  
       .exec();  
   },  
   canvasToTempFilePath(opt) {  
     const { canvasId } = this;  
     this.ctx.draw(true, () => {  
       wx.canvasToTempFilePath({  
         canvasId,  
         ...opt  
       });  
     });  
   },  
   touchStart(e) {  
     const { disableTouch, chart } = this;  
     if (disableTouch || !chart || !e.mp.touches.length) return;  
     const touch = e.mp.touches[0];  
     chart._zr.handler.dispatch("mousedown", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
     chart._zr.handler.dispatch("mousemove", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
   },  
   touchMove(e) {  
     const { disableTouch, throttleTouch, chart, lastMoveTime } = this;  
     if (disableTouch || !chart || !e.mp.touches.length) return;  
     if (throttleTouch) {  
       const currMoveTime = Date.now();  
       if (currMoveTime - lastMoveTime < 240) return;  
       this.lastMoveTime = currMoveTime;  
     }  
     const touch = e.mp.touches[0];  
     chart._zr.handler.dispatch("mousemove", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
   },  
   touchEnd(e) {  
     const { disableTouch, chart } = this;  
     if (disableTouch || !chart) return;  
     const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};  
     chart._zr.handler.dispatch("mouseup", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
     chart._zr.handler.dispatch("click", {  
       zrX: touch.x,  
       zrY: touch.y  
     });  
   }  
   }  
   };  
   </script>  
   <style scoped>  
   .ec-canvas {  
   width: 100%;  
   height: 100%;  
   flex: 1;  
   }  
   </style>

   3.图表示例文件

   <template>  
   <view class="materials">  
   <view class="echarts-wrap">  
     <mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="demo-canvas" ref="chart1" />  
   </view>  
   <button @click="changeChart">更改</button>  
   </view>  
   </template>  
   
   <script>  
   import * as echarts from "echarts/dist/echarts.min";  
   import mpvueEcharts from "mpvue-echarts";  
   function getDate(date) {  
   return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;  
   }  
   let chart1 = null;  
   export default {  
   components: {  
   mpvueEcharts  
   },  
   data() {  
   return {};  
   },  
   onReady() {},  
   methods: {  
   changeChart() {  
     chart1.setOption(this.getOptions(10, 30));  
   },  
   getOptions(nan, nv) {  
     return {  
       title: {  
         text: "性别比例",  
         x: "center",  
         textStyle: {  
           fontSize: 16  
         }  
       },  
       backgroundColor: "#FFF",  
       tooltip: {  
         trigger: "axis",  
         axisPointer: {  
           // 坐标轴指示器，坐标轴触发有效  
           type: "shadow" // 默认为直线，可选为：'line' | 'shadow'  
         }  
       },  
       xAxis: { type: "value", splitNumber: 7 },  
       yAxis: { type: "category", show: false, data: [getDate(new Date())] },  
       series: [  
         {  
           name: "男",  
           type: "bar",  
           stack: "总量",  
           data: [nan],  
           barWidth: 50,  
           itemStyle: { normal: { color: "#00aaff" } }  
         },  
         {  
           name: "女",  
           type: "bar",  
           stack: "总量",  
           data: [nv],  
           itemStyle: { normal: { color: "#f4516c" } }  
         }  
       ]  
     };  
   },  
   onInit(e) {  
     let { width, height } = e;  
     let canvas = this.$refs.chart1.canvas;  
     echarts.setCanvasCreator(() => canvas);  
     chart1 = echarts.init(canvas, null, {  
       width: width,  
       height: height  
     });  
     canvas.setChart(chart1);  
     chart1.setOption(this.getOptions(50, 10));  
     this.$refs.chart1.setChart(chart1);  
   }  
   }  
   };  
   </script>  
   <style>  
   .echarts-wrap {  
   width: 100%;  
   height: 300px;  
   }  
   </style>

使用npm安装xmldom

初始化npm工程（如果已经初始化，请跳过此步骤）

npm init

安装依赖

npm i xmldom

解析xml

var DOMParser = require('xmldom').DOMParser;  
var doc = new DOMParser().parseFromString(  
    '<xml xmlns="a" xmlns:c="./lite">\n'+  
        '\t<child>test</child>\n'+  
        '\t<child></child>\n'+  
        '\t<child/>\n'+  
    '</xml>'  
    ,'text/xml');  
doc.documentElement.setAttribute('x','y');  
doc.documentElement.setAttributeNS('./lite','c:x','y2');  
var nsAttr = doc.documentElement.getAttributeNS('./lite','x')  
console.info(nsAttr)  
console.info(doc)

详细文档：xmldom
示例工程：解析xml天气信息