溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“uniapp中微信小程序與H5怎么實現相互跳轉及傳參”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
uniapp-H5+uniapp-微信小程序（vue3+vite2+ts）
在單位做項目的時候碰到一個需求，需要從微信小程序跳轉到H5頁面，這兩個端都是使用uniapp編寫的，查資料后決定使用webview來嵌入完成，然后考慮到還可能有參數（數據）需要傳遞，所以實現后記錄一下。ps：以下代碼我是根據查找的資料里從vue2改成vue3的寫法，若有需要改回去即可
在如下路徑創建文件/webview/index.vue，也可自行命名
<template>
<web-view :webview-styles="webviewStyles" :src="url"></web-view>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
import qs from 'qs'
const webviewStyles = reactive({
progress: { color: '#FF3333' }
})
// 使用qs序列化地址，qs版本需要為@5.2.1，其他版本我試了會報錯
const data = reactive({ id: 1, age: 18, name: '前端', ids: [69, 71] })
const url = ref('http://localhost:3000/#/pages/speechcraft/index?')
onLoad(() => {
// decodeURI避免中文亂碼，indices: false去除默認格式
url.value += decodeURI(qs.stringify(data, { indices: false }))
})
</script>
<style lang='scss' scoped></style>添加該頁面，然后可以在其他頁面設置一個跳轉動作，跳轉到該頁面就會自動進入H5頁面
{
"path": "pages/webview/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}在路徑跳轉的頁面接收，補充一點，根據查資料，小程序向H5傳參只能通過URL來傳遞
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs' // 此處qs版本同樣要為@5.2.1
onMounted(() => {
let routes = getCurrentPages();
console.log(routes[routes.length - 1].route) // 獲取當前頁面路由
console.log('獲取傳遞的數據', qs.parse(window.location.href.split('?')[1]))
})
</script>此處是后來無意間看到的文章才知道在哪調試，在微信小程序中，到H5頁面后，底部會有一個類似瓢蟲的標志
這塊是我踩坑比較多的地方，是重點，首先在index.html中引入微信小程序和uniapp相關的SDK，放在<body></body>后面，兩個都得引入，因為uni的SDK關聯了微信的SDK
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
<!-- wx和uni的SDK -->
<script src="./src/static/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="./src/static/uni.webview.1.5.3.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uniWebview.getEnv(function (res) {
console.log('當前環境：' + JSON.stringify(res))
});
});
</script>
</html>上述js文件的在線路徑如下
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>
此處需要將uni.webview.1.5.3.js下載到本地，然后修改里面的內容，因為默認自帶的方法名為uni，會和本地的uni命名沖突（官方案例是放在html原生頁面里所以不影響，我放在vue項目里則會沖突），所以我改成了uniWebview，可以格式化后修改，微信的SDK本地的和在線的都可以用
到之前接收的頁面添加一些代碼，用一個發送按鈕進行調用
<template>
<u-button @click="sendMessage">發送</u-button>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs'
onMounted(() => {
// 此處為之前接收數據的代碼
console.log('獲取傳遞的數據', qs.parse(window.location.href.split('?')[1]))
})
const sendMessage = () => {
uniWebview.postMessage({
data: {
action: '我要向微信端傳遞的數據',
phoneNumber: '15314601234'
}
});
}
</script>
<style lang='scss' scoped></style>在<web-view></web-view>添加@message="reciveMessage"，下方添加const reciveMessage = (data: any) => {...}，在返回到小程序的時候即可接收
<template>
<web-view :webview-styles="webviewStyles" :src="url" @message="reciveMessage"></web-view>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
import qs from 'qs'
onLoad(() => {
// 之前qs序列化的代碼，省略掉部分
url.value += decodeURI(qs.stringify(data, { indices: false }))
})
const reciveMessage = (data: any) => {
uni.showToast({
title: "reciveMessage接收到消息：" + JSON.stringify(data.detail),
duration: 2000,
icon: 'none'
});
console.log("接收到消息：" + JSON.stringify(data.detail));
}
</script>
<style lang='scss' scoped></style>在微信小程序跳轉回的頁面即可看到
“uniapp中微信小程序與H5怎么實現相互跳轉及傳參”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
