關于(yú)微信小程序webview的(de)使用

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：52

小程序

微信小程序是(shì)一種全新的(de)連接用戶與服務的(de)方式，它可以(yǐ)在(zài)微信内被便捷地(dì / de)獲取和(hé / huò)傳播，同時(shí)具有出(chū)色的(de)使用體驗。同時(shí)提供一系列工具幫助開發者快速接入并完成小程序開發。關于(yú)如何注冊配置就(jiù)不(bù)多言了(le／liǎo)，本文主要(yào / yāo)還是(shì)體驗了(le／liǎo)下web-view的(de)功能。

web-view詳解

有了(le／liǎo)這(zhè)個(gè)組件之(zhī)後，小程序可以(yǐ)很好的(de)嵌入一些頁面，可以(yǐ)環境小程序size告急的(de)問題，同樣也(yě)使開發更加便捷，畢竟小程序開發者基本都對前端開發較爲(wéi / wèi)了(le／liǎo)解。

web-view能力

說(shuō)再多還是(shì)需要(yào / yāo)去看官方文檔，web-view文檔,

兼容

首先就(jiù)需要(yào / yāo)注意：兼容問題，版本庫和(hé / huò)對應版本比例

基礎庫 1.6.4 開始支持，低版本需做兼容處理，
個(gè)人(rén)類型與海外類型的(de)小程序暫不(bù)支持使用。

目前而(ér)言，基本80%的(de)用戶會升級微信，所以(yǐ)其實不(bù)必擔心版本問題，官方截止2017-12-01提供的(de)數據也(yě)說(shuō)明88%的(de)用戶支持web-view。

使用

web-view 組件是(shì)一個(gè)可以(yǐ)用來(lái)承載網頁的(de)容器，會自動鋪滿整個(gè)小程序頁面；

屬性：src 是(shì)String類型，是(shì)一個(gè)網站的(de)url，默認值是(shì)none，webview 指向網頁的(de)鏈接。需登錄小程序管理後台配置域名白名單。



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

可以(yǐ)配合Page實例的(de)onLoad方法來(lái)獲取url的(de)具體值，也(yě)就(jiù)是(shì)一個(gè)微信小程序頁面中隻有一個(gè)web-view，但是(shì)這(zhè)個(gè)web-view的(de)内容可以(yǐ)根據上(shàng)一個(gè)頁面傳遞的(de)參數來(lái)獲取頁面URL，後面會講如何實踐，

官方提供如下接口：

web-view和(hé / huò)小程序的(de)通信

1. 由小程序到(dào)`web-view`,其實本質上(shàng)`WEB-VIEW`也(yě)是(shì)小程序的(de)一個(gè)頁面，所以(yǐ)小程序到(dào)`web-view`是(shì)正常的(de)小程序間的(de)通信，通過`wx.navigateTo`、`wx.redirectTo`，帶上(shàng)`url`參數,`query`參數就(jiù)像正常`url`的(de)參數一樣跟着後面，然後在(zài)`web-view`的(de)頁面的(de)`Page`實例裏面通過`onLoad`的(de)方法的(de)參數來(lái)獲取`url`的(de)值，設置給`web-view`的(de)`src`屬性爲(wéi / wèi)改值即可。
2. 由`web-view`到(dào)小程序，由于(yú)在(zài)`web-view`的(de)跳轉通常是(shì)在(zài)`src`對應的(de)網頁中的(de)操作來(lái)處理的(de)，所以(yǐ)需要(yào / yāo)結合`jssdk`來(lái)處理，不(bù)需要(yào / yāo)`wx.config`配置，直接通過`script`标簽來(lái)引入`https://res.wx.qq.com/open/js/jweixin-1.3.0.js`，就(jiù)可以(yǐ)使用`wx.miniProgram.navigateTo`、`wx.miniProgram.navigateBack`、`wx.miniProgram.switchTab`、`wx.miniProgram.reLaunch`、`wx.miniProgram.redirectTo`接口，就(jiù)像小程序之(zhī)間的(de)跳轉一樣，單是(shì)隻能在(zài)當前小程序頁面内跳轉。

支持以(yǐ)下部分JSSDK接口圖像、音頻、搖一搖、地(dì / de)理位置等信息，具體可以(yǐ)查看web-view文檔,不(bù)過這(zhè)些需要(yào / yāo)通過wx.config來(lái)授權，就(jiù)和(hé / huò)服務号開發類似。
用戶分享時(shí)可獲取當前的(de)URL，即在(zài)onShareAppMessage回調中返回webViewUrl參數。
```
Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})
```
在(zài)網頁内可通過window.__wxjs_environment變量判斷是(shì)否在(zài)小程序環境。
```
// web-view下的(de)頁面内
console.log(window.__wxjs_environment === 'miniprogram') // true
```

web-view實踐

在(zài)目前實踐了(le／liǎo)部分web-view的(de)功能，

//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>

在(zài)這(zhè)個(gè)web-view中，指向的(de)就(jiù)是(shì)https://test.com的(de)内容，所以(yǐ)在(zài)在(zài)https://test.com中跳轉出(chū)回到(dào)小程序，需要(yào / yāo)修改https://test.com中的(de)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="../static/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>

如果需要(yào / yāo)使用一些其他(tā)的(de)的(de)jssdk的(de)方法，那就(jiù)需要(yào / yāo)參照公衆号的(de)開發配置了(le／liǎo)。

web-view采坑

由于(yú)很多使用中的(de)一些問題

1.打開的(de)域名沒有在(zài)小程序管理後台設置業務域名（注意是(shì)業務域名，不(bù)是(shì)服務器域名）
2.打開的(de)頁面必須爲(wéi / wèi)https服務
3.打開的(de)頁面302過去的(de)地(dì / de)址也(yě)必須設置過業務域名
4.web-view空白問題，請升級微信客戶端到(dào) 6.5.16
5.頁面可以(yǐ)包含iframe，但是(shì)iframe的(de)地(dì / de)址必須爲(wéi / wèi)業務域名
6.web-view不(bù)支持支付能力，web-view的(de)API能力見web-view的(de)文檔說(shuō)明
7.開發者自己檢查自己的(de)https服務是(shì)否正常，測試方法：普通浏覽器打開對應的(de)地(dì / de)址
8.如果web-view使用了(le／liǎo)公衆号授權的(de)服務，開發者工具提示網頁開發者的(de)問題，請見：公衆号開發
其他(tā)的(de)問題注意：

每個(gè)頁面隻能有一個(gè)，會自動鋪滿整個(gè)頁面，并覆蓋其他(tā)組件，小程序對webview的(de)監控狀态基本沒有，隻能設置src設置url。
關于(yú)小程序和(hé / huò)web-view的(de)通信， → 小程序隻能通過JSSDK 1.3.0提供的(de)接口返回小程序頁面，設置參數來(lái)傳值，反之(zhī)，小程序到(dào)webview也(yě)是(shì)一樣的(de)，隻能是(shì)src的(de)路徑帶上(shàng)參數；
web-view不(bù)支持支付能力,是(shì)指無法喚起小程序的(de)直接支付窗口，對于(yú)h5的(de)那套支付應該是(shì)支持的(de)，但是(shì)web-view 裏邊沒法使用微信支付的(de) JSAPI，也(yě)就(jiù)是(shì)可能可以(yǐ)h5的(de)相關的(de)的(de)支付中心來(lái)支付；
關于(yú)層級，在(zài)webview中可以(yǐ)無限跳轉，對于(yú)導航條返回和(hé / huò)物理鍵返回都會回到(dào)上(shàng)一個(gè)頁面直到(dào)退出(chū)webview，就(jiù)像history.back。
webview中的(de)html的(de)title會自動放到(dào)小程序的(de)頭部作爲(wéi / wèi)标題；
webview中可以(yǐ)正常使用ajax之(zhī)類的(de)操作。
一些可能的(de)問題問題彙總