概述
網(wǎng)頁與小程序交互和通信需要在小程序里使用 web-view 組件打開網(wǎng)頁策州，而且被訪問的網(wǎng)頁需要引入微信的 js-sdk串述，通過 js-sdk 提供的接口來給小程序發(fā)信息。
具體可以參考小程序官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
小程序后臺配置業(yè)務(wù)域名
這是小程序開發(fā)的限制谬盐，在 web-view 里要打開的網(wǎng)頁的域名要先在微信公眾平臺小程序后臺 開發(fā) --> 開發(fā)設(shè)置 --> 業(yè)務(wù)域名 里添加一項(xiàng)炕置，否則 web-view 無法打開這個網(wǎng)頁。
PS：不想配置這個的話也可以在 微信開發(fā)者工具 里面開啟 不校驗(yàn)合法域名欧芽。
網(wǎng)頁引入微信js-sdk
微信JS-SDK 是微信提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包莉掂。做過微信公眾號網(wǎng)頁開發(fā)的同學(xué)應(yīng)該就知道了（那是出了名的難用……）。
官方文檔鏈接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
怎么引入我就不寫了千扔，同學(xué)們按上面的文檔提示操作就好憎妙。
想用npm方式引用的話也可以找第三方，我用的是這個 weixin-js-sdk曲楚。
網(wǎng)頁向小程序發(fā)送消息
我做了個很簡單的demo頁厘唾，演示了導(dǎo)航到小程序頁面和給小程序發(fā)消息的功能。
頁面如下：
頁面是用 vue 寫的龙誊，很簡單抚垃，直接上代碼了：
<template>
<section>
<section>
<h2>點(diǎn)擊圖片事件</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('點(diǎn)擊圖片', 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>
這里有幾個要注意的點(diǎn)：
導(dǎo)航到小程序頁面的時候跟小程序開發(fā)的路由方法是一樣的，即如果要導(dǎo)航到
tabbar頁面趟大，不能用navigateTo方法鹤树，要用switchTab，否則的話在小程序調(diào)試時不會發(fā)生任何跳轉(zhuǎn)逊朽，而且居然沒有任何錯誤提示罕伯。（我就是在這被坑了……）wx.miniProgram.postMessage方法的參數(shù)格式是對象，而且要有data屬性惋耙，即{data:...}這樣捣炬，不然在小程序里收不到。微信
js-sdk官方文檔說使用所有接口前都需要先配置權(quán)限绽榛，然而Ｊ帷！miniProgram這一系列方法是可以不用config的……關(guān)于這個社區(qū)有人問過：小程序跳轉(zhuǎn)網(wǎng)頁有bug嗎灭美。因?yàn)槲疫@個網(wǎng)頁不想拿微信用戶信息推溃，所以這一點(diǎn)對我來說還是比較重要的。
小程序接收消息
小程序 web-view 的 bindmessage 不會在網(wǎng)頁發(fā)送完消息后立刻收到届腐，而是會在小程序后退铁坎、組件銷毀、分享時觸發(fā)并收到消息犁苏。而且如果網(wǎng)頁發(fā)送了多次消息硬萍，在小程序接收的時候會把 data 合并。
網(wǎng)頁向小程序 postMessage 時围详，會在特定時機(jī)（小程序后退朴乖、組件銷毀祖屏、分享）觸發(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)
}
輸出：
上面的截圖是我點(diǎn)擊了10次發(fā)送消息按鈕袁勺，然后 getMsgFromWeb 的輸出是在我點(diǎn)了回到小程序首頁按鈕后輸出的。
End
網(wǎng)頁和小程序交互通信的基本實(shí)現(xiàn)方式就是這樣啦畜普，因?yàn)樽约洪_發(fā)的時候被坑了一下期丰，在此做個記錄，希望對還在爬坑的同學(xué)有用~~
