小程序模板网

微信小程序:新组件web-view详解(2017.11.02新增)

一开始听到微信小程序除组件的时候,都以为可以跳转任何网页,但其实还是有很多限制的,在别人提出在小程序中跳转网页的需求时,需要特别注意下面几点: ...

 
 
 

						

使用前需要注意的点

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

使用

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

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

这样就行了,不用做其他事情。

页面跳转

例如网页里一个按钮点击后跳转到微信小程序 /pages/test/test 页面:

<!-- html -->
<!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 class="my_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和相关框架弄的一个简单页面,表现还是不错的:

相关接口

支持

  • 基础库 1.6.4 开始支持

参考

web-view官方文档

官方论坛

[web-view]问题汇总



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24045.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询