這的場景是 小程序webview 加載 H5應用
需求點：
1. 小程序的登錄code 需要與H5應用的sessionId建立綁定關系
2.H5內發起微信小程序支付，支付參數傳遞到小程序，支付結果傳遞回H5
需求1
方案1 ：小程序新開一個空白頁面專門用於 code 與session 的綁定請求，然后返回index首頁
實現過程：
H5中發送 session參數 給小程序
const path = '/pages/session/session' + param;
// 通過JSSDK的api使小程序跳轉到指定的小程序頁面
wx.miniProgram.navigateTo({
url: path,
});
小程序 session 頁面
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function(options) {
if (options.sessionId) {
// 接收參數
this.sessionId = options.sessionId;
console.log("get webview sessionId:" + options.sessionId);
wx.setStorageSync('sessionId', options.sessionId);
}
this.loginCode = wx.getStorageSync('loginCode');
this.sessionId = wx.getStorageSync('sessionId');
if (this.sessionId && this.loginCode) {
// 綁定 操作請求
this.bindSessionIdWithLoginCode(this.sessionId, this.loginCode);
wx.navigateBack({})
}
此方案的 缺點，每次啟動小程序 進入綁定操作會進入一次空白頁然后返回，給人閃回首頁的視覺 用戶體驗不好
方案2 將H5獲取sessionId 的請求放在小程序中，得到sessionId后 通過小程序webview 的URL傳遞sessionId給H5，並且H5此時才開始第一次加載數據，解決方案的閃回的不好體驗
index.wxml 使用條件加載的方式 讓 webview 在需要的時候才開始加載
<web-view wx:if="{{webUrl}}" src="{{webUrl}}" bindload="loadSucces"></web-view>
index.js
onLoad: function (options) {
var _this = this;
app.toLogin().then(function (res) {
_this.getSessionId();
console.log('登錄后');
console.log(res);
});
}
getSessionId(){
var that = this;
// last sessionId
if (wx.getStorageSync('sessionId')){
that.bindSessionIdWithLoginCode(wx.getStorageSync('sessionId'), wx.getStorageSync('lo ginCode'));
} else {
// new sessionID
wx.request({
url: '
https://zeno-****',
data: {},
success: res => {
if (res.data.sessionId) {
wx.setStorageSync('sessionId', res.data.sessionId);
wx.setStorage('sessionId', res.data.sessionId);
that.bindSessionIdWithLoginCode(res.data.sessionId, wx.getStorageSync('loginC ode'));
} else {
_this.getSessionId();
}
console.log('sessionId success!' + JSON.stringify(res));
},
fail: error => {
console.log('sessionId error!');
}
})
}
},
bindSessionIdWithLoginCode: function (sessionId, loginCode) {
var that = this;
wx.request({
url: '
https:/**/openapi/element/wechat/auth/' + sessionId + '/' + loginCode,
data: {},
success: res => {
if (res.data === 'success') {
console.log('bind success!’);
// 關鍵點在 綁定成功后 開始加載 webview
that.setData({
webUrl: getApp().globalData.host + "#/return_url?wxlogincode=" + encodeURI(se ssionId)
})
console.log(that.data.webUrl);
} else {
// new code past time sessionId get new sessionId
wx.removeStorageSync('sessionId');
that.getSessionId();
}
},
fail: error => {
console.log('bind error!');
}
})
},
})
在 H5中通過路由攔截獲得 小程序加載webview時 傳遞來的 sessionId
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: any) => {
console.log(e);
if (e.url.indexOf('/return_url?wxlogincode') > -1) {
localStorage.setItem('sessionId', e.url.split('=')[1]);
window.location.replace('
https://h5.fuwugu.net');
return;
}
}
需求2 的實現 就是 需求1中兩個方案的 相互傳值 結合