vue 返回上一页传参_H5页面与微信小程序相互跳转并传参(web-view)
H5頁面用vue2.全家桶寫的。
一、vue代碼編寫vue中路由的編寫
1)vue init webpack test
2)/src/router/index.js中引入路由組件
import Index from 'src/components/index/index'
import Search from 'src/components/search/search'
3)/src/router/index.js中定義路由
{
path: '/index',
component: Index,
meta: {
title: '首頁'
}
},
{
path: '/search',
component: Search,
meta: {
title: '搜索'
}
}
小程序web-view的src的地址就是：XXX/#/index 和 XXX/#/search。
2. 小程序web-view的src指向的H5頁面自定義標題vue-wechat-title?www.npmjs.com
1)npm install vue-wechat-title --save
2) 在main.js中引入：
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
3)App.vue中
4)路由定義，見1中3)的meta。
二、本地調試找到本機在內網中的IP地址。 終端輸入，MAC操作系統(tǒng)：ifconfig； windows操作系統(tǒng)：ipconfig。
修改配置項。 打開/package.json：
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline...
}
3. 測試：(電腦與手機在同一個局域網內)，如本機在內網中的IP地址：192.168.0.110
4. eslint 報錯，可以打開 /package.json , 在"scripts":{....}中找到"lint": "eslint --ext .js,.vue src" 修改成："lint": "eslint --fix --ext .js,.vue src" ，如此可以自動修復代碼樣式。修改后，在終端中先執(zhí)行，npm run lint (修改代碼樣式)；再執(zhí)行npm run dev。(不一定好使，最好是在/.eslintrc.js中手動設置，然后再npm run dev。)
三、 小程序
1、設置“不效驗合法域名、... ....”
2、小程序向H5傳遞數(shù)據，使用web-viewweb-view | 微信開放文檔?developers.weixin.qq.com
注意：web-view頁面中的bindmessage方法不會在該頁面顯示的時候被觸發(fā)，簡言之，只會在離開該web-view頁面，致使web-view頁面銷毀了才觸發(fā)，如，wx.navigateTo。點擊小程序當前頁面的元素就會顯示H5頁面。
1)準備數(shù)據
/**js**/
data:{
isShow: false
}
2)點擊小程序頁面的某一個元素才會跳轉到指定的H5頁面。
點擊跳轉H5頁面
bindmessage="onVueMsg" />
3)點擊小程序頁面的某一個元素才跳轉到指定的H5頁面并傳參。
點擊跳轉H5頁面并傳參
bindmessage="onVueMsg" />
4)點擊函數(shù)toOtherLink的編寫。
/*點擊跳轉到指定的H5頁面*/
/*點擊之后，如果當前小程序page就是顯示web-view頁面的小程序page，按鈕會被web-view頁面遮住，web-view頁面會全屏顯示*/
toOtherLink:function(){
this.setData({
isShow:true
})
},
/*輸出從vue中返回的數(shù)據*/
onVueMsg:function(e){
// 小程序后退、組件銷毀、分享，時才觸發(fā)onVueMsg方法/* 當前不會有輸出，vue中也沒有編寫相關代碼 */
console.log(e.detail.data)
},點擊小程序頁面元素，跳轉到當前小程序項目的另一個頁面顯示H5頁面。
1)顯示H5頁面的小程序頁面的，.html文件的編寫
bindmessage="onVueMsg" />
2)顯示H5頁面的小程序頁面的，.js文件的編寫
/*輸出從vue中返回的數(shù)據*/
onVueMsg:function(e){
// 小程序后退、組件銷毀、分享，時才觸發(fā)onVueMsg方法/* 當前不會有輸出，vue中也沒有編寫相關代碼 */
console.log(e.detail.data)
},
四、vue接收小程序傳遞過來的數(shù)據
/* 在vue的create或是mounted生命周期函數(shù)中獲取從小程序傳遞過來的數(shù)據 */
console.log(window.location.herf)
/** 接收小程序端傳遞過來的數(shù)據, 用console.log()輸出看不出來。可以把它賦值給頁面data中的變量，顯示在頁面上。 **/
data(){
return {
getWChatData: ''
}
}
mounted: function () {
console.log(window.location.href.split('?')[1])
this.getWChatData = window.location.href.split('?')[1]
/*** H5接收小程序傳來的一個參數(shù)，類型是，字符串或是數(shù)字等 ***/
(window.location.href).split('?')[1].split('=')[1]
/**** H5接收小程序傳遞過來的一個參數(shù)，類型是，object，需要先在小程序中進行數(shù)據轉化，const initParams = encodeURIComponent(JSON.stringify(initData))initdata是對象類型的數(shù)據(console.log(typeof(initdata)))。web-view的url(寫在小程序js文件中的)就是：'http://192.168.0.110:8080/#/index?initParamsFormWChat='+initParams****/
JSON.parse(
decodeURIComponent(window.location.href).split('?')[1].split('=')[1]
)
}
五、H5傳參給小程序npm install weixin-js-sdk
在使用的vue單頁面內引入：import wx from 'weixin-js-sdk'
// 在H5頁面點擊某一個元素，觸發(fā)返回到小程序(使用了vant的button組件)危險按鈕
/**js**/
methods: {
onCLick () {
wx.miniProgram.postMessage({
data: {
info: '返回數(shù)據了'
}
})
wx.miniProgram.redirectTo({
url: '/pages/index/index' // 小程序中頁面的路徑 })
}
},
六、在微信開發(fā)者工具的模擬器中，跳轉到的H5頁面上，點擊'危險按鈕'，調試器中可以看到，從vue返回的數(shù)據了，調試器中頁面也顯示了指定的小程序頁面了/pages/index/index。
七、掃碼測試，有時候顯示接口錯誤提示。但是在微信開發(fā)者工具的模擬器中測試，不會有這個錯誤提示。
八、上線之前真實接口的調試上線使用的接口需登錄小程序管理后臺配置業(yè)務域名。
挖坑。。。。。。
九、缺點
H5與小程序混合開發(fā)，不能使用真實的線上地址開發(fā)還是有很多坑的，微信開發(fā)者工具還好，如果是掃碼測試，提示接口錯誤。但是，也不能保證微信開發(fā)者工具的調試器的效果與真機測試一致。
總結
以上是生活随笔為你收集整理的vue 返回上一页传参_H5页面与微信小程序相互跳转并传参(web-view)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu设置始终亮屏_如何设置默认显
- 下一篇： migo获取header sap_Adj