微信小程序跳转H5页面以及彼此之间通信

微信小程序打开H5页面需要用到标签web-view，具体属性可见官方文档，这里记录一下两者之间的跳转和通信方法。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

1. web-view组件
小程序代码基于uni-app框架，非原生开发（刚开始工作时搞第一个小程序就是原生，从0到1，回忆起来很愉快）

<template>
    <view>
        <web-view :src="url" @message="bindmessage">
            <cover-view class="cover" v-show="currentPages !== 1" @click="returnPage">返回上页</cover-view>
        </web-view>
    </view>
</template>

<script>
export default {
    name: 'openUrl',
    data() {
        return {
            url: '', // h5页面链接
            currentPages: '', //当前页面层级
        }
    },
    onLoad(option) {
        this.url = decodeURIComponent(option.url)
        let currentPages = getCurrentPages() // 获取当前页面栈的实例
        this.currentPages = currentPages.length
    },
    methods: {
        returnPage() {
            uni.navigateBack({ delta: 1 })
        },
        // 监听H5页面传递信息
        bindmessage(options) {
            console.log(options.target.data) // h5页面传递信息只有value的数组，比如 ['不要骚扰我']
        }
    }
}
</script>

<style lang="scss" scoped>
.cover {
    position: fixed;
    top: 16rpx;
    left: -27rpx;
    width: 155rpx;
    height: 55rpx;
    font-size: 28rpx;
    color: #fff;
    background: rgba($color: #000000, $alpha: 0.5);
    border-radius: 50%;
    line-height: 1;
    text-align: right;
    padding-right: 20rpx;
    box-sizing: border-box;
    z-index: 999;
}
</style>

2. 小程序跳转H5页面

<template>
    <view class="page">
        <view class="btn" @click="toH5">有种你点我</view>
    </view>
</template>

<script>
export default {
    name: 'toH5',
    data() {
        return {
           
        }
    },
    onLoad(option) {
        
    },
    methods: {
        toH5() {
            let h5Url = 'https://www.xxx.com/h5/apl?type=我点了' // H5域名如果和小程序服务器域名不一致，记得在公众平台配置
            uni.navigateTo({
                url: '/pages/my/components/openUrl?url=' + encodeURIComponent(h5Url)
            })
            //h5链接最好url转义一下，避免与小程序自定义符号冲突，导致传参失败
        },
        
    }
}
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    .btn {
        width: 500rpx;
        height: 50rpx;
        background: #039702;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        line-height: 50rpx;
        border-radius: 15rpx;
    }
}
</style>

3. H5跳转回微信小程序
普通H5页面直接引入wxsdk

 <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

使用vue的H5页面

<template>
    <div class="page">
        <div class="btn" @click="toMiniProgram">向微信小程序问好</div>
    </div>
</template>

<script>
import { queryParam } from '/common'
import wx from 'weixin-js-sdk'
export default {
    name: 'H5',
    data() {
        return {
           msg: '' //小程序传递过来的信息
        }
    },
    created() {
        this.msg = queryParam(msg) || this.$route.query.msg //我点了
        // this.toMiniProgram()
    },
    methods: {
        toMiniProgram() {
            wx.miniProgram.getEnv(res => {
                if (res.miniProgram) {
                    console.log('在小程序里')
                    setTimeout(() => {
                        wx.miniProgram.postMessage({ data: '不要骚扰我' })//如果传递多个信息，多次调用此方法
                    },300) // 唤醒小程序api有一定延迟，加个延迟多一层保险
                    wx.miniProgram.navigateBack()
                } else {
                    console.log('不在小程序里')
                    setTimeout(()=> {
                        wx.closeWindow()
                    },300)
                }
            })
        },
        
    }
}
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    .btn {
        width: 500rpx;
        height: 50rpx;
        background: #039702;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        line-height: 50rpx;
        border-radius: 15rpx;
    }
}
</style>