由于小程序有域名访问白名单限制。在各平台小程序中使用 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天气信息

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。

不过，由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并不是很好。

其实 uni-app 和 vscode 也可以很搭，接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。

CLI 工程

全局安装 vue-cli 3.x（如已安装请跳过此步骤）

npm install -g @vue/cli

通过 CLI 创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

组件语法提示是uni-app的亮点，其他框架很少能提供。

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

初始化npm（如已初始化跳过此步骤）

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

• 如果这些插件有npm使用方式（如uni-ui），可以用npm
• 如果作者没提供npm方式，那么下载zip包解压也是可以用的