小程序內(nèi)嵌webview實(shí)現(xiàn)跳轉(zhuǎn)、傳參
1、小程序通過webView打開H5頁面并傳參
2、H5接收小程序傳參，H5返回小程序并實(shí)現(xiàn)傳參，小程序接收H5傳參
一、小程序通過webView打開H5頁面并傳參
在小程序中一般通過webview打開H5頁面
常見問題：
1、小程序通過webview打開H5頁面，需要配置業(yè)務(wù)域名，需要在小程序公眾平臺(tái)配置業(yè)務(wù)域名
2、在小程序中打開H5頁面時(shí)，是使用微信內(nèi)置瀏覽器打開的；所以最常見的問題是，頁面打開后，微信內(nèi)置瀏覽器的緩存清除不掉，導(dǎo)致小程序打開H5頁面內(nèi)容不更新。針對(duì)這個(gè)問題可以采取H5鏈接。
1、業(yè)務(wù)域名
微信開發(fā)者工具，可以開啟不校驗(yàn)業(yè)務(wù)域名，方便測(cè)試使用
手機(jī)調(diào)試可以開啟開發(fā)者模式，不校驗(yàn)業(yè)務(wù)域名，方便測(cè)試
小程序項(xiàng)目上線前，一定要配置業(yè)務(wù)域名，配置業(yè)務(wù)域名
業(yè)務(wù)域名配置方法：
（1）、打開小程序公眾平臺(tái)
（2）、配置業(yè)務(wù)域名，需要往域名根目錄下放配置文件，然后校驗(yàn)
2、在小程序中打開H5頁面，并解決緩存無法清除問題
方法：通過鏈接后面拼接時(shí)間戳，讓鏈接每次加載都是不同的鏈接，可以解決微信內(nèi)置瀏覽器緩存無法清除問題
<template>
<view>
<web-view :src="src"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src:"https://xxx/userLogin/index.html#/login?t="+new Date().getTime(),
};
}
}
</script>
<style lang="scss">
</style>
二、H5接收小程序傳參，H5返回小程序并實(shí)現(xiàn)傳參，小程序接收H5傳參
1、在H5vue頁面，created () 方法中接收小程序傳參
created () {
this.mobileMode = this.$route.query.mobileMode
this.mobileType = this.$route.query.mobileType
this.code = this.$route.query.Code
this.appid = this.$route.query.appId
},
2、H5返回小程序，需要安裝微信sdk
npm install weixin-js-sdk –save
在頁面中引入wxsdk
import wx from 'weixin-js-sdk'
文章來源：http://www.zghlxwxcb.cn/news/detail-527708.html
在成功回調(diào)方法使用wxsdk方法實(shí)現(xiàn)H5返回小程序并傳參
注意：如果參數(shù)比較多的時(shí)候，可以轉(zhuǎn)成JSON格式傳過去文章來源地址http://www.zghlxwxcb.cn/news/detail-527708.html
const personForm = JSON.stringify(this.personList)
wx.miniProgram.navigateTo({
url: '/pages/my/load?personForm=' + personForm, // 小程序地址
success () {
console.log('question success')
},
fail (error) {
console.log(error)
}
})
3、小程序中接收H5返回傳參，在小程序onLoad中接收
onLoad(option) {
this.personData = JSON.parse(option.personForm);
},
到了這里，關(guān)于小程序通過webView打開H5頁面并傳參（包含webView業(yè)務(wù)域名配置）、H5頁面實(shí)現(xiàn)返回小程序并實(shí)現(xiàn)傳參的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
