UniApp加載Web頁面完整實(shí)現(xiàn)方案(附實(shí)例代碼)
更新時(shí)間：2025年09月05日 08:30:17 作者：藍(lán)精靈001
在uniapp中加載外部網(wǎng)頁,可以通過使用web-view組件來實(shí)現(xiàn),web-view是一個(gè)web瀏覽器組件,可以用來承載網(wǎng)頁的容器,這篇文章主要介紹了UniApp加載Web頁面完整實(shí)現(xiàn)方案的相關(guān)資料,需要的朋友可以參考下
背景與需求
在 UniApp 開發(fā)過程中，我們經(jīng)常需要加載 H5 頁面來展示復(fù)雜的業(yè)務(wù)內(nèi)容，比如審批流程、表單填寫、數(shù)據(jù)展示等。傳統(tǒng)方案是使用原生插件來實(shí)現(xiàn) WebView 功能，但這種方式存在以下問題：
- 依賴原生插件：需要維護(hù) Android 和 iOS 兩套原生代碼
- 通信復(fù)雜：H5 頁面與 UniApp 的數(shù)據(jù)交互實(shí)現(xiàn)困難
- 功能受限：文件上傳、頁面跳轉(zhuǎn)等功能需要額外開發(fā)
- 維護(hù)成本高：版本更新時(shí)需要同步更新原生插件
本文將介紹一套完整的 UniApp WebView 解決方案，實(shí)現(xiàn) H5 頁面與 UniApp 的無縫集成。
核心功能需求
我們的目標(biāo)是實(shí)現(xiàn)以下功能：
- ? 基礎(chǔ)加載：在 UniApp 中加載任意 H5 頁面
- ? 雙向通信：H5 頁面能調(diào)用 UniApp 功能，UniApp 能向 H5 頁面?zhèn)鬟f數(shù)據(jù)
- ? 頁面跳轉(zhuǎn)：H5 頁面中的房源編號、客源編號能直接跳轉(zhuǎn)到對應(yīng)詳情頁
- ? 文件上傳：支持圖片選擇和文件選擇功能
- ? 業(yè)務(wù)集成：支持表單提交、數(shù)據(jù)回調(diào)等業(yè)務(wù)場景
解決方案演進(jìn)
方案一：自定義注入 Bridge（失?。?/h3>
思路：通過 evalJS 向 WebView 注入自定義的通信橋接對象。
// 嘗試注入自定義 Bridge
webview.evalJS(`
window.uniAppBridge = {
jumpToPropertyDetail: function(code) { /* ... */ }
};
`);
問題：
- 在 Android 平臺上注入不穩(wěn)定
- 時(shí)機(jī)難以控制，容易失敗
- 兼容性差
方案二：使用 UniApp 官方 SDK（成功）
思路：使用 UniApp 官方提供的 WebView 通信 SDK。
<!-- 引入官方 SDK --> <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
優(yōu)勢：
- 官方支持，穩(wěn)定可靠
- 標(biāo)準(zhǔn)化的通信方式
- 完整的 API 支持
完整實(shí)現(xiàn)方案
1. 創(chuàng)建 WebView 頁面組件
創(chuàng)建 pages/common/webview-page-simple.vue：
<template>
<view class="webview-container">
<web-view
:src="webUrl"
@message="handleMessage"
></web-view>
</view>
</template>
<script>
import CookieUtils from '@/util/cookie.js';
export default {
data() {
return {
webUrl: ''
}
},
onLoad(options) {
if (options.url) {
let url = decodeURIComponent(options.url);
// 處理本地文件路徑
if (url.startsWith('/')) {
// #ifdef H5
url = window.location.origin + url;
// #endif
// #ifdef APP-PLUS
// 直接使用相對路徑，UniApp 會自動處理
url = url;
// #endif
}
// 添加參數(shù)
const cookie = CookieUtils.getCookie();
const separator = url.includes('?') ? '&' : '?';
this.webUrl = `${url}${separator}cookie=${encodeURIComponent(cookie)}&platform=uniapp&device=${uni.getSystemInfoSync().platform}`;
console.log('加載URL：', this.webUrl);
}
// 設(shè)置標(biāo)題
if (options.title) {
uni.setNavigationBarTitle({
title: decodeURIComponent(options.title)
});
}
},
methods: {
handleMessage(e) {
console.log('收到消息：', e.detail.data);
const data = e.detail.data;
const messages = Array.isArray(data) ? data : [data];
messages.forEach(message => {
this.processMessage(message);
});
},
processMessage(message) {
switch (message.action || message.type) {
case 'navigateTo':
this.handleNavigate(message);
break;
case 'jumpToPropertyDetail':
this.jumpToPropertyDetail(message.data || message);
break;
case 'jumpToInquiryDetail':
this.jumpToInquiryDetail(message.data || message);
break;
case 'chooseImage':
this.handleChooseImage(message);
break;
case 'chooseFile':
this.handleChooseFile(message);
break;
case 'submitApproval':
this.handleSubmitApproval(message);
break;
case 'back':
uni.navigateBack();
break;
default:
console.log('未知消息類型：', message);
}
},
jumpToPropertyDetail(data) {
const propertyCode = data.propertyCode || data.code || data.PropertyCode;
if (propertyCode) {
uni.navigateTo({
url: `/pages/house/detail-page?PropertyCode=${propertyCode}&isWeb=true`
});
}
},
jumpToInquiryDetail(data) {
const inquiryCode = data.inquiryCode || data.code || data.InquiryCode;
if (inquiryCode) {
uni.navigateTo({
url: `/pages/passenger/passenger-detail?InquiryCode=${inquiryCode}&isWeb=true`
});
}
},
handleChooseImage(message) {
uni.chooseImage({
count: message.count || 9,
success: (res) => {
console.log('選擇圖片成功：', res);
uni.showToast({
title: `已選擇 ${res.tempFilePaths.length} 張圖片`,
icon: 'success'
});
},
fail: (err) => {
console.error('選擇圖片失?。?, err);
uni.showToast({
title: '選擇圖片失敗',
icon: 'none'
});
}
});
},
handleChooseFile(message) {
// #ifdef APP-PLUS
uni.chooseFile({
count: message.count || 1,
extension: message.extensions || ['*'],
success: (res) => {
console.log('選擇文件成功：', res);
uni.showToast({
title: `已選擇 ${res.tempFiles.length} 個(gè)文件`,
icon: 'success'
});
},
fail: (err) => {
console.error('選擇文件失敗：', err);
uni.showToast({
title: '選擇文件失敗',
icon: 'none'
});
}
});
// #endif
// #ifdef H5
uni.showModal({
title: '提示',
content: 'H5環(huán)境暫不支持文件選擇，請使用圖片選擇功能',
showCancel: false
});
// #endif
},
handleSubmitApproval(message) {
console.log('處理審批提交：', message);
const data = message.data || {};
uni.showToast({
title: '審批已提交',
icon: 'success'
});
setTimeout(() => {
uni.showModal({
title: '提交完成',
content: '審批已成功提交，是否返回？',
success: (res) => {
if (res.confirm) {
uni.navigateBack();
}
}
});
}, 1500);
}
}
}
</script>
<style scoped>
.webview-container {
width: 100%;
height: 100vh;
}
</style>2. 注冊頁面路由
在 pages.json 中添加：
{
"path": "pages/common/webview-page-simple",
"style": {
"navigationBarTitleText": "加載中...",
"navigationBarTextStyle": "black"
}
}
3. 封裝調(diào)用方法
在 util/native_plug_util.js 中添加：
/**
* 跳轉(zhuǎn)到 UniApp 的簡化 web-view 頁面（推薦使用）
* @param {Object} url h5頁面地址
* @param {Object} title 頁面標(biāo)題
* @param {Object} options 額外選項(xiàng)
*/
jumpToUniWebViewSimple(url, title, options = {}) {
// 對 URL 進(jìn)行編碼，避免參數(shù)丟失
const encodedUrl = encodeURIComponent(url);
let navigateUrl = `/pages/common/webview-page-simple?url=${encodedUrl}`;
// 如果有標(biāo)題，也進(jìn)行編碼
if (title) {
const encodedTitle = encodeURIComponent(title);
navigateUrl += `&title=${encodedTitle}`;
}
// 添加額外參數(shù)
if (options.useSDK !== false) {
navigateUrl += '&useSDK=true';
}
// 跳轉(zhuǎn)到 UniApp 的簡化 web-view 頁面
uni.navigateTo({
url: navigateUrl,
success: () => {
console.log('成功跳轉(zhuǎn)到 WebView 頁面：', url);
},
fail: (err) => {
console.error('跳轉(zhuǎn)到 web-view 頁面失?。?, err);
uni.showToast({
title: '頁面跳轉(zhuǎn)失敗',
icon: 'none'
});
}
});
},
4. 創(chuàng)建業(yè)務(wù) H5 頁面模板
創(chuàng)建 static/html/business_template.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>業(yè)務(wù)頁面模板</title>
<!-- 引入 UniApp WebView SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<style>
/* 樣式代碼... */
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn {
display: inline-block;
padding: 12px 24px;
margin: 5px;
background: #007aff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.property-link {
color: #007aff;
text-decoration: underline;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 狀態(tài)指示器 -->
<div id="status" class="status-indicator">初始化中...</div>
<div class="container">
<div class="header">
<h1>業(yè)務(wù)審批頁面</h1>
</div>
<div class="content">
<!-- 房源/客源信息展示 -->
<div class="form-group">
<label>關(guān)聯(lián)房源：</label>
<div>
<span class="property-link" onclick="jumpToProperty('FY20240101')">
房源編號：FY20240101 - 某某小區(qū)3室2廳
</span>
</div>
</div>
<!-- 表單字段 -->
<div class="form-group">
<label for="title">審批標(biāo)題：</label>
<input type="text" id="title" placeholder="請輸入審批標(biāo)題">
</div>
<div class="form-group">
<label for="content">審批內(nèi)容：</label>
<textarea id="content" placeholder="請輸入審批內(nèi)容..."></textarea>
</div>
<!-- 文件上傳區(qū)域 -->
<div class="form-group">
<label>附件上傳：</label>
<div class="file-upload" onclick="uploadFiles()">
<p>點(diǎn)擊選擇文件或圖片</p>
</div>
</div>
</div>
<!-- 操作按鈕 -->
<div class="footer">
<button class="btn" onclick="submitApproval()">提交審批</button>
<button class="btn" onclick="goBack()">返回</button>
</div>
</div>
<script>
let isUniAppReady = false;
// 更新狀態(tài)指示器
function updateStatus(ready) {
const statusEl = document.getElementById('status');
if (ready) {
statusEl.textContent = '? 通信就緒';
statusEl.style.background = '#d4edda';
statusEl.style.color = '#155724';
isUniAppReady = true;
} else {
statusEl.textContent = '? 通信未就緒';
statusEl.style.background = '#f8d7da';
statusEl.style.color = '#721c24';
}
}
// 監(jiān)聽 UniApp 環(huán)境準(zhǔn)備就緒
document.addEventListener('UniAppJSBridgeReady', function() {
console.log('UniApp 通信已就緒');
updateStatus(true);
});
// 跳轉(zhuǎn)到房源詳情
function jumpToProperty(propertyCode) {
if (!isUniAppReady) {
alert('通信未就緒，請稍后再試');
return;
}
console.log('跳轉(zhuǎn)到房源詳情：', propertyCode);
uni.postMessage({
data: {
type: 'jumpToPropertyDetail',
data: {
propertyCode: propertyCode
}
}
});
}
// 上傳文件
function uploadFiles() {
if (!isUniAppReady) {
alert('通信未就緒，請稍后再試');
return;
}
const choice = confirm('選擇"確定"上傳圖片，選擇"取消"上傳文件');
if (choice) {
// 通過 UniApp 選擇圖片
uni.postMessage({
data: {
action: 'chooseImage',
count: 9
}
});
} else {
// 選擇文件
uni.postMessage({
data: {
action: 'chooseFile',
count: 5,
extensions: ['.pdf', '.doc', '.docx']
}
});
}
}
// 提交審批
function submitApproval() {
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
if (!title || !content) {
alert('請?zhí)顚懲暾膶徟畔?);
return;
}
const approvalData = {
title: title,
content: content,
timestamp: new Date().toISOString()
};
console.log('提交審批數(shù)據(jù)：', approvalData);
if (isUniAppReady) {
uni.postMessage({
data: {
action: 'submitApproval',
data: approvalData
}
});
} else {
alert('通信未就緒，請稍后再試');
}
}
// 返回上一頁
function goBack() {
if (isUniAppReady && uni.navigateBack) {
uni.navigateBack();
} else if (isUniAppReady) {
uni.postMessage({
data: { type: 'back' }
});
} else {
window.history.back();
}
}
// 頁面加載完成
window.onload = function() {
console.log('業(yè)務(wù)頁面加載完成');
// 檢查環(huán)境
setTimeout(function() {
if (window.uni) {
updateStatus(true);
} else {
updateStatus(false);
}
}, 1000);
};
</script>
</body>
</html>
使用方法
1. 在 UniApp 中調(diào)用
import nativePlugUtil from '@/util/native_plug_util.js';
// 加載遠(yuǎn)程頁面
nativePlugUtil.jumpToUniWebViewSimple('https://your-domain.com/approval.html', '審批頁面');
// 加載本地頁面
nativePlugUtil.jumpToUniWebViewSimple('/static/html/business_template.html', '業(yè)務(wù)頁面');
2. H5 頁面與 UniApp 通信
頁面跳轉(zhuǎn)
// 跳轉(zhuǎn)到房源詳情
uni.postMessage({
data: {
type: 'jumpToPropertyDetail',
data: { propertyCode: 'FY123456' }
}
});
// 跳轉(zhuǎn)到客源詳情
uni.postMessage({
data: {
type: 'jumpToInquiryDetail',
data: { inquiryCode: 'KY123456' }
}
});
文件操作
// 選擇圖片
uni.postMessage({
data: {
action: 'chooseImage',
count: 9
}
});
// 選擇文件
uni.postMessage({
data: {
action: 'chooseFile',
extensions: ['.pdf', '.doc', '.docx']
}
});
業(yè)務(wù)操作
// 提交數(shù)據(jù)
uni.postMessage({
data: {
action: 'submitApproval',
data: {
title: '審批標(biāo)題',
content: '審批內(nèi)容'
}
}
});
核心技術(shù)要點(diǎn)
1. SDK 引入
關(guān)鍵：必須在 H5 頁面中引入 UniApp 官方 SDK。
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
2. 環(huán)境檢測
// 監(jiān)聽環(huán)境就緒
document.addEventListener('UniAppJSBridgeReady', function() {
console.log('通信已就緒');
// 此時(shí)可以安全使用 uni.postMessage
});
3. 消息通信
H5 → UniApp：
uni.postMessage({
data: {
type: 'messageType',
data: { /* 數(shù)據(jù) */ }
}
});
UniApp → H5：
// 在 handleMessage 方法中處理
handleMessage(e) {
const message = e.detail.data;
// 處理消息
}
4. 錯(cuò)誤處理
function safeCall(callback) {
if (!isUniAppReady) {
alert('通信未就緒，請稍后再試');
return;
}
callback();
}
最佳實(shí)踐
1. 頁面結(jié)構(gòu)規(guī)范
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁面標(biāo)題</title>
<!-- 必須：引入 SDK -->
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>
<!-- 頁面內(nèi)容 -->
<script>
// 必須：監(jiān)聽環(huán)境就緒
document.addEventListener('UniAppJSBridgeReady', function() {
console.log('通信已就緒');
});
</script>
</body>
</html>
2. 狀態(tài)管理
let isUniAppReady = false;
function updateStatus(ready) {
isUniAppReady = ready;
// 更新 UI 狀態(tài)指示器
}
function safeExecute(fn) {
if (isUniAppReady) {
fn();
} else {
console.warn('UniApp 通信未就緒');
}
}
3. 錯(cuò)誤處理
// 統(tǒng)一的錯(cuò)誤處理
function handleError(error, context) {
console.error(`${context} 出錯(cuò):`, error);
if (isUniAppReady) {
uni.postMessage({
data: {
type: 'error',
error: error.message,
context: context
}
});
} else {
alert(`操作失敗: ${error.message}`);
}
}
常見問題與解決方案
1. SDK 加載失敗
問題：網(wǎng)絡(luò)問題導(dǎo)致 SDK 無法加載 解決：
<!-- 使用多個(gè) CDN 源 -->
<script>
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
const sdkSources = [
'https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js',
'https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js'
];
async function loadUniSDK() {
for (const src of sdkSources) {
try {
await loadScript(src);
console.log('SDK 加載成功');
break;
} catch (e) {
console.warn('SDK 加載失敗，嘗試下一個(gè)源', src);
}
}
}
loadUniSDK();
</script>
2. 通信失敗
問題：發(fā)送消息后沒有響應(yīng) 檢查步驟：
- 確認(rèn) SDK 已正確加載
- 確認(rèn)監(jiān)聽了
UniAppJSBridgeReady事件 - 確認(rèn)消息格式正確
- 檢查 UniApp 端的消息處理邏輯
3. 文件上傳問題
問題：選擇文件后沒有反應(yīng)
解決：
// 確保在 APP 環(huán)境下使用
// #ifdef APP-PLUS
uni.chooseFile({
// 文件選擇邏輯
});
// #endif
// #ifdef H5
// H5 環(huán)境下提供替代方案
uni.showModal({
title: '提示',
content: 'H5環(huán)境請使用圖片上傳功能'
});
// #endif
4. 頁面跳轉(zhuǎn)問題
問題：點(diǎn)擊鏈接無法跳轉(zhuǎn)
解決：
// 確保傳遞正確的參數(shù)格式
uni.postMessage({
data: {
type: 'jumpToPropertyDetail', // 確保類型正確
data: {
propertyCode: code // 確保字段名正確
}
}
});
總結(jié)
通過使用 UniApp 官方 WebView SDK，我們可以實(shí)現(xiàn)：
- 穩(wěn)定的通信：基于官方 SDK，兼容性好
- 豐富的功能：支持文件上傳、頁面跳轉(zhuǎn)、數(shù)據(jù)回調(diào)等
- 簡單的維護(hù)：無需維護(hù)原生插件代碼
- 良好的體驗(yàn)：接近原生應(yīng)用的使用體驗(yàn)
這套解決方案已在實(shí)際項(xiàng)目中驗(yàn)證，能夠滿足大部分 H5 頁面集成需求。我們成功地將復(fù)雜的原生 WebView 實(shí)現(xiàn)簡化為純 UniApp 代碼，大大提升了開發(fā)效率和維護(hù)性。
到此這篇關(guān)于UniApp加載Web頁面完整實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)UniApp加載Web頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue的data為啥只能是函數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
淺談關(guān)于.vue文件中style的scoped屬性
本篇文章主要主要介紹了淺談關(guān)于.vue文件中style的scoped屬性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
下面小編就為大家分享一篇在vue項(xiàng)目中,使用axios跨域處理，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)
這篇文章主要介紹了詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue-cli構(gòu)建的項(xiàng)目如何手動添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項(xiàng)目如何手動添加eslint配置，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在vue項(xiàng)目中引入vue-beauty操作方法
在本篇文章里小編給大家分享了關(guān)于在vue項(xiàng)目中引入vue-beauty操作方法，有需要的朋友們跟著學(xué)習(xí)參考下。2019-02-02
給vue項(xiàng)目添加ESLint的詳細(xì)步驟
本篇文章主要介紹了給vue項(xiàng)目添加ESLint的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue中常遇到第三方j(luò)s,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何引入本地第三方JS庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue如何判斷數(shù)組中的對象是否包含某個(gè)值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08