關于微(wēi)信小(xiǎo)程序webview的(de)使用(yòng)

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

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：55

小(xiǎo)程序

微(wēi)信小(xiǎo)程序是(shì)一(yī)種全新的(de)連接用(yò ₹§ ng)戶與服務的(de)方式，它可(kě)以在微(wēi)信內(nèi)被便捷地(dì)獲取和≈♦•α(hé)傳播，同時(shí)具有(yǒu)出色的(de)使用(yòng)體(tǐ γ)驗。同時(shí)提供一(yī)系列工(gōng)具幫助開(kāi)發者快®€✘‌(kuài)速接入并完成小(xiǎo)程序開(kāi)發。關于如(rú)何注冊配置就(j££iù)不(bù)多(duō)言了(le)，本文(wén)主要(yào)還(hái)是€✔(shì)體(tǐ)驗了(le)下(xià)web-view的(de)功能(néng)。

web-view詳解

有(yǒu)了(le)這(zhè)個(gè)組件(ji€¥"©àn)之後，小(xiǎo)程序可(kě)以很(hěn)好(hǎo)的(de)嵌入一(yī)些♣±(xiē)頁面，可(kě)以環境小(xiǎo)程序size告急的(de)問(wèn)題，同樣也(yě)使開(kāi)發更加便捷，畢竟小(xσ₽iǎo)程序開(kāi)發者基本都(dōu)對(duì)前端開§¶☆(kāi)發較為(wèi)了(le)解。

web-view能(néng)力

說(shuō)再多(duō)還(hái)是(shì)需要(yào)去(qù)看(kàn)官方文ε∑(wén)檔，web-view文(wén)檔,

兼容

首先就(jiù)需要(yào)注意：兼容問(wèn)題，版本庫和(hé)對(du≤↕ì)應版本比例

基礎庫 1.6.4 開(kāi)始支持，低(dī)版本需做(zuò)兼容處理§δ&(lǐ)，
個(gè)人(rén)類型與海(hǎi)外(wài)類型的(de)小(xiǎo)程序暫不(€αΩbù)支持使用(yòng)。

目前而言，基本80%的(de)用(yòng)戶會(huì)升級微(wēi)信，所以其實不(bù)必擔心版本問(wènγ≤Ω)題，官方截止2017-12-01提供的(de)數(shù)據也(yě)說(shuō)明(míng)88%的(de)用(yòng)戶支持web-view。

使用(yòng)

web-view 組件(jiàn)是(shì)一(yī)個(gè)可(kě©σ¥ )以用(yòng)來(lái)承載網頁的(de)容器(qì)，會©φ(huì)自(zì)動鋪滿整個(gè)小(xiǎo)程序頁®<→¶面；

屬性：src 是(shì)String類型，是(shì)一(yī)個(gè)網站(zhàn)的(de)url，默認值是(shì)none，webview 指向網頁的(de)鏈接。需登錄小(xiǎo)程序管理(lǐ)後台配置域名白(bπ÷≠¥ái)名單。



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

可(kě)以配合Page實例的(de)onLoad方法來(lái)獲取url的(de)具體(tǐ)值，也(yě)就(jiù)是(sh•ì)一(yī)個(gè)微(wēi)信小(xiǎo)程序頁面中隻有(y&¥Ω©ǒu)一(yī)個(gè)web-view，但(dàn)是(shì)這(zhè)個(gè)web-view的(de)內(nèi)容可(kě)以根據上(shàng₹↓)一(yī)個(gè)頁面傳遞的(de)參數(shù)來(lái)獲<"∞§取頁面URL，後面會(huì)講如(rú)何實踐，

官方提供如(rú)下(xià)接口：

web-view和(hé)小(xiǎo)程序的(de)通(tōng)信↕∏→

1. 由小(xiǎo)程序到(dào)`web-view`,其實本質上(shàng)` '←WEB-VIEW`也(yě)是(shì)小(xiǎo)程序的(α≥>de)一(yī)個(gè)頁面，所以小(xiǎo)程序到(dào)`web-view`是(shì∏✔)正常的(de)小(xiǎo)程序間(jiān)的(de)通(tγπ₽ōng)信，通(tōng)過`wx.navigateTo`、`wx.redirecγ>tTo`，帶上(shàng)`url`參數(shù),`query`參數(shù)₽¥☆就(jiù)像正常`url`的(de)參數(shù)一(yī)樣跟著(zhe)後面，然後在‌★€`web-view`的(de)頁面的(de)`Page`實例裡(lǐ)面通(tōng)過↓¶∑`onLoad`的(de)方法的(de)參數(shù)來(lái)獲取`url`的(de££&)值，設置給`web-view`的(de)`src`屬性αγε§為(wèi)改值即可(kě)。
2. 由`web-view`到(dào)小(xiǎo)程序，由于在`web-view`的(de)♥↔跳(tiào)轉通(tōng)常是(shì)在`src`對(duì)應的(de)網頁中的(de)∑←•操作(zuò)來(lái)處理(lǐ)的(de)，所以需要(yào)結合`jssdk`來(lá★'δ&i)處理(lǐ)，不(bù)需要(yào)`wx.config`配置，直接通(tōng)過`s≈→¥•cript`标簽來(lái)引入`https://re‍↕β♠s.wx.qq.com/open/js/jweixin-1.3.0.js`，就(jiù)可(kě)以使用(yòng)`wx.miniProgram.nav∑₽igateTo`、`wx.miniProgram.navigateBack`、`wx.®±"miniProgram.switchTab`、`wx.miniProgram.r∏δ↓×eLaunch`、`wx.miniProgram.redirectTo`接口，就(jiù)像小(↕λ☆xiǎo)程序之間(jiān)的(de)跳(tiào)轉一(yī βφ)樣，單是(shì)隻能(néng)在當前小(xiǎo)程序頁面內(n♥ ↓↑èi)跳(tiào)轉。

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

web-view實踐

在目前實踐了(le)部分(fēn)web-view的(de)功能(néng)，

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

在這(zhè)個(gè)web-view中，指向的(de)就(jiù)是(shì)https://test.com的(de)內(nèi)容，所以在在https://test.com中跳(tiào)轉出回到(dào)小(xiǎ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">返回小(xiǎo)程序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.navigateT§×o({
            url:'/pages/index?test=testtest',
            success: function(){
                console.log('success')
            },
            fail: function(){
                console.log('fail');
            },
            complete:function(){
                console.log('complete');
            }

            });
     ∑≈♥   });
    });
    script>
body>
html>

web-view采坑

由于很(hěn)多(duō)使用(yòng)中的(de)一("¥βyī)些(xiē)問(wèn)題

1.打開(kāi)的(de)域名沒有(yǒu)在小(xiǎo)程序管理(lǐ)後台≈φ↔₩設置業(yè)務域名（注意是(shì)業(yè)務域名，不(bù)是(↑§←shì)服務器(qì)域名）
2.打開(kāi)的(de)頁面必須為(wèi)https服務
3.打開(kāi)的(de)頁面302過去(qù)的(de)地(dì)址也(yě)必須設置過<♠₹σ業(yè)務域名
4.web-view空(kōng)白(bái)問(wèn)題€φ÷$，請(qǐng)升級微(wēi)信客戶端到(dào) 6.5.16
5.頁面可(kě)以包含iframe，但(dàn)是(shì)iframe的(de∞↑ λ)地(dì)址必須為(wèi)業(yè)務域名
6.web-view不(bù)支持支付能(néng)力，web-view↔β↑的(de)API能(néng)力見(jiàn)web-view的(de)文 (wén)檔說(shuō)明(míng)
7.開(kāi)發者自(zì)己檢查自(zì)己的(de)htt↕≤¶₩ps服務是(shì)否正常，測試方法：普通(tōng)浏覽器(qì)打開(kāi)對♠₹σ(duì)應的(de)地(dì)址
8.如(rú)果web-view使用(yòng)了(le)公衆号授權的(de)服務£♣ε，開(kāi)發者工(gōng)具提示網頁開(kāi)發者的(de)問(wèn)≤₹題，請(qǐng)見(jiàn)：公衆号開(kāi)發±"
其他(tā)的(de)問(wèn)題注意：

每個(gè)頁面隻能(néng)有(yǒu)一(yī)個(gè)，會(huì)自(zì)動鋪滿整個(gè)頁面，并覆蓋其他(t✔∞ā)組件(jiàn)，小(xiǎo)程序對(duì)we ≤δ™bview的(de)監控狀态基本沒有(yǒu)，隻能(néng)設置src設置ur♣↕l。
關于小(xiǎo)程序和(hé)web-view的(de)通(tōng)信， → 小(xiǎo)程序隻能(néng)通(tōng)過JSSDK 1.3.0提供&✘£的(de)接口返回小(xiǎo)程序頁面，設置參數(shù)來(lái)傳值，反之，α•β→小(xiǎo)程序到(dào)webview也(yě)是(s×παhì)一(yī)樣的(de)，隻能(néng)是(s↔≈‍hì)src的(de)路(lù)徑帶上(shàng)參數(shù)•φ ↑；
web-view不(bù)支持支付能(néng)力,是(shì)指無法喚起小(xiǎo)程序的(↕ >de)直接支付窗(chuāng)口，對(duì)于h5的(de)那(nà)套支付應該是(s¥λ$≤hì)支持的(de)，但(dàn)是(shì)web-view 裡(lǐ)邊沒££法使用(yòng) 微(wēi)信支付的(de) JSAPI，δ≠↕Ω也(yě)就(jiù)是(shì)可(kě)能(néng)可(kě)以h£•≠€5的(de)相(xiàng)關的(de)的(de)支付α≤中心來(lái)支付；
關于層級，在webview中可(kě)以無限跳(tiào •♠♥)轉，對(duì)于導航條返回和(hé)物(wù)理(lǐ)鍵返回都(dōu)會(huε×☆ì)回到(dào)上(shàng)一(yī)個(gè)頁面直到(dào)退出webv®€★♣iew，就(jiù)像history.back。
webview中可(kě)以正常使用(yòng)ajax之類的(de)操作(zuò)。
一(yī)些(xiē)可(kě)能(néng)的(de₽™•)問(wèn)題問(wèn)題彙總