uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參詳解(webview)
技術(shù)棧：
uniapp-H5+uniapp-微信小程序（vue3+vite2+ts）
前言：
在單位做項(xiàng)目的時(shí)候碰到一個(gè)需求，需要從微信小程序跳轉(zhuǎn)到H5頁(yè)面，這兩個(gè)端都是使用uniapp編寫(xiě)的，查資料后決定使用webview來(lái)嵌入完成，然后考慮到還可能有參數(shù)（數(shù)據(jù)）需要傳遞，所以實(shí)現(xiàn)后記錄一下。ps：以下代碼我是根據(jù)查找的資料里從vue2改成vue3的寫(xiě)法，若有需要改回去即可
一、小程序向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，其他版本我試了會(huì)報(bào)錯(cuò)
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è)置
添加該頁(yè)面，然后可以在其他頁(yè)面設(shè)置一個(gè)跳轉(zhuǎn)動(dòng)作，跳轉(zhuǎn)到該頁(yè)面就會(huì)自動(dòng)進(jìn)入H5頁(yè)面
{
"path": "pages/webview/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
3.H5端進(jìn)行數(shù)據(jù)接收
在路徑跳轉(zhuǎn)的頁(yè)面接收，補(bǔ)充一點(diǎn)，根據(jù)查資料，小程序向H5傳參只能通過(guò)URL來(lái)傳遞
<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)前頁(yè)面路由
console.log('獲取傳遞的數(shù)據(jù)', qs.parse(window.location.href.split('?')[1]))
})
</script>
4.調(diào)試方式以及數(shù)據(jù)查看
此處是后來(lái)無(wú)意間看到的文章才知道在哪調(diào)試，在微信小程序中，到H5頁(yè)面后，底部會(huì)有一個(gè)類(lèi)似瓢蟲(chóng)的標(biāo)志，下圖為工具欄及打印出的參數(shù)
二、H5向小程序傳遞
1.引入需要的模塊
這塊是我踩坑比較多的地方，是重點(diǎn)，首先在index.html中引入微信小程序和uniapp相關(guān)的SDK，放在<body></body>后面，兩個(gè)都得引入，因?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，會(huì)和本地的uni命名沖突（官方案例是放在html原生頁(yè)面里所以不影響，我放在vue項(xiàng)目里則會(huì)沖突），所以我改成了uniWebview，可以格式化后修改，位置如下，微信的SDK本地的和在線的都可以用
3.H5端發(fā)送數(shù)據(jù)
到之前接收的頁(yè)面添加一些代碼，用一個(gè)發(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) => {...}，在返回到小程序的時(shí)候即可接收
<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)回的頁(yè)面即可看到
三、參考鏈接地址
1、更多細(xì)節(jié)部分及兼容部分看官方文檔：https://uniapp.dcloud.net.cn/component/web-view.html#web-view
2、uni改成uniWebview修改參考：https://ask.dcloud.net.cn/article/id-38847__page-3#reply
3、基本流程參考：http://t.zoukankan.com/lizhao123-p-12005868.html
4、需要引用微信SDK的原因參考：https://ask.dcloud.net.cn/article/35083
5、特別提示，只有認(rèn)證過(guò)的企業(yè)賬號(hào)才能在手機(jī)上真機(jī)調(diào)試正確跳轉(zhuǎn)過(guò)去，個(gè)人賬號(hào)現(xiàn)在不支持這功能，會(huì)報(bào)提示“web-view不支持打開(kāi)非業(yè)務(wù)域名請(qǐng)重新配置”，參考文章：http://www.dhdzp.com/article/260762.htm，但是開(kāi)發(fā)時(shí)在微信小程序的詳情設(shè)置中打開(kāi)允許，在開(kāi)發(fā)者工具里是能跳轉(zhuǎn)的
總結(jié)
到此這篇關(guān)于uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參的文章就介紹到這了,更多相關(guān)uniapp 小程序與H5相互跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript arguments 傳遞給函數(shù)的隱含參數(shù)
眾所周知，js是腳本語(yǔ)言，腳本語(yǔ)言的一個(gè)特點(diǎn)就是極其靈活。有時(shí)“靈活”到使我這種習(xí)慣c系主流語(yǔ)言的人不得不佩服腳本的強(qiáng)大。比如這里要講到的 arguments參數(shù)。2009-08-08
這篇文章主要介紹了addEventListener 的用法,需要的朋友可以參考下2014-05-05
這篇文章介紹了在ASP.NET中使用JavaScript腳本的方法，有需要的朋友可以參考一下2013-11-11
XML文件轉(zhuǎn)化成NSData對(duì)象的方法
這篇文章主要介紹了XML文件轉(zhuǎn)化成NSData對(duì)象的方法，需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
下面小編就為大家?guī)?lái)一篇js 自帶的 map() 方法全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景
這篇文章主要介紹了微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
本篇文章通過(guò)例舉代碼分析的方式給大家講解了JavaScript數(shù)組操作難點(diǎn)以及需要注意的地方，一起學(xué)習(xí)參考下吧。2017-12-12
javascript之學(xué)會(huì)吝嗇 精簡(jiǎn)代碼
前端開(kāi)發(fā)，要學(xué)會(huì)吝嗇:2010-04-04
js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法
這篇文章介紹了js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法，有需要的朋友可以參考一下2013-06-06