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