我们在用 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>

注意:最后请在百度统计后台“代码管理”->“单页应用设置”中“启用单页应用数据统计”并保存。否则,只有刚进去的时候统计一次,后续路由跳转将不会被统计。