uniapp开发的小程序 以及微信小程序都可以的！

首先说明我这套的h5页面里面有可视化图表，h5页面里面无接口请求，只是在小程序里面通过地址栏传参到vue写的h5页面里面拿到数据进行一个页面渲染，h5页面可截图（前端实现截屏功能）。 小伙伴可以根据自己的项目业务去扩展哈
注意说一下 onLoad里面接收参数需要解码 ！！！！

<template>
    <view class="container">
        <web-view :src="urls+dataList"></web-view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                datas:'',
                urls:'',//地址
            }
        },
          onLoad(option){
            if(process.env.NODE_ENV == 'development'){//h5分享页的生产和测试环境地址区分
                this.urls='https://xxx.cn/xxx/xxx'
            }else{//生产
                this.urls='https://xxxxx/xxxxxxx/xxxx'
            }

            if(option.url){ //有参数就证明是从分享的地方点击过来的，就带着参数直接打开连接
                this.dataList='?'+option.url
            }else{          //无参数就证明用户是从首页走过来的走接口拿数据
                this.H5jump()
            }
        },
      methods: {
            onShareAppMessage(options) {
                const { webViewUrl } = options;
                let search = '',
                let data = webViewUrl.split('?')[1];  //截取地址？后面的参数

                const shareObj = {
                    title: "我已经坚持背词好几天啦",                         // 默认是小程序的名称(可以写slogan等)
                    path: '/pages/index/index?url='+data,        // 默认是当前页面，必须是以‘/’开头的完整路径，通过拼接的方式，把需要分享的web-view的url以及参数拼接进去，然后在该`web-view`的页面中去做参数判断，一旦传入了对应的url和参数，就进入对应的url并携带对应的参数
                    // imageUrl: '',     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
                    success: function (res) {
                                // 转发成功之后的回调
                        if (res.errMsg == 'shareAppMessage:ok') {
                        }
                    },
                    fail: function () {
                                // 转发失败之后的回调
                        if (res.errMsg == 'shareAppMessage:fail cancel') {
                                // 用户取消转发
                        } else if (res.errMsg == 'shareAppMessage:fail') {
                                // 转发失败，其中 detail message 为详细失败信息
                        }
                    },
                    complete: function () {
                        // 转发结束之后的回调（转发成不成功都会执行）
                        }
                    }
                        // 来自页面内的按钮的转发
                    if (options.from == 'button') {
                        var data= options.target.dataset;

                        // 此处可以修改 shareObj 中的内容
                        // shareObj.path = '/pages/index' + data.name;
                }
                        // 返回shareObj
                return shareObj;
            },
            H5jump(){ //接口拿到数据传给h5页面渲染页面
                let data = {
                    id:'1231414324'
                  }
                apiaxios(data).then(res => {
                    console.log('接口返回参数',res)
                    if(res.code == 200) {
                        this.datas=JSON.stringify(res.data) 
                        this.dataList='?webview='+this.datas+'&userinfo='+store.state.user.nickName
                    }
                }).catch(error=>{
                    console.log('',error)
                })
            },
          }
          }
</script>