小程序端
- 首先引入小程序的webview标签；
- 然后在给该标签填写对应的内嵌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<any, any> {
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 <WebView src={src} />;
}
}
// tslint:disable-next-line: typedef
const mapStateToProps = ({}) => {
return {};
};
// tslint:disable-next-line: typedef
const mapDispatchToProps = () => {
return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(sendNotice);
H5端
- 在html文件引入小程序的sdk；
<!-- h5端与小程序交互的sdk -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
2.完成交互后跳转回小程序；
wx.miniProgram.navigateTo({ url: '/pages/notification/notificationList/notificationList' });
PS
1、最重要的是，h5的跳转域名要在小程序的合法域名列表；
2、小程序端与h5端请求端域名要统一；
由于项目分本地、研发、测试、预发布和发布环境，请求配置容易混乱，要十分注意。
当然要不要统一域名视项目而定。
3、兼容；
在微信环境中h5其实就是公众号，所以少不了要处理万恶的兼容性，
如定位、输入框失焦点、日期的横竿‘-’在ios无法正常显示等等；
4、如果是本地调试，开发者工具暂时不支持在开发者工具上看到h5的页面的，需要真机调试；
总结
总的来说，做小程序跟公众号难度其实差不多，小程序的问题是要学习小程序的api，有时候还有莫名的坑，如视频直播总是黑屏等问题频发，而h5的问题基本就是兼容问题；
小程序的优势是把大部分兼容都做了，使用流畅，可以调用部分硬件的能力；缺点是给了你一个笼子，你想干嘛都得遵守它的规矩，最最重要的，是对性能要求十分严苛，如长列表渲染图片/视频很容易就引起小程序的崩溃，虽然他们也有相关对性能优化方案，但你不知道的时候会发现开发过程十分痛苦，找各种替代方案，最终内嵌h5就是其中一种。
程序员就这样，一边踩坑，一边造坑吧～～
