概述

網頁與小程序交互和通信需要在小程序里使用 web-view 組件打開網頁，而且被訪問的網頁需要引入微信的 js-sdk，通過 js-sdk 提供的接口來給小程序發(fā)信息。

具體可以參考小程序官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

小程序后臺配置業(yè)務域名

這是小程序開發(fā)的限制，在 web-view 里要打開的網頁的域名要先在微信公眾平臺小程序后臺 開發(fā) --> 開發(fā)設置 --> 業(yè)務域名 里添加一項，否則 web-view 無法打開這個網頁。

PS：不想配置這個的話也可以在 微信開發(fā)者工具 里面開啟 不校驗合法域名。

網頁引入微信js-sdk

微信JS-SDK 是微信提供的基于微信內的網頁開發(fā)工具包。做過微信公眾號網頁開發(fā)的同學應該就知道了（那是出了名的難用……）。

官方文檔鏈接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

怎么引入我就不寫了，同學們按上面的文檔提示操作就好。

想用npm方式引用的話也可以找第三方，我用的是這個 weixin-js-sdk。

網頁向小程序發(fā)送消息

我做了個很簡單的demo頁，演示了導航到小程序頁面和給小程序發(fā)消息的功能。

頁面如下：

1.png

頁面是用 vue 寫的，很簡單，直接上代碼了：

<template>
    <section>
        <section>
            <h2>點擊圖片事件</h2>
            <div @click="onClick">
                <img src="https://via.placeholder.com/300x150" alt="">
            </div>
        </section>

        <section>
            <h2>與小程序交互</h2>
            <button @click="switchTab">回到小程序首頁</button>
            <button @click="postMessage">給小程序發(fā)消息</button>
        </section>

    </section>
</template>

<script>
    const wx = require('weixin-js-sdk');
                    
    export default {
          data () {
            return {
                isMiniprogram: false, // 是否是小程序環(huán)境
            };
        },

        mounted () {
            this.wx = wx;
            this.wx.miniProgram.getEnv((res) => {
                console.log('getEnv', res, res.miniprogram);
                this.isMiniprogram = true;
            });
        },

        methods: {
            onClick () {
                console.log('點擊圖片', this.wx);
            },
            switchTab () {
                if (this.isMiniprogram) {
                    this.wx.miniProgram.switchTab({
                        url: '/pages/index/index',
                        success: function (res) {
                            console.log('success', res);
                        },
                        fail: function (err) {
                            console.log('fail', err);
                        },
                        complete: function (res) {
                            console.log('complete', res);
                        },
                    });
                }
            },
            postMessage () {
                if (this.isMiniprogram) {
                    this.wx.miniProgram.postMessage({
                        data: { foo: 'bar' },
                    });
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    button {
        padding: 10px;
        background: #333;
        color: #fff;
        border: none;
        margin-right: 10px;
        border-radius: 5px;
    }

    h2 {
        padding: 30px 0 20px 0;
    }

    section {
        text-align: center;
    }
</style>

這里有幾個要注意的點：

• 導航到小程序頁面的時候跟小程序開發(fā)的路由方法是一樣的，即如果要導航到 tabbar 頁面，不能用 navigateTo 方法，要用 switchTab，否則的話在小程序調試時不會發(fā)生任何跳轉，而且居然沒有任何錯誤提示。（我就是在這被坑了……）

• wx.miniProgram.postMessage 方法的參數(shù)格式是對象，而且要有 data 屬性，即 {data:...} 這樣，不然在小程序里收不到。

• 微信js-sdk官方文檔說使用所有接口前都需要先配置權限，然而??！miniProgram 這一系列方法是可以不用 config 的……關于這個社區(qū)有人問過：小程序跳轉網頁有bug嗎。因為我這個網頁不想拿微信用戶信息，所以這一點對我來說還是比較重要的。

小程序接收消息

小程序 web-view 的 bindmessage 不會在網頁發(fā)送完消息后立刻收到，而是會在小程序后退、組件銷毀、分享時觸發(fā)并收到消息。而且如果網頁發(fā)送了多次消息，在小程序接收的時候會把 data 合并。

網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發(fā)并收到消息。e.detail = { data }，data是多次 postMessage 的參數(shù)組成的數(shù)組

直接看一下代碼和輸出

代碼：

<!-- wxml -->

<view class='web-view'>
  <web-view src="{{url}}" bindmessage="getMsgFromWeb" bindload="onWebLoad" binderror="onWebError"></web-view>
</view>

// js

  getMsgFromWeb(e) {
    console.log('getMsgFromWeb', e.detail.data)
  },

  onWebLoad(e) {
    console.log('onWebLoad', e)
  },

  onWebError(e) {
    console.error('onWebError', e)
  }

輸出：

2.png

上面的截圖是我點擊了10次發(fā)送消息按鈕，然后 getMsgFromWeb 的輸出是在我點了回到小程序首頁按鈕后輸出的。

End

網頁和小程序交互通信的基本實現(xiàn)方式就是這樣啦，因為自己開發(fā)的時候被坑了一下，在此做個記錄，希望對還在爬坑的同學有用~~