微信小程序与H5数据传递

时间:2022-03-29 18:47:57
这的场景是 小程序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中两个方案的 相互传值 结合