我们在用 uni-app 开发 H5 应用时，经常需要引入外部统计系统进行访问统计，本文主要介绍如何使用百度统计对 uni-app H5 单页应用进行 页面 PV 统计。
uni-app 自定义模板
在 uni-app 项目工程根目录下新建一个 html 文件，从 官网 上复制下面的基本模板内容到这个 html 文件，并在 manifest.json->h5->template 节点中关联这个 html 文件的路径，文件名随意，只要符合文件名命名规范就可以了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>百度统计配置
注册完 百度统计 并获取统计代码（这里不详述，还不会的自行百度），放置在上面模板的 head 节点中，放置后的代码如下（仅供参考，请更换为自己百度统计上面获取的统计代码）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
// 以下为百度统计代码
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?********************";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
注意：最后请在百度统计后台“代码管理”->“单页应用设置”中“启用单页应用数据统计”并保存。否则，只有刚进去的时候统计一次，后续路由跳转将不会被统计。
版权属于：瞭月
本文链接：https://www.lervor.com/archives/153/
版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。