小程序web-view如何跟H5传送信息

今天接了一个新的需求,需要在小程序内打开一个h5界面进行授权,之后再返回信息。
测试了官方文档wx.miniProgram.postMessage没有效果后,想了个折中的办法。
web-view =》打开页面 =》进行授权 =》页面内部自己跳转 =》跳转小程序某个承接页。
实际上是使用了wx.miniProgram.navigateTo({url: '/path/to/page'})方法,让后端在h5页面跳回小程序时跳到一个特定页面,将参数拼接在页面后缀,这才实现了传输信息。

  • web-view代码:
<web-view src="{{url}}"></web-view>
  onLoad: function (options) {
    let _this = this;
    wx.request({
      url: 'xxx/weiXin/returnUrl', //仅为示例,并非真实的接口地址
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        let url = 'https://xxxx&state=redirect&sUrl=' + res.data
        _this.setData({
          url: encodeURI(url)
        })
        console.log(encodeURI)
      },
      fail(res) {
        console.log(res)
      }
    })
  }
  • h5页面
wx.miniProgram.navigateTo({url: '/pages/index/login'+ data });
  • 承接页面
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getUserInfo(options)
  },

  /**
   * 获取用户信息
   * @pamars 用户信息
   */
  getUserInfo(options) {
    let _this = this;
    let userInfo = options;
    app.setUser(userInfo);
    wx.reLaunch({
      url: '/pages/index/index'
    })
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容