淺析微信小程式和web之間的互動（程式碼分享）
- 奋力向前轉載
- 2021-08-17 11:49:144669瀏覽
在
之前的文章《深入淺析React Native與Web的基本互動（附程式碼）》中，給大家了解React Native與Web互動。以下這篇文章給大家了解一下微信小程式和web之間的交互，有需要的朋友可以參考一下，希望對你們有幫助。
背景
通常我們寫了一套自適應的web程序，想在多種環境中使用.例如app裡，微信小程式裡,各種app分享中，假如只是能使用app瀏覽，問題不大，但是要在被嵌入app裡面和app本身交互，就要做各種折騰，如是就有了本文。
在ReactNative裡折騰，請看這裡
#存取條件
首先得有開發者權限
你得有台伺服器，有權限上傳文件，不然驗證無法通過
- ##必須是企業小程序，個人和海外小程式無法使用
web-view
元件 - 你的相關網域配置了有效的證書，並且開啟了
https
#服務 - 你要存取的網址必須加入了業務網域白名單，網址所呼叫的api介面必須加入了伺服器網域白名單，而
api
介面也使用的https協定
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，知道了環境變量，下面就是開乾了。
互動範例小程式端使用小程式端的元件
，新建
- web-view會自動鋪滿整個小程式頁面，個人類型與海外類型的小程式暫不支援使用。客戶端6.7.2版本開始，navigationStyle: custom對元件無效
/page/webview/index.js<pre class="brush:php;toolbar:false"><!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 --> <web-view src="{{url}}" bindmessage="getMessage" /></pre>新建 - #
// 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直接傳送互動訊息，和在原生的微信小程式裡一樣做路由跳轉<pre class="brush:php;toolbar:false">// 前面我们已经定义了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"), }); }</pre>給小程式發送資料<pre class="brush:php;toolbar:false">wx.miniProgram.postMessage({ data: { hello: "wrold", }, }); //web-view 则通过 bindmessage 来监听 传过来的数据</pre>
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##########推薦學習：###H5影片教學#######以上是淺析微信小程式和web之間的互動（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！