生活随笔
收集整理的這篇文章主要介紹了
uniapp 打包H5自定义模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需要使用自定義模板的場景，通常有以下幾種情況：
- 調整頁面 head 中的 meta 配置
- 補充 SEO 相關的一些配置（僅首頁）
- 加入百度統計等三方js
使用自定義模板時：
在項目根目錄下創建一個template.h5.html文件復制下面的基本模板內容，到這個html文件，在此基礎上修改meta和引入js在 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"><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</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></body>
</html>
如果需要請求接口獲取meta參數的話，可以引入下面的自定義AJAX
function ajax(url
) {return new Promise(function(resolve
, reject
) {var xhr
= new XMLHttpRequest()xhr
.open('GET', url
)xhr
.responseType
= 'json'xhr
.onload = function() {if (this.status
=== 200) {resolve(this.response
)} else {reject(new Error(this.statusText
))}}xhr
.send()})
}
ajax('接口').then(function(res
) {console
.log('成功打印:', res
)
})
創建并添加meta并更改標題
var hm
= document
.createElement("meta");
hm
.name
= 'keywords'
hm
.content
= 'xxx'
var s
= document
.getElementsByTagName("meta")[0];
s
.parentNode
.insertBefore(hm
, s
);var hmt
= document
.createElement("meta");
hmt
.name
= 'description'
hmt
.content
= 'xxx'
var st
= document
.getElementsByTagName("meta")[1];
st
.parentNode
.insertBefore(hmt
, st
);document
.title
= 'xxx'
至此H5自定義模板已更改完畢
完整代碼如下：
<!DOCTYPE html
>
<html lang
="zh-CN"><head
><meta charset
="utf-8"><meta http
-equiv
="X-UA-Compatible" content
="IE=edge"><script
>var coverSupport
= 'CSS' in window
&& typeof CSS.supports
=== 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document
.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +(coverSupport
? ', viewport-fit=cover' : '') + '" />')function ajax(url
) {return new Promise(function(resolve
, reject
) {var xhr
= new XMLHttpRequest()xhr
.open('GET', url
)xhr
.responseType
= 'json'xhr
.onload = function() {if (this.status
=== 200) {resolve(this.response
)} else {reject(new Error(this.statusText
))}}xhr
.send()})}ajax('接口').then(function(res
) {console
.log('檢索:', res
)if (res
.code
== 1) {var data
= res
.data
var hm
= document
.createElement("meta");hm
.name
= 'keywords'hm
.content
= 'xxx'var s
= document
.getElementsByTagName("meta")[0];s
.parentNode
.insertBefore(hm
, s
);var hmt
= document
.createElement("meta");hmt
.name
= 'description'hmt
.content
= 'xxx'var st
= document
.getElementsByTagName("meta")[1];st
.parentNode
.insertBefore(hmt
, st
);document
.title
= 'xxx'}})</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
>
總結
以上是生活随笔為你收集整理的uniapp 打包H5自定义模板的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
