关于微信小程序webview的使用

小程序微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还 …

小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下web-view的功能。

web-view详解

有了这个组件之后，小程序可以很好的嵌入一些页面，可以环境小程序size告急的问题，同样也使开发更加便捷，毕竟小程序开发者基本都对前端开发较为了解。

web-view能力

说再多还是需要去看官方文档，web-view文档,

兼容

首先就需要注意：兼容问题，版本库和对应版本比例

基础库 1.6.4 开始支持，低版本需做兼容处理，
个人类型与海外类型的小程序暂不支持使用。

目前而言，基本80%的用户会升级微信，所以其实不必担心版本问题，官方截止2017-12-01提供的数据也说明88%的用户支持web-view。

使用

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面；

属性：src 是String类型，是一个网站的url，默认值是none，webview 指向网页的链接。需登录小程序管理后台配置域名白名单。



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

可以配合Page实例的onLoad方法来获取url的具体值，也就是一个微信小程序页面中只有一个web-view，但是这个web-view的内容可以根据上一个页面传递的参数来获取页面URL，后面会讲如何实践，

官方提供如下接口：

web-view和小程序的通信

1. 由小程序到`web-view`,其实本质上`WEB-VIEW`也是小程序的一个页面，所以小程序到`web-view`是正常的小程序间的通信，通过`wx.navigateTo`、`wx.redirectTo`，带上`url`参数,`query`参数就像正常`url`的参数一样跟着后面，然后在`web-view`的页面的`Page`实例里面通过`onLoad`的方法的参数来获取`url`的值，设置给`web-view`的`src`属性为改值即可。
2. 由`web-view`到小程序，由于在`web-view`的跳转通常是在`src`对应的网页中的操作来处理的，所以需要结合`jssdk`来处理，不需要`wx.config`配置，直接通过`script`标签来引入`https://res.wx.qq.com/open/js/jweixin-1.3.0.js`，就可以使用`wx.miniProgram.navigateTo`、`wx.miniProgram.navigateBack`、`wx.miniProgram.switchTab`、`wx.miniProgram.reLaunch`、`wx.miniProgram.redirectTo`接口，就像小程序之间的跳转一样，单是只能在当前小程序页面内跳转。

支持以下部分JSSDK接口图像、音频、摇一摇、地理位置等信息，具体可以查看web-view文档,不过这些需要通过wx.config来授权，就和服务号开发类似。
用户分享时可获取当前的URL，即在onShareAppMessage回调中返回webViewUrl参数。
```
Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})
```

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。

// web-view下的页面内
console.log(window.__wxjs_environment === 'miniprogram') // true

web-view实践

在目前实践了部分web-view的功能，

//index.js
Page({
    data: {
       url: 'https://test.com'
    },
    onLoad: function(options){
        options.url ? this.setData({url: options.url}) : wx.navigateBack({delta: 2});

    }
});

//index.wxml

    
     "{{url}}">
     web-view>

在这个web-view中，指向的就是https://test.com的内容，所以在在https://test.com中跳转出回到小程序，需要修改https://test.com中的JavaScript,


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>testtitle>
    <link rel="stylesheet" href="https://test.com/index.css" />
head>
<body>
    <div class="app">
        <h1>webview-wechat-detailh1>
        <p>
            detail
        p>
        <button type="button" id="btn">返回小程序button>
    div>
    <script src="https://test.com/jquery.js">script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js">script>
    <script> /* eslint-disable */ $(function(){ doucument.cookie = 'bb=bbbbbb'; $('#btn').on('click',function(s) { document.cookie = 'aa=ssssss'; wx.miniProgram.navigateTo({ url:'/pages/index?test=testtest', success: function(){ console.log('success') }, fail: function(){ console.log('fail'); }, complete:function(){ console.log('complete'); } }); }); }); script>
body>
html>

如果需要使用一些其他的的jssdk的方法，那就需要参照公众号的开发配置了。

web-view采坑

由于很多使用中的一些问题

1.打开的域名没有在小程序管理后台设置业务域名（注意是业务域名，不是服务器域名）
2.打开的页面必须为https服务
3.打开的页面302过去的地址也必须设置过业务域名
4.web-view空白问题，请升级微信客户端到 6.5.16
5.页面可以包含iframe，但是iframe的地址必须为业务域名
6.web-view不支持支付能力，web-view的API能力见web-view的文档说明
7.开发者自己检查自己的https服务是否正常，测试方法：普通浏览器打开对应的地址
8.如果web-view使用了公众号授权的服务，开发者工具提示网页开发者的问题，请见：公众号开发
其他的问题注意：

每个页面只能有一个，会自动铺满整个页面，并覆盖其他组件，小程序对webview的监控状态基本没有，只能设置src设置url。
关于小程序和web-view的通信， → 小程序只能通过JSSDK 1.3.0提供的接口返回小程序页面，设置参数来传值，反之，小程序到webview也是一样的，只能是src的路径带上参数；
web-view不支持支付能力,是指无法唤起小程序的直接支付窗口，对于h5的那套支付应该是支持的，但是web-view 里边没法使用微信支付的 JSAPI，也就是可能可以h5的相关的的支付中心来支付；
关于层级，在webview中可以无限跳转，对于导航条返回和物理键返回都会回到上一个页面直到退出webview，就像history.back。
webview中的html的title会自动放到小程序的头部作为标题；
webview中可以正常使用ajax之类的操作。
一些可能的问题问题汇总

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 关于微信小程序webview的使用