微信小程序、vueH5页面互相跳转并传递参数_在vue中外部h5跳转小程序页面传递参数

微信小程序、vueH5页面互相跳转并传递参数

微信小程序是uni-app 运行到微信开发者工具里，vue 是 跑项目到本地的。

1.uni-app 里

<template>
  <web-view :src="url" @message="getMessage" @onPostMessage="getPostMessage"></web-view>
</template>

<script>
  export default {
    data() {
      return {
        url: ''
      }
    },
    onLoad(option) {
      let url = {
        phone: 127837238,
        name:'sunzhuang'
      }
      console.log(JSON.stringify(url))
      // http://192.168.3.69:8081/#/LoginIndex 这个地址就是你vue项目跑起来的地址
      this.url = 'http://192.168.3.69:8081/#/LoginIndex?url=' + JSON.stringify(url);
    },
    methods: {
      getMessage(e) {
        console.log("@message 接收成功")
        uni.showModal({
          content: JSON.stringify(e.detail),
          // content: 'haha',
          showCancel: false
        })
      },
      getPostMessage(e) {
        console.log("@onPostMessage 接收成功")
        uni.showModal({
          content: JSON.stringify(e.detail),
          // content: 'haha',
          showCancel: false
        })
      },
    },
  }
</script>

<style lang="scss">
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

2.vue页面
首先在vue index.html 引入 注意顺序 weixin.js 要在前

	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
1
2

3.vue 页面代码

<template>
  <div class="container">
  		<!-- paramsData  是接受uni-app 小程序传递过来的值的  console.log 是不显示的 -->
      {{ paramsData }}
      <button @click="postMsg">向app发送消息</button>
  </div>
</template>
<script>
export default {
  name: '',
  props: [],
  data() {
    return {
      paramsData:'',
    }
  },
  mounted() {
 	// $route.query是拿不到的
 	// 获取浏览器地址，分割？后面的就是传过来的值了
    console.log(window.location.href);
    console.log(window.location.href.split('?'))
    this.paramsData = window.location.href.split('?')[1]
    this.$nextTick(() => {
    // 确保 index.html 页面引入的js加载完成后 在监听UniAppJSBridgeReady方法
      document.addEventListener('UniAppJSBridgeReady', function () {
        uni.getEnv(function (res) {
          console.log('当前环境：' + JSON.stringify(res));
        });
      });
    })
  },
  methods: {
    postMsg() {
      console.log("调用uni.postMessage，开始发送")
      // uni-app 里  web-view 的方法  就可以拿到 data: {action: 'postMessage hh'}
      uni.postMessage({
        data: {
          action: 'postMessage hh'
        }
      });
      // 返回上一级
      // uni.navigateBack()
      // wx.miniProgram.redirectTo({
      //   url: '/pages/cate/cate' // 小程序中页面的路径
      // })
      wx.miniProgram.switchTab({
        url: '/pages/cate/cate' // 小程序中页面的路径
      })
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

可以直接复制使用 ！！！！