關(guān)于微信小程序webview的使用

發(fā)表時間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：52

小程序

微信小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時具有出色的使用體驗。同時提供一系列工具幫助開發(fā)者快速接入并完成小程序開發(fā)。關(guān)于如何注冊配置就不多言了，本文主要還是體驗了下web-view的功能。

web-view詳解

有了這個組件之后，小程序可以很好的嵌入一些頁面，可以環(huán)境小程序size告急的問題，同樣也使開發(fā)更加便捷，畢竟小程序開發(fā)者基本都對前端開發(fā)較為了解。

web-view能力

說再多還是需要去看官方文檔，web-view文檔,

兼容

首先就需要注意：兼容問題，版本庫和對應(yīng)版本比例

基礎(chǔ)庫 1.6.4 開始支持，低版本需做兼容處理，
個人類型與海外類型的小程序暫不支持使用。

目前而言，基本80%的用戶會升級微信，所以其實不必?fù)?dān)心版本問題，官方截止2017-12-01提供的數(shù)據(jù)也說明88%的用戶支持web-view。

使用

web-view 組件是一個可以用來承載網(wǎng)頁的容器，會自動鋪滿整個小程序頁面；

屬性：src 是String類型，是一個網(wǎng)站的url，默認(rèn)值是none，webview 指向網(wǎng)頁的鏈接。需登錄小程序管理后臺配置域名白名單。



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

可以配合Page實例的onLoad方法來獲取url的具體值，也就是一個微信小程序頁面中只有一個web-view，但是這個web-view的內(nèi)容可以根據(jù)上一個頁面?zhèn)鬟f的參數(shù)來獲取頁面URL，后面會講如何實踐，

官方提供如下接口：

web-view和小程序的通信

1. 由小程序到`web-view`,其實本質(zhì)上`WEB-VIEW`也是小程序的一個頁面，所以小程序到`web-view`是正常的小程序間的通信，通過`wx.navigateTo`、`wx.redirectTo`，帶上`url`參數(shù),`query`參數(shù)就像正常`url`的參數(shù)一樣跟著后面，然后在`web-view`的頁面的`Page`實例里面通過`onLoad`的方法的參數(shù)來獲取`url`的值，設(shè)置給`web-view`的`src`屬性為改值即可。
2. 由`web-view`到小程序，由于在`web-view`的跳轉(zhuǎn)通常是在`src`對應(yīng)的網(wǎng)頁中的操作來處理的，所以需要結(jié)合`jssdk`來處理，不需要`wx.config`配置，直接通過`script`標(biāo)簽來引入`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`接口，就像小程序之間的跳轉(zhuǎn)一樣，單是只能在當(dāng)前小程序頁面內(nèi)跳轉(zhuǎn)。

支持以下部分JSSDK接口圖像、音頻、搖一搖、地理位置等信息，具體可以查看web-view文檔,不過這些需要通過wx.config來授權(quán)，就和服務(wù)號開發(fā)類似。
用戶分享時可獲取當(dāng)前的URL，即在onShareAppMessage回調(diào)中返回webViewUrl參數(shù)。
```
Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})
```
在網(wǎng)頁內(nèi)可通過window.__wxjs_environment變量判斷是否在小程序環(huán)境。
```
// web-view下的頁面內(nèi)
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的內(nèi)容，所以在在https://test.com中跳轉(zhuǎn)出回到小程序，需要修改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的方法，那就需要參照公眾號的開發(fā)配置了。

web-view采坑

由于很多使用中的一些問題

1.打開的域名沒有在小程序管理后臺設(shè)置業(yè)務(wù)域名（注意是業(yè)務(wù)域名，不是服務(wù)器域名）
2.打開的頁面必須為https服務(wù)
3.打開的頁面302過去的地址也必須設(shè)置過業(yè)務(wù)域名
4.web-view空白問題，請升級微信客戶端到 6.5.16
5.頁面可以包含iframe，但是iframe的地址必須為業(yè)務(wù)域名
6.web-view不支持支付能力，web-view的API能力見web-view的文檔說明
7.開發(fā)者自己檢查自己的https服務(wù)是否正常，測試方法：普通瀏覽器打開對應(yīng)的地址
8.如果web-view使用了公眾號授權(quán)的服務(wù)，開發(fā)者工具提示網(wǎng)頁開發(fā)者的問題，請見：公眾號開發(fā)
其他的問題注意：

每個頁面只能有一個，會自動鋪滿整個頁面，并覆蓋其他組件，小程序?qū)ebview的監(jiān)控狀態(tài)基本沒有，只能設(shè)置src設(shè)置url。
關(guān)于小程序和web-view的通信， → 小程序只能通過JSSDK 1.3.0提供的接口返回小程序頁面，設(shè)置參數(shù)來傳值，反之，小程序到webview也是一樣的，只能是src的路徑帶上參數(shù)；
web-view不支持支付能力,是指無法喚起小程序的直接支付窗口，對于h5的那套支付應(yīng)該是支持的，但是web-view 里邊沒法使用微信支付的 JSAPI，也就是可能可以h5的相關(guān)的的支付中心來支付；
關(guān)于層級，在webview中可以無限跳轉(zhuǎn)，對于導(dǎo)航條返回和物理鍵返回都會回到上一個頁面直到退出webview，就像history.back。
webview中的html的title會自動放到小程序的頭部作為標(biāo)題；
webview中可以正常使用ajax之類的操作。
一些可能的問題問題匯總