微信小程序与H5数据传递
这的场景是 小程序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中两个方案的 相互传值 结合
