uniapp 电商小程序嵌入H5页面提示 “页面iframe不支持引用非业务域名”

红太狼 2021-07-25 18:05 976阅读 0赞

## 小程序嵌入H5页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
uniapp 官网提供的示例：

<template>
        <view>
            <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
        </view>
    </template>
    
    <script>
        export default { 
            data() { 
                return { 
                    webviewStyles: { 
                        progress: { 
                            color: '#FF3333'
                        }
                    }
                }
            }
        }
    </script>

但是在IOS苹果手机上使用时，提示如下的内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]  
这个报错的原因是，我在h5页面中使用到了"https//api.map.baidu.com"，这个被IOS识别为非业务域名，解决方法就是将此域名添加到微信小程序的白名单域名中。

打开微信小程序后台，在开发中，进入到设置request域名的部分，添加上上图所展示的域名，修改域名后需要重新提交小程序审核，审核通过后就可以正常使用了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/507474ac4eba46b8aeaf917eec01684e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/58b9b7896e504533b78bab2d03339598.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/738c036f714141daab8e9d72f54ce15e.png