關於微信小程序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之類的操做。
一些可能的問題問題彙總

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。