微信小程序之内嵌网页(webview)

作者: 一斤代码 | 来源:发表于2017-11-03 10:21 被阅读12910次

    微信小程序提供了新的开放能力!它终于开放了在小程序中内嵌HTML页面的功能!从微信小程序基础库1.6.4开始,我们就可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。在这之前,我们在小程序中没有办法整合我们已有的HTML程序(比如HTML5文章系统,商城系统等),只能使用小程序的方式重新开发一套,现在有了<web-view>就可以方便的集成这些网页系统,为我们减少了可观的工作量。

    下面我们来看一下具体如何使用。

    设置权限

    要在小程序中访问外部网页,需要先设置允许访问的业务网站的域名。让我们先登录小程序平台管理后台页面,进入“设置” => "开发设置",可以看到这边多出来了一块“业务域名”的设置区域:

    点击“开始配置”按钮,弹出一个窗口,我们可以在这个窗口中添加一个或多个你要在小程序中访问的域名。当然,不是所有的域名下的网页你的小程序都可以访问,只有那些你可以“掌控”的网站,你才可以访问!你需要在这个窗口里下载“校验文件”,并把这个校验文件上传到你的网站的根目录,供小程序平台进行验证,验证通过了才能成功添加域名。

    使用web-view组件显示HTML页面

    <web-view>组件的使用就比较简单了,类似HTML里面的<iframe>标签:

    <web-view src="https://www.xxxxxxxxx.com/index.html" />
    

    就这样,HTML页面就可以在小程序中显示了。

    但是,和<iframe>可以嵌入到页面的任意部分不同的是,小程序的这个<web-view>总是自动铺满整个页面,且每个页面只能有一个<web-view>,它会覆盖其他组件。也就是说,没有办法实现小程序界面组件和<web-view>页面混排的情况,这点要注意。

    在内嵌的HTML页面中跳转回小程序

    如果要在已经通过<web-view>嵌入小程序的网页中,跳转到小程序中的其他页面(Page),可以引入微信的一个JSSDK,使用它提供的方法来实现相关跳转功能。网页代码类似如下所示:

    <!-- html代码中引入JS SDK -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
    
    <script>
    // 跳转到小程序的一个页面
    wx.miniProgram.navigateTo({url: '/path/to/page'})
    </script>
    

    (不过很遗憾,还是没有办法从一个网页中跳转到一个指定的小程序。哈哈,我也就瞎想想~~)

    总结

    这一内嵌网页的功能,也算顺应了广大开发者的要求,解决了很大一部分开发者的痛点。在混合开发方面的增强,为小程序的功能开发提供了不少灵活性和便利性。

    相关文章

      网友评论

      • hello_water:(不过很遗憾,还是没有办法从一个网页中跳转到一个指定的小程序。哈哈,我也就瞎想想~~)-------可以从内嵌的网页中跳回原小程序。
        是否可以从内嵌的网页跳到另一个关联在同一公众号下的小程序--待验证
      • gwbjx123:请问,有图片和文字一起上传的表单,怎么处理呢?
      • befd95d27408:我想请教一下在web-view直接可以调起支付的页面 由web-view完成支付 支付完成后跳到小程序 可以实现吗 还是只能用小程序调起支付的方式
        一斤代码:web-view里现在不能直接呼出小程序的支付方式,这种情况下,web-view里的页面需要用web的支持API来进行支付。支付完成后,是可以调用相应API返回小程序页面的(比如用wx.miniProgram.navigateTo)
      • 麟姑娘你不要追:c g ge r y r 2
      • 在_远_方:hi 有个问题请教下,我想在被嵌入到web-view的页面拿到用户信息,比如openid,
        wx.miniProgram.userInfo(function(info){
        });
        这样貌似拿不到,有什么好方法么?:relaxed:
        在_远_方:hi 这样直接传递sessionid,会不会不太安全呀?
        一斤代码:一般都会通过服务器端来获取这类详细信息,可以通过url参的方式将sessionid传给web-view中的页面,然后页面通过sessionid再调用后台的接口,调取用户详情数据。
      • 8edac8073b43:有没有人遇到过设置了高度100%的网页不能铺满整个小程序页面,底下会有一些空白
      • 5a527c7e5ff8:请问可以在web-view里面获取当前页面的url吗?
        一斤代码:@ArgenBarbie 哦,试了一些方法,都不可行。感觉暂时没其他方式可以拿到。如果你找到方法了,请不吝赐教一下哦:)
        5a527c7e5ff8:@一斤代码 web-view里网页的url。我看腾讯的文档,貌似只有在用户分享给好友之后能在回调函数里面拿到url,想问有其他方法吗?
        一斤代码:是获取web-view里网页的url?还是小程序Page的url?
      • 金逸凌云:大神,进webview的时候从onload方法的options中去到了一些参数,拼接了一个src给webview.
        代码大致是这样的:
        data中
        "websrc": "https://myurl?u="; + options.url + "&b=" + options.b + "&c=" + Number(options.c)
        页面中
        <web-view id="webview" src="{{websrc}}"></web-view>
        现在想做的是右上角分享出去,再从微信里可以点击进来,参数该怎么传,和之前的分享一样吗,看文档里有在onShareAppMessage回调中返回webViewUrl参数。不太理解是什么意思
        金逸凌云:@一斤代码 好的,那也就是和普通的页面一样啦
        一斤代码:在onShareAppMessage里面的return的那个对象里,将path里的值设置成你这个web-view所在的小程序page路径,并且带上你的那些参数比如:

        {
        path: '/pages/your/page?url=xxxxx&b=123&c=456'
        }
      • 开小飞:哎,不能混排很尴尬啊。。。
        一斤代码:@金逸凌云 你的这个需求,可以使用文档中这个部分的API来实现:https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

        尤其是其中的“接口B”。
        金逸凌云:大神,我想请教下,能否生成一个二维码,从外部扫描后可以直接跳转到小程序的某个详情页面,看了一下官方的子路由匹配啥的,没太明白,先谢过啦

      本文标题:微信小程序之内嵌网页(webview)

      本文链接:https://www.haomeiwen.com/subject/ifizpxtx.html