微信小程序 向内嵌的H5传参(传递参数)

需求：点击A页面的跳转网页按钮跳转到B页面，B页面使用web-view组件(用于展示H5)，并向H5传递参数，H5弹框要显示这些参数。

image.png

做法：

\color{#0000FF}{小程序A页面}

image.png

  • index.js
jumpWeb(){
    wx.navigateTo({
      url: '../webView/webView?type=' + '1' + "&orderId=" + '6666'
    })
}

\color{#0000FF}{小程序B页面}

image.png

  • webView.js
onLoad: function (options) {
    this.setData({
      webSrc:'http://extend.feiyang.life/#/login?type=' + options.type + "&orderId=" + options.orderId
    })
},
  • webView.wxml
<web-view src='{{webSrc}}'></web-view>
image.png

\color{#0000FF}{H5页面 } (vue项目)

  • Login.vue
mounted() {
  // 获取浏览器的参数并弹框
  var type = this.$route.query.type;
  var orderId = this.$route.query.orderId;
  var toastMsg = 'type为  ' + type + '  orderId为  ' + orderId;
  this.$fyToast(toastMsg);
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容