關於微信小程式webview的使用

caoweiju發表於2017-12-02
微信小程式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 指向網頁的連結。需登入小程式管理後臺配置域名白名單。

<!-- 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使用了公眾號授權的服務，開發者工具提示網頁開發者的問題，請見：公眾號開發
其他的問題注意：

  1. 每個頁面只能有一個<web-view/>，<web-view/>會自動鋪滿整個頁面，並覆蓋其他元件，小程式對webview的監控狀態基本沒有，只能設定src設定url。
  2. 關於小程式和web-view的通訊，<web-view/> → 小程式只能通過JSSDK 1.3.0提供的介面返回小程式頁面，設定引數來傳值，反之，小程式到webview也是一樣的，只能是src的路徑帶上引數；
  3. web-view不支援支付能力,是指無法喚起小程式的直接支付視窗，對於h5的那套支付應該是支援的，但是web-view 裡邊沒法使用 微信支付的 JSAPI，也就是可能可以h5的相關的的支付中心來支付；
  4. 關於層級，在webview中可以無限跳轉，對於導航條返回和物理鍵返回都會回到上一個頁面直到退出webview，就像history.back。
  5. webview中的html的title會自動放到小程式的頭部作為標題；
  6. webview中可以正常使用ajax之類的操作。
  7. 一些可能的問題問題彙總

相關文章