站長資訊網
之前的文章《深入淺析React Native與Web的基本交互（附代碼）》中，給大家了解一下React Native與Web交互。下面本篇文章給大家了解一下微信小程序和web之間的交互，有需要的朋友可以參考一下，希望對你們有幫助。
背景
通常我們寫了一套自適應的web程序，想在多種環境中使用.比如app里，微信小程序里,各種app分享中，假如只是能使用app瀏覽，問題不大，但是要在被嵌入app里面和app本身交互，就要做各種折騰，如是就有了本文。
在ReactNative里折騰，請看這里
接入條件
-
首先得有開發者權限
-
你得有臺服務器，有權限上傳文件，不然驗證無法通過
-
必須是企業小程序，個人和海外小程序無法使用
web-view組件 -
你的相關域名配置了有效的證書，并且開啟了
https服務 -
你要訪問的網址必須加入了業務域名白名單，網址所調用的api接口必須加入了服務器域名白名單，并且
api接口也使用的https協議
以上條件必須同時滿足，缺一不可微信JSSDK引入
微信 JSSDK 引入
外部引入
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> //進一步提升服務穩定性，當上述資源不可訪問時，可改訪問 <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
使用AMD/CMD標準模塊加載方法加載
安裝
npm i weixin-js-sdk
在mian.js用使用
import wx from 'weixin-js-sdk'
判斷是微信小程序環境
通過userAgent為micromessenger，或者window.__wxjs_environment來判斷
從微信 7.0.0 開始，可以通過判斷userAgent中包含miniProgram字樣來判斷小程序web-view環境。
import wx from "weixin-js-sdk"; let OS = "PC"; //假設有多種環境 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，知道了環境變量，下面就是開干了。
交互示例小程序端
使用小程序端的組件，新建/page/webview/index.wxml
web-view會自動鋪滿整個小程序頁面，個人類型與海外類型的小程序暫不支持使用。客戶端6.7.2版本開始，navigationStyle: custom對組件無效
<!-- 通過src 來傳遞當前url, 通過bindmessage 來監聽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 是登錄之后拿到的信息 , 用來和h5 交互 let nickName = wx.getStorageSync("nickName"); let token = wx.getStorageSync("token"); let url = options.url; if (url) { //請注意傳遞url 請務必使用 decodeURIComponent 和 encodeURIComponent , 不然會白屏 url = decodeURIComponent(url); } //因為小程序 貌似還不能主動和H5 交互,所以拿到的登錄信息,我們通過url 來傳遞. let localUrl = ""; if (token) { localUrl = url + "?token=" + userToken + "&nickName=" + nickName; } //猶豫地址存了token 和其他信息,分享會暴露,所以要手動重置分享地址 數據為 shareData this.setData({ url: localUrl, shareData: { titil: "測試小程序", desc: "測試小程序藐視描述", path: url, }, }); }, getMessage(e) { //此處接收html傳遞過來的參數 this.postData = e.detail.data; }, /** * 用戶點擊右上角分享 */ onShareAppMessage() { //重置分享鏈接和路徑 return { title: this.shareData.title, desc: this.shareData.desc, path: this.shareData.path, }; }, });
交互示例web端
在web端，我們知道如何判斷web是在小程序中，可以通過微信jsskd直接發送交互信息，和在原生的微信小程序里一樣
做路由跳轉
// 前面我們已經定義了window.wx = wx ,這里可以直接調用 // 還可以通過url 來獲取token 等相關信息 if (OS == "RN") { //這里假設我們有多重環境.. } if (OS == "wxminiprogram") { wx.miniProgram.navigateTo({ url: "/pages/webview/index?url=" + decodeURIComponent("https://www.chuchur.com?id=100"), }); }
給小程序發送數據
wx.miniProgram.postMessage({ data: { hello: "wrold", }, }); //web-view 則通過 bindmessage 來監聽 傳過來的數據
