微信小程序如何打开网页

在微信小程序中打开网页需要满足两个条件：

    1、在小程序管理后台设置跳转的域名为业务域名，注意这个域名必须是https协议的；

    2、需要下载一个校验文件放置跳转域名的服务器根目录下，也就是讲这个跳转域名的服务器你必须有上传文件权限。

 

注意事项：

    1、跳转这个链接只能是在当前小程序中，用web-view组件来打开，而不是新开一个浏览器去访问url。

    2、web-view组件是用于承载网页的容器，会自动铺满整个小程页面。

    3、个人类型的小程序暂时不支持使用。可打开关联的公众号的文章。

    4、如果打开的网页的src链接是当前小程序关联公众号的文章，可不用配置业务域名和校验文件就可以直接打开了。

 

 

使用场景：

比如我是SMG小程序，是否能做个链接到百度首页？

不可以，因为就算借助web-view组件，跳转的域名有个条件是下载一个校验文件放置跳转域名的服务器根目录下，测试版可以看看效果，但是现实真机操作中，SMG是无法获取百度服务器的FTP文件上传或下载权限的，所以是实现不了，然而大部分应用场景都是跳转到自家产品的url。

 

微信开发者工具：

为了帮助开发者简单和高效地开发和调试微信小程序，微信团队推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

由于微信小程序打开外部网页需要配置业务域名和在目标服务器中放置校校验文件才能打开，但是我们在开发过程中 或 在测试过程中没有进行配置，而又想看一下打开外部网页的效果怎么办？

此时，我们可在微信开发者工具中进行相应的设置，然后生成预览，就可以在手机上查看了，但是：请记住这只是用于测试，如果发布到正式环境，这个就不行了哦，所以最好还是配置业务域名和校验文件。

具体设置如下：

1、打开微信开发者工具，选择设置菜单中的 项目设置。

2、在右侧的本地设置中 钩上 不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书。

 

实例代码：

// wxml文件

<web-view src="https://www.baidu.com" bindload="bindload" binderror="binderror"></web-view>

// js文件

// 网页加载成功时候触发此事件
bindload(res) {
  
    console.log(res, res.detail)
},


// 网页加载失败的时候触发此事件
binderror(err) {

     console.log(err, err.detail)
}