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

一、需求

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

二、方法

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

outer页面

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

web-view标签解析如下:

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

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

在这里插入图片描述

2、其他页面跳转外部链接
handleNav() {
    // outerChain为url链接
    wx.navigateTo({
      url: '../outer/outer?src=' + encodeURIComponent(this.data.outerChain),
    })
}

新页面接收src

onLoad(options) {
   this.setData({src: decodeURIComponent(options.src)})
}
3、注意点

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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值