小程序官方?jīng)]有提供外部H5網(wǎng)頁直接跳轉(zhuǎn)到小程序的api盅藻，所以目前只支持小程序內(nèi)嵌H5敷存，并且只有內(nèi)嵌的H5才能跳回小程序
舉個例子
小程序上需要用web-view包裹
<!-- 地址有時候會需要傳遞參數(shù) ,就先定義一個變量-->
<view class="container">
<web-view src="{{url}}"></web-view>
</view>
//js部分
data: {
type:'',
member_id:'',
org_id:'',
url:'https://www.xxx.com/xxx/xxxx/xxx-1.html'
},
onLoad(options) {
this.setData({
type: options.type,
member_id: options.member_id,
org_id: options.org_id,
})
this.setData({
url:`${this.data.url}?type=${this.data.type}&org_id=${this.data.org_id}&member_id=${this.data.member_id}`
})
},
html
<!-- 首要引用wx開放文件https://res.wx.qq.com/open/js/jweixin-1.3.2.js!!!注意最好download到本地，速度會快些 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
小程序有傳遞參數(shù)過來徘溢，那么htm里面要獲取參數(shù)年叮。這個不是重點瘸洛，不詳細(xì)說明了。
// 官方代碼示例
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
其實里面有很多相關(guān)接口的限制览濒，都差不多是和小程序里面的方法是一樣的呆盖。但功能一般不復(fù)雜時，只涉及頁面的跳轉(zhuǎn)贷笛。
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 官方地址应又，最詳細(xì)！
Bug & Tip
-
tip：網(wǎng)頁內(nèi) iframe 的域名也需要配置到域名白名單乏苦。 -
tip：開發(fā)者工具上株扛，可以在 web-view 組件上通過右鍵 - 調(diào)試，打開 web-view 組件的調(diào)試汇荐。 -
tip：每個頁面只能有一個 web-view洞就，web-view 會自動鋪滿整個頁面，并覆蓋其他組件拢驾。 -
tip：web-view 網(wǎng)頁與小程序之間不支持除 JSSDK 提供的接口之外的通信奖磁。 -
tip：在 iOS 中，若存在JSSDK接口調(diào)用無響應(yīng)的情況繁疤，可在 web-view 的 src 后面加個#wechat_redirect解決咖为。 -
tip：避免在鏈接中帶有中文字符，在 iOS 中會有打開白屏的問題稠腊，建議加一下 encodeURIComponent
