淺析微信小程式和web之間的互動（程式碼分享）

在

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

背景

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

在ReactNative裡折騰，請看這裡

#存取條件

• 首先得有開發者權限

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

• ##必須是企業小程序，個人和海外小程式無法使用

  web-view元件

• 你的相關網域配置了有效的證書，並且開啟了

  https#服務

• 你要存取的網址必須加入了業務網域白名單，網址所呼叫的api介面必須加入了伺服器網域白名單，而

  api介面也使用的https協定

JSSDK引入

外部引入

//进一步提升服务稳定性，当上述资源不可访问时，可改访问

使用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
• #

  // 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

以上是淺析微信小程式和web之間的互動（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！