之前的文章《深入淺析React Native與Web的基本交互（附代碼）》中，給大家了解一下React Native與Web交互。下面本篇文章給大家了解一下微信小程序和web之間的交互，有需要的朋友可以參考一下，希望對(duì)你們有幫助。

背景

通常我們寫了一套自適應(yīng)的web程序，想在多種環(huán)境中使用.比如app里，微信小程序里,各種app分享中，假如只是能使用app瀏覽，問(wèn)題不大，但是要在被嵌入app里面和app本身交互，就要做各種折騰，如是就有了本文。

在ReactNative里折騰，請(qǐng)看這里

接入條件

• 首先得有開發(fā)者權(quán)限

• 你得有臺(tái)服務(wù)器，有權(quán)限上傳文件，不然驗(yàn)證無(wú)法通過(guò)

• 必須是企業(yè)小程序，個(gè)人和海外小程序無(wú)法使用web-view組件

• 你的相關(guān)域名配置了有效的證書，并且開啟了https服務(wù)

• 你要訪問(wèn)的網(wǎng)址必須加入了業(yè)務(wù)域名白名單，網(wǎng)址所調(diào)用的api接口必須加入了服務(wù)器域名白名單，并且api接口也使用的https協(xié)議

以上條件必須同時(shí)滿足，缺一不可微信JSSDK引入

微信 JSSDK 引入

外部引入

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> //進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)，可改訪問(wèn) <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

使用AMD/CMD標(biāo)準(zhǔn)模塊加載方法加載

安裝

npm i weixin-js-sdk

在mian.js用使用

import wx from 'weixin-js-sdk'

判斷是微信小程序環(huán)境

通過(guò)userAgent為micromessenger，或者window.__wxjs_environment來(lái)判斷

從微信 7.0.0 開始，可以通過(guò)判斷userAgent中包含miniProgram字樣來(lái)判斷小程序web-view環(huán)境。

import wx from "weixin-js-sdk";  let OS = "PC"; //假設(shè)有多種環(huán)境  let ua = window.navigator.userAgent.toLowerCase(); if (   ua.indexOf("micromessenger") >= 0 ||   window.__wxjs_environment === "miniprogram" ) {   //在微信或者小程序中   wx.miniProgram.getEnv((res) => {     if (res.miniprogram) {       //在小程序中       OS = "wxminiprogram";       window.wx = wx;     } else {       //在微信中       OS = "weixin";     }   }); }

引入了sdk，知道了環(huán)境變量，下面就是開干了。

交互示例小程序端

使用小程序端的組件，新建/page/webview/index.wxml

web-view會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面，個(gè)人類型與海外類型的小程序暫不支持使用。客戶端6.7.2版本開始，navigationStyle: custom對(duì)組件無(wú)效

<!-- 通過(guò)src 來(lái)傳遞當(dāng)前url, 通過(guò)bindmessage 來(lái)監(jiān)聽html的傳值 --> <web-view src="{{url}}" bindmessage="getMessage" />

新建/page/webview/index.js

// pages/webview/index.js const app = getApp(); Page({   data: {     url: "",     shareData: {},     postData: {},   },   onLoad: function (options) {     // nickName ,token 是登錄之后拿到的信息 , 用來(lái)和h5 交互     let nickName = wx.getStorageSync("nickName");     let token = wx.getStorageSync("token");      let url = options.url;     if (url) {       //請(qǐng)注意傳遞url 請(qǐng)務(wù)必使用 decodeURIComponent 和 encodeURIComponent , 不然會(huì)白屏       url = decodeURIComponent(url);     }     //因?yàn)樾〕绦?貌似還不能主動(dòng)和H5 交互,所以拿到的登錄信息,我們通過(guò)url 來(lái)傳遞.     let localUrl = "";     if (token) {       localUrl = url + "?token=" + userToken + "&nickName=" + nickName;     }     //猶豫地址存了token 和其他信息,分享會(huì)暴露,所以要手動(dòng)重置分享地址 數(shù)據(jù)為 shareData     this.setData({       url: localUrl,       shareData: {         titil: "測(cè)試小程序",         desc: "測(cè)試小程序藐視描述",         path: url,       },     });   },   getMessage(e) {     //此處接收html傳遞過(guò)來(lái)的參數(shù)     this.postData = e.detail.data;   },   /**    * 用戶點(diǎn)擊右上角分享    */   onShareAppMessage() {     //重置分享鏈接和路徑     return {       title: this.shareData.title,       desc: this.shareData.desc,       path: this.shareData.path,     };   }, });

交互示例web端

在web端，我們知道如何判斷web是在小程序中，可以通過(guò)微信jsskd直接發(fā)送交互信息，和在原生的微信小程序里一樣

做路由跳轉(zhuǎn)

// 前面我們已經(jīng)定義了window.wx = wx ,這里可以直接調(diào)用 // 還可以通過(guò)url 來(lái)獲取token 等相關(guān)信息  if (OS == "RN") {   //這里假設(shè)我們有多重環(huán)境.. } if (OS == "wxminiprogram") {   wx.miniProgram.navigateTo({     url:       "/pages/webview/index?url=" +       decodeURIComponent("https://www.chuchur.com?id=100"),   }); }

給小程序發(fā)送數(shù)據(jù)

wx.miniProgram.postMessage({   data: {     hello: "wrold",   }, }); //web-view 則通過(guò) bindmessage 來(lái)監(jiān)聽 傳過(guò)來(lái)的數(shù)據(jù)