微信小程序开发之：新组件web-view详解-职坐标

微信小程序开发之：新组件web-view详解

凌雪 2018-08-24 来源：网络阅读 1682 评论 0

摘要：本文将带你了解微信小程序开发之：新组件web-view详解，希望本文对大家学微信有所帮助

本文将带你了解微信小程序开发之：新组件web-view详解，希望本文对大家学微信有所帮助

<web-view />

使用前需要注意的点
一开始听到微信小程序除<web-view />组件的时候，都以为可以跳转任何网页，但其实还是有很多限制的，在别人提出在小程序中跳转网页的需求时，需要特别注意下面几点：

需要在小程序管理页面设置-开发设置里添加要跳转网页的域名为
业务域名。
跳转域名需要支持 HTTPS 。
添加跳转域名时，需要下载校验文件并放到域名根目录下，并保证可以访问该文件。（所以不要以为想跳什么网站就跳什么网站，这个是需要对应域名服务器做配合的）

业务域名列表

配置业务域名

使用
使用是很简单的，但是有时候开发工具里显示不出来，可以试试真机测试。


<web-view src="https://mp.weixin.qq.com/"></web-view>

这样就行了，不用做其他事情。
页面跳转
例如网页里一个按钮点击后跳转到微信小程序 /pages/test/test 页面：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
        <style>
            .my_div {
                margin:0 auto;
                width:200px;
                height:200px;
                background:#aaa;
            }
        </style>
    </head>
    <body>
        <div onclick="goto()"></div>
    </body>
</html>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script type="text/javascript">
function goto(){
    wx.miniProgram.navigateTo({url: '/pages/test/test'})
}
</script>

这个是我用vue和相关框架弄的一个简单页面，表现还是不错的：