微信小程序跳转外部链接的详细实现方法

一、需求

在微信小程序中跳转h5页面

二、方法

1、新建页面用来承载网页

如 outer页面

<web-view src="{{src}}"> </web-view>
1

web-view标签解析如下：

作用：承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

注意：客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

2、其他页面跳转外部链接

handleNav() {
    // outerChain为url链接
    wx.navigateTo({
      url: '../outer/outer?src=' + encodeURIComponent(this.data.outerChain),
    })
}
1
2
3
4
5
6

新页面接收src

onLoad(options) {
   this.setData({src: decodeURIComponent(options.src)})
}
1
2
3

3、注意点

（1）在开发跟测试的时候在本地打开不校验合法域名
（2）发布正式版的时候要在小程序管理后台配置业务域名