H5端添加百度統(tǒng)計
描述
uniapp的應(yīng)用配置文件 mainfest.json, 用于指定應(yīng)用的名稱宛乃、圖標虏两、權(quán)限等雳旅。配置項列表中的h5特有的配置中,template 屬性可制定生成 html 代碼杆怕,生成html代碼涉及自定義模板族购。
自定義模板使用場景:
- 調(diào)整頁面 head 中的 meta 配置
- 補充 SEO 相關(guān)的配置
- 加入百度統(tǒng)計等三方j(luò)s
自定義模板搭建
-
在工程目錄下新建一個 html 文件(templateh5.html);具體的目錄結(jié)構(gòu)如下:
- 復(fù)制下面的基本模板內(nèi)容, 到這個 html 中陵珍, 在此基礎(chǔ)上修改meta和引入js;
<!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.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3.在 mainfest.json --> h5 --> template 節(jié)點中關(guān)聯(lián)這個html文件的路徑寝杖, 代碼如下:
"h5" : {
"title" : "",
"template": "templateh5.html"
}
- 引入百度統(tǒng)計之前,在head標簽內(nèi)聲明_hmt對象
<script>
var _hmt = _hmt || [];
</script>
- 在body中引入百度統(tǒng)計代碼
// 生產(chǎn)環(huán)境時運行此腳本
var _hmt = _hmt || [];
(function(){
var hm = document.createElement("script");
hm.src = "https://#/hm.js?0b9414c5eb842f57da9479fa0"; // 由百度生成
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();