微信小程序web-view组件 打开外部url_遇到微信小程序中组件加载外部url时出现“网络错误无法显示”的问题,可

在测试时需要给swiper组件添加外部链接问题。今天我来说一下怎么解决的？
思路：小程序里没有办法直接给swiper组件添加链接，点击时用api wx.navigateTo实现的。
微信小程序团队推出一个新组件web-view，
可以在这个组件中打开你的html5网页，
而且可以在web-view里面打开网页的a标签，
也就是说可以实现链接跳转。
例如：
wxml 内容

<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
    <block wx:for="{{imgUrls}}" wx:key="{{index}}" >
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="100%" bindtap='loadFuction' id='{{index}}' />
      </swiper-item>
    </block>
</swiper>
1
2
3
4
5
6
7

index.js内容

loadFuction(e) {
    console.log(e);
    let num=e.currentTarget.id;
    if (num==0){
      wx.navigateTo({
        url: '/page/component/out/out', //路径必须跟app.json一致
        success: function () {
            
        },       //成功后的回调；
        fail: function () { },         //失败后的回调；
        complete: function () { } 
      })
    }

  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意：需要配置app.json，不然会报错。

out.wxml内容

<web-view src="https://wap.ysjhacc.com/"></web-view>  //任何链接都可以
1

编译之后会报一下错误：

报错原因：使用<web-view>这个标签需要在小程序管理后台设置业务域名，登录后台后找到设置-开发设置-业务域名，然后把你需要加载的域名添加进去

只要把这个勾上了显示就正常了。
看一下效果：
项目的第一个swiper组件如图：

点击之后：

大家可以动手试试，希望对你们有所帮助。

参考文献：
https://blog.csdn.net/towtotow/article/details/78621845
https://blog.csdn.net/qq_32113629/article/details/79483213
http://www.cnblogs.com/gxsyj/p/9280816.html