小程序不能设置referer? web-view 与 H5 通信曲线救国小程序需要调用一个三方的接口，但三方并没有开放此

问题产生的场景

小程序需要调用一个三方的接口，但三方并没有开放此接口，接口设置了 referer 限制和同一 IP 访问频率限制。
分析面临两个问题：

小程序不能修改设置 referer。
服务端不能代理，即使代理，得处理固定IP的问题。

调研了一下服务端伪造动态 IP，原谅我，技术上的寡陋导致时间成本不可预测～ =.=! 。

曲线救国

对于小程序不能设置 referer ,叹气的同时又表示赞同，能不能有个三方的媒介来替我取一下数据，查着文档看到了 web-view 与 H5通信，然后试了一下。

整体思路：
小程序内 web-view 组件设置好回调方法并打开h5 >>> h5页面接收参数发起请求并发起回调队列 >>> 小程序触发回调并对回调的数据进行处理（触发回调的机制很重要）

第一步：配置授权的业务域名

web-view 可引入的网页必须要在公众后台配置

第二步：小程序 web-view 组件引入 h5

页面:

<view class="page">
  <view>测试</view>
  <view class="page-section page-section-gap">
    <web-view wx:if="{{show}}" bindmessage="bindmessage" bindload="bindload" src="https://****/test/test1.html"></web-view>
  </view>
</view>

js:

bindmessage(e) {
    console.log(e)
},
bindload(e) {
    console.log(e)
},
binderror(e) {
    console.log(e)
},

注意：这个是回调还不完善，下文会详解。

第三步：h5页面处理

<body>
    <div id="test">123</div>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
    window.onload = function () {
        var data = { data: 'foo' } // 通过h5获取的三方数据
        wx.miniProgram.postMessage(data); // 添加 postMessage 回调
        var a = document.getElementById('test'); 
        a.onclick = function() {
            console.log(111)
            wx.miniProgram.navigateTo({url: '/pages/a/index'}) // 从 h5 跳转小程序其他页面
        }
    }
    
</script>

刚开始看完文档我想着，就这？？应该没什么问题，我以为 h5 页面加载完之后触发小程序 bindmessage 回调就行了，我以为，我以为...～就不会有这篇文档了。

第四步：小程序触发回调

官方文档说明：

⚠️小程序后退、组件销毁、分享才会触发回调！

我先用组件销毁机制尝试一下：

js:

data: {
    show: true,
    timer: null

},
onShow: function () {
    this.timer = setTimeout(() => {
        this.setData({
            show: false
       })
    }, 2000)
},

效果如下：

小程序进入页面 2s 后，把组件销毁，触发了回调机制，拿到了 h5 返回的数据，哈哈，开心。

小程序不能设置referer? web-view 与 H5 通信曲线救国

相关文档