vue 跳转到uniapp ，只能微信小程序

需求：小程序嵌入H5页面，并需要H5中的参数请求数据

思路：在H5中判断是否是微信小程序中 ====》在小程序环境中传值给微信小程序 ====》微信小程序接收H5传递的值

实现：

H5中

var ua = window.navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i) == 'micromessenger') {    //判断是否是微信环境

     // 微信环境

     wx.miniProgram.getEnv(function (res) {

         if (res.miniprogram) {  //小程序环境

             var msg= {

                 openid: '111'

             }

             wx.miniProgram.postMessage({

                     //这个方法在小程序文档中有，H5向小程序传值

                     //[附上官方地址](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)

                      //这里一定要将数据放在dada中

                  data: {

                    message: msg

                 }

             });

             //H5向小程序传值的方法会在特定的时间触发，因此需要我们手动写一个跳转（也可以写后退和摧毁，分享，以需求而定）

               wx.miniProgram.redirectTo({

                   url: '../pay/wxpay' //这里是小程序页面

               })

           } else {

               //非小程序环境下逻辑

               console.log('不在小程序中')

           }

       })

   }

小程序中：

wxml

<web-view src="{{link}}" bindmessage="handlePostMessage"></web-view>

wxjs

Page({

  data: {

    url: 'url: 'https://www.baidu.com' //这里是H5的地址

  }，

  onLoad: function (options) {},

  // 接收 h5 页面传递过来的参数

  handlePostMessage: function (e) {

    let resObj = e.detail.data[e.detail.data.length - 1];

//多次传递会是数组的形式，传递一次会push进数组，所以我们需要拿到最新的数据，也就是数组的最后一个子集

    console.log(resObj.message)

  }

})

0人点赞

日记本

作者：偶尔冒泡_

链接：https://www.jianshu.com/p/2cc9d7ee9da7

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。