快捷導(dǎo)航

uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)兩種方法

更新時(shí)間：2024年02月02日 09:15:22 作者：柑橘烏云_

這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)的兩種方法,在Uniapp中引入JS文件是一項(xiàng)常見的操作,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法一：

起初以為是在原有的index.html基礎(chǔ)上再新建一個(gè)html文件，在項(xiàng)目根目錄建立一個(gè)template.h5.html（仿照hello-uni-app項(xiàng)目），然后在manifest.json配置中填入template.h5.html，

方法二：（我使用這種方式成功引入了第三方j(luò)s）

最后發(fā)現(xiàn)不是，而是賦值文檔里面的hmlt模板基礎(chǔ)代碼覆蓋之前的index.html中的所有代碼。

這里網(wǎng)上有的同學(xué)按照方法一成功的，感覺真的很奇怪，有懂哥明白的，可以評論區(qū)指點(diǎn)一下。

之前uniapp創(chuàng)建的h5項(xiàng)目中index.html 文件代碼如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<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>
		<title></title>
		<!--preload-links-->
		<!--app-context-->
	</head>
	<body>
		<div id="app"><!--app-html--></div>
		<script type="module" src="/main.js"></script>
	</body>
</html>

使用文檔里的html代碼覆蓋，并通過script標(biāo)簽引入第三方j(luò)s

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<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>
		<script src="https://xxxxxx第三方.js"></script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" rel="external nofollow"  />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

在manifest.json里配置"template": "index.html" 就好啦

附：uniapp在h5引入地圖sdk

uniapp是一種基于Vue.js的跨平臺開發(fā)框架，可以同時(shí)開發(fā)小程序、H5、App等多個(gè)平臺的應(yīng)用。在H5引入地圖SDK的過程中，可以按照以下步驟進(jìn)行操作：

選擇地圖SDK：根據(jù)項(xiàng)目需求選擇一款適合的地圖SDK，比較常用的有百度地圖SDK、高德地圖SDK等。
引入SDK文件：將地圖SDK的相關(guān)文件下載到本地，并將其放置在項(xiàng)目的合適位置。可以將文件放置在uniapp項(xiàng)目的static文件夾下，比如創(chuàng)建一個(gè)名為map的文件夾，并將相關(guān)的SDK文件放入其中。
在需要使用地圖的頁面中引入地圖SDK：在需要使用地圖的uniapp頁面的script標(biāo)簽中，使用import語句引入地圖SDK的相關(guān)文件。比如對于百度地圖SDK，可以使用以下代碼引入：

import '../../static/map/bmap.js';

初始化地圖：在頁面的生命周期方法中（如onReady或mounted），創(chuàng)建地圖的實(shí)例并進(jìn)行初始化。具體的初始化方法和參數(shù)可以根據(jù)地圖SDK的文檔進(jìn)行設(shè)置。以百度地圖為例，可以使用以下代碼進(jìn)行初始化：

let BMap = window.BMap;
let map = new BMap.Map("map-container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

這里通過map-container指定了地圖容器的id，并且設(shè)置了地圖的中心點(diǎn)和縮放級別。

調(diào)用地圖功能：通過地圖實(shí)例，可以調(diào)用地圖SDK提供的各種功能，比如添加標(biāo)記、繪制路線等。

總結(jié)

到此這篇關(guān)于uniapp開發(fā)h5項(xiàng)目引入第三方j(luò)s(sdk)兩種方法的文章就介紹到這了,更多相關(guān)uniapp引入第三方j(luò)s內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: