当“uniapp-微信小程序”遇上“uniapp-h5”

需求

• 微信小程序中接入H5页面，在H5中计算出结果，点击推荐科室，返回小程序中科室排班页面。
• H5中的接口需要微信小程序传入appKey才可以使用。

1.微信小程序中打开H5

微信小程序中新建一个页面，用于单独放web-view组件，同时也便于后续内容的复用。

// webview.vue
<template>
  <view class="container">
    <web-view v-if="url" :src="url" @message="getH5Message"></web-view>
  </view>
</template>

2.微信小程序向H5传参

可通过url直接传参。需要注意这里的传参方式，因为h5项目使用的是history模式，所以需要增加/#/。

// webview.vue
onLoad(query) {
    switch (query.type) {
      // 这里可根据传参不同，进入不同的h5页面
      case "smartGuide":
        this.url = "http://xxx.com/#/?appKey=xxx";
        break;
      default:
        break;
    }
 },

3.H5接收传参

在App.vue文件的onLaunch中接收，传参相关数据，在query中，可存储相关数据，供后续使用。

// App.vue
onLaunch: function (dataObj) {
    // #ifdef H5
    const appKey = dataObj.query.appKey;
    // #endif
}

4.H5向微信小程序传参

h5中不支持uni.postMessage，所以要使用微信SDK。h5项目中，安装weixin-js-sdk。

npm install --save-dev weixin-js-sdk

引入微信SDK，并调用miniProgram.postMessage方法，数据格式{ data: '' }。

// res.vue
<script>
import jsWX from "weixin-js-sdk"; // 引入微信SDK
export default {
    methods:{
        handleClick(item){
          // #ifdef H5
          jsWX.miniProgram.getEnv((res) => {
            // 1.判断小程序环境
            if (res.miniprogram) {
              // 2.传数据
              const postData = {
                from: "smartGuide",
                backData: {
                  appHisId: item.appHisId,
                  officeName: item.officeName,
                },
              };

              jsWX.miniProgram.postMessage({ data: postData });

              // 3.返回小程序，触发@message事件
              jsWX.miniProgram.navigateBack();
            }
          });
          // #endif
        }
    }
}
</script>

5.H5返回微信小程序

调用微信SDK中的miniProgram.navigateBack方法，返回到小程序，触发web-view中的@message事件。

// res.vue
jsWX.miniProgram.navigateBack(); // 返回小程序，触发@message事件

6.微信小程序接收传参

在web-view组件所在页面中接收，使用组件的@message方法，传参相关数据，在e.detail.data中。

// webview.vue
export default {
  methods: {
    getH5Message(e) {
      const H5Msg = e.detail.data[0]; // webview 返回传参
      
      // 跳转页面
      uni.redirectTo({ url: "/xxxx/xxxx/xxx" });
    },
  },
};