本篇文章給大家了解一下微信小程序和web之間的交互，有需要的朋友可以參考一下，希望對你們有幫助。
背景
通常我們寫了一套自適應的web程序，想在多種環境中使用.比如app里，微信小程序里,各種app分享中，假如只是能使用app瀏覽，問題不大，但是要在被嵌入app里面和app本身交互，就要做各種折騰，如是就有了本文。
接入條件
首先得有開發者權限
你得有臺服務器，有權限上傳文件，不然驗證無法通過
必須是企業小程序，個人和海外小程序無法使用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
判斷是微信小程序環境
通過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會自動鋪滿整個小程序頁面，個人類型與海外類型的小程序暫不支持使用?？蛻舳?.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 來監聽 傳過來的數據更多方法
wx.miniProgram.navigateBack(); //返回 wx.miniProgram.switchTab(); //切換底部的導航 wx.miniProgram.reLaunch(); //重新加載 wx.miniProgram.redirectTo(); //地址重定向 wx.miniProgram.getEnv(); //獲取當前環境
相關問題
你有沒有遇到過redirectTo死都無法跳轉的問題呢，你怎么改他都不執行，或者執行成功了，還是無法跳轉，你甚至改為redirectTo都沒有用。
因為redirectTo無法跳轉到當前的page，以及在app.json下面tabBar=> list里面定義的pagePath，假如你要跳轉的url剛好在pagePath里面定義過，那么請使用switchTab。
更多 API
請參見官網API的地址：
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
請參見微信JS-SDK說明文檔的地址：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
