小程序内嵌H5页面

小程序端

1. 首先引入小程序的webview标签；
2. 然后在给该标签填写对应的内嵌H5地址；

import Taro, {Component, Config} from "@tarojs/taro";
import {connect} from "@tarojs/redux";
import qs from "qs";
import {WebView} from "@tarojs/components";
import {getCurrentUserParams} from "@/utils/utils";
class sendNotice extends Component {
  config: Config = {
    navigationStyle: "custom",
    enablePullDownRefresh: false,
    backgroundTextStyle: "dark",
    onReachBottomDistance: 20,
  };
  constructor(props) {
    super(props);
    this.state = {
      src: "",
    };
  }
  componentDidMount() {
    let base; // 内嵌H5地址
    base = "http://123456.xxxx.com"; // 环境跳转
    let params = getCurrentUserParams(this.props.chooseChild);// 获取浏览器要用到的参数
    params = {
      ...params,
      id: this.$router.params.noticeId,
      isEdit: this.$router.params.isEdit,
    };
    const src = `${base}/#/newsBulletin_announce?${qs.stringify(params)}`;
    console.log(src);
    this.setState({src});
  }
  render() {
    const {src} = this.state;
    return ;
  }
}
// tslint:disable-next-line: typedef
const mapStateToProps = ({}) => {
  return {};
};
// tslint:disable-next-line: typedef
const mapDispatchToProps = () => {
  return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(sendNotice);

H5端

1. 在html文件引入小程序的sdk；

2.完成交互后跳转回小程序；

wx.miniProgram.navigateTo({ url: '/pages/notification/notificationList/notificationList' });

PS
1、最重要的是，h5的跳转域名要在小程序的合法域名列表；
2、小程序端与h5端请求端域名要统一；
由于项目分本地、研发、测试、预发布和发布环境，请求配置容易混乱，要十分注意。
当然要不要统一域名视项目而定。
3、兼容；
在微信环境中h5其实就是公众号，所以少不了要处理万恶的兼容性，
如定位、输入框失焦点、日期的横竿‘-’在ios无法正常显示等等；
4、如果是本地调试，开发者工具暂时不支持在开发者工具上看到h5的页面的，需要真机调试；
总结
总的来说，做小程序跟公众号难度其实差不多，小程序的问题是要学习小程序的api，有时候还有莫名的坑，如视频直播总是黑屏等问题频发，而h5的问题基本就是兼容问题；
小程序的优势是把大部分兼容都做了，使用流畅，可以调用部分硬件的能力；缺点是给了你一个笼子，你想干嘛都得遵守它的规矩，最最重要的，是对性能要求十分严苛，如长列表渲染图片/视频很容易就引起小程序的崩溃，虽然他们也有相关对性能优化方案，但你不知道的时候会发现开发过程十分痛苦，找各种替代方案，最终内嵌h5就是其中一种。
程序员就这样，一边踩坑，一边造坑吧～～