这的场景是 小程序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中两个方案的 相互传值 结合