关于微信小程序webview的使用

时间 2019-11-05

标签关于微信程序 webview 使用繁體版

原文原文链接

小程序

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

web-view详解

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

web-view能力

说再多仍是须要去看官方文档，web-view文档,前端

兼容

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

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

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

使用

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

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

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<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来受权，就和服务号开发相似。
用户分享时可获取当前<web-view/>的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
<web-view src="{{url}}"></web-view>

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

<!DOCTYPE html>
<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>test</title>
    <link rel="stylesheet" href="https://test.com/index.css" />
</head>
<body>
    <div class="app">
        <h1>webview-wechat-detail</h1>
        <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使用了公众号受权的服务，开发者工具提示网页开发者的问题，请见：公众号开发
其余的问题注意：

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