小程序端
- 首先引入小程序的webview標簽毫捣；
- 然后在給該標簽填寫對應的內(nèi)嵌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; // 內(nèi)嵌H5地址
base = "http://123456.xxxx.com"; // 環(huán)境跳轉
let params = getCurrentUserParams(this.props.chooseChild);// 獲取瀏覽器要用到的參數(shù)
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端請求端域名要統(tǒng)一；
由于項目分本地、研發(fā)矿微、測試痕慢、預發(fā)布和發(fā)布環(huán)境，請求配置容易混亂涌矢，要十分注意掖举。
當然要不要統(tǒng)一域名視項目而定。
3娜庇、兼容塔次；
在微信環(huán)境中h5其實就是公眾號，所以少不了要處理萬惡的兼容性名秀，
如定位励负、輸入框失焦點、日期的橫竿‘-’在ios無法正常顯示等等匕得；
4熄守、如果是本地調(diào)試，開發(fā)者工具暫時不支持在開發(fā)者工具上看到h5的頁面的耗跛，需要真機調(diào)試裕照；
總結
總的來說，做小程序跟公眾號難度其實差不多调塌，小程序的問題是要學習小程序的api晋南，有時候還有莫名的坑，如視頻直播總是黑屏等問題頻發(fā)羔砾，而h5的問題基本就是兼容問題负间；
小程序的優(yōu)勢是把大部分兼容都做了，使用流暢姜凄，可以調(diào)用部分硬件的能力政溃；缺點是給了你一個籠子，你想干嘛都得遵守它的規(guī)矩态秧，最最重要的董虱，是對性能要求十分嚴苛，如長列表渲染圖片/視頻很容易就引起小程序的崩潰申鱼，雖然他們也有相關對性能優(yōu)化方案愤诱，但你不知道的時候會發(fā)現(xiàn)開發(fā)過程十分痛苦，找各種替代方案捐友，最終內(nèi)嵌h5就是其中一種淫半。
程序員就這樣，一邊踩坑匣砖，一邊造坑吧～～
