uniapp中微信小程序與H5怎么實(shí)現(xiàn)相互跳轉(zhuǎn)及傳參

發(fā)布時間：2022-08-26 11:41:59 來源：億速云閱讀：353 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“uniapp中微信小程序與H5怎么實(shí)現(xiàn)相互跳轉(zhuǎn)及傳參”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

技術(shù)棧：

uniapp-H5+uniapp-微信小程序（vue3+vite2+ts）

前言：

在單位做項(xiàng)目的時候碰到一個需求，需要從微信小程序跳轉(zhuǎn)到H5頁面，這兩個端都是使用uniapp編寫的，查資料后決定使用webview來嵌入完成，然后考慮到還可能有參數(shù)（數(shù)據(jù)）需要傳遞，所以實(shí)現(xiàn)后記錄一下。ps：以下代碼我是根據(jù)查找的資料里從vue2改成vue3的寫法，若有需要改回去即可

一、小程序向H5傳遞

1.小程序端發(fā)送數(shù)據(jù)

在如下路徑創(chuàng)建文件/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去除默認(rèn)格式
    url.value += decodeURI(qs.stringify(data, { indices: false }))
})
</script>

<style lang='scss' scoped></style>

2.pages.json進(jìn)行設(shè)置

添加該頁面，然后可以在其他頁面設(shè)置一個跳轉(zhuǎn)動作，跳轉(zhuǎn)到該頁面就會自動進(jìn)入H5頁面

{
	"path": "pages/webview/index",
	"style": {
		"navigationBarTitleText": "uni-app"
	}	
}

3.H5端進(jìn)行數(shù)據(jù)接收

在路徑跳轉(zhuǎn)的頁面接收，補(bǔ)充一點(diǎn)，根據(jù)查資料，小程序向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) // 獲取當(dāng)前頁面路由
    console.log('獲取傳遞的數(shù)據(jù)', qs.parse(window.location.href.split('?')[1]))
})
</script>

4.調(diào)試方式以及數(shù)據(jù)查看

此處是后來無意間看到的文章才知道在哪調(diào)試，在微信小程序中，到H5頁面后，底部會有一個類似瓢蟲的標(biāo)志

二、H5向小程序傳遞

1.引入需要的模塊

這塊是我踩坑比較多的地方，是重點(diǎn)，首先在index.html中引入微信小程序和uniapp相關(guān)的SDK，放在<body></body>后面，兩個都得引入，因?yàn)閡ni的SDK關(guān)聯(lián)了微信的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('當(dāng)前環(huán)境：' + 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>

2.更改文件內(nèi)容

此處需要將uni.webview.1.5.3.js下載到本地，然后修改里面的內(nèi)容，因?yàn)槟J(rèn)自帶的方法名為uni，會和本地的uni命名沖突（官方案例是放在html原生頁面里所以不影響，我放在vue項(xiàng)目里則會沖突），所以我改成了uniWebview，可以格式化后修改，微信的SDK本地的和在線的都可以用

3.H5端發(fā)送數(shù)據(jù)

到之前接收的頁面添加一些代碼，用一個發(fā)送按鈕進(jìn)行調(diào)用

<template>
    <u-button @click="sendMessage">發(fā)送</u-button>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs'

onMounted(() => {
	// 此處為之前接收數(shù)據(jù)的代碼
    console.log('獲取傳遞的數(shù)據(jù)', qs.parse(window.location.href.split('?')[1]))
})

const sendMessage = () => {
    uniWebview.postMessage({
        data: {
            action: '我要向微信端傳遞的數(shù)據(jù)',
            phoneNumber: '15314601234'
        }
    });
    
}
</script>

<style lang='scss' scoped></style>

4.小程序端進(jìn)行數(shù)據(jù)接收

在<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>

5.調(diào)試方式以及數(shù)據(jù)查看

在微信小程序跳轉(zhuǎn)回的頁面即可看到

“uniapp中微信小程序與H5怎么實(shí)現(xiàn)相互跳轉(zhuǎn)及傳參”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)