微信小程序与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中两个方案的 相互传值 结合