微信小程序和web之間如何實現交互

這篇文章主要介紹微信小程序和web之間如何實現交互，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

接入條件

• 首先得有開發者權限

• 你得有臺服務器，有權限上傳文件，不然驗證無法通過

• 必須是企業小程序，個人和海外小程序無法使用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 是登錄之后拿到的信息 , 用來和h6 交互
    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(); //獲取當前環境

以上是“微信小程序和web之間如何實現交互”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！