Dalam artikel sebelumnya "Analisis mendalam tentang interaksi asas antara React Native dan Web (dengan kod) ", saya akan memberi anda pemahaman tentang interaksi antara React Native dan Web. Artikel berikut akan memberi anda pemahaman tentang interaksi antara applet WeChat dan web Rakan yang memerlukan saya harap ia akan membantu anda.

Latar Belakang

Biasanya kami menulis satu set atur cara web adaptif dan mahu menggunakannya dalam pelbagai persekitaran Contohnya, dalam apl , WeChat Dalam program mini dan pelbagai perkongsian aplikasi, jika anda hanya boleh menggunakan aplikasi untuk menyemak imbas, ia bukan masalah besar, tetapi jika anda ingin berinteraksi dengan aplikasi itu sendiri dalam aplikasi terbenam, anda perlu melakukan semua jenis masalah , jadi inilah artikel ini.

Tolong masuk ReactNative, Sila lihat di sini

Syarat akses

• Anda mesti mempunyai kebenaran pembangun terlebih dahulu

• Anda mesti mempunyai pelayan dan mempunyai kebenaran untuk memuat naik fail, jika tidak pengesahan tidak akan lulus

• Ia mestilah program mini perusahaan, peribadi dan program mini di luar negara tidak boleh Gunakan komponen web-view

• untuk mengkonfigurasi sijil yang sah untuk nama domain anda yang berkaitan dan mendayakan perkhidmatan https

• yang anda ingin akses URL mesti ditambahkan pada senarai putih nama domain perniagaan, antara muka api yang dipanggil oleh URL mesti ditambahkan pada senarai putih nama domain pelayan dan antara muka api juga menggunakan https protokol

Syarat di atas mesti Pada masa yang sama, kedua-duanya amat diperlukan WeChat JSSDKPengenalan

Pengenalan WeChat JSSDK

. Pengenalan luar

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
//進一步提升服務穩(wěn)定性，當上述資源不可訪問時，可改訪問
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

Gunakan AMD/CMD Standard modul memuatkan kaedah memuatkan

pemasangan

npm i weixin-js-sdk

dalam mian.js menggunakan

import wx from 'weixin-js-sdk'

Nilai sama ada persekitaran applet WeChat

Hakim oleh userAgent sebagai micromessenger, atau window.__wxjs_environment

Bermula dari WeChat 7.0.0, anda boleh menilai bahawa userAgent mengandungi Perkataan miniProgram digunakan untuk menentukan persekitaran paparan web program mini.

import wx from "weixin-js-sdk";

let OS = "PC"; //假設有多種環(huán)境

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";
    }
  });
}

diperkenalkan sdk, dan sekarang setelah kita mengetahui pembolehubah persekitaran, mari mulakan.

Applet contoh interaktif

Menggunakan komponen applet , paparan web /page/webview/index.wxml

baharu akan mengisi keseluruhan secara automatik Pada halaman program mini, program mini peribadi dan luar negara tidak disokong pada masa ini. Bermula dari versi klien 6.7.2, navigationStyle: tersuai tidak sah untuk komponen

<!-- 通過src 來傳遞當前url, 通過bindmessage 來監(jiān)聽html的傳值 -->
<web-view src="{{url}}" bindmessage="getMessage" />

Baharu/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,
    };
  },
});

Contoh interaktif bahagian web

Di bahagian web, kami tahu bagaimana untuk menentukan sama ada web berada dalam program mini Kami boleh menghantar maklumat interaktif terus melalui WeChat jsskd, sama seperti dalam program mini WeChat asli

Lompat laluan

// 前面我們已經定義了window.wx = wx ,這里可以直接調用
// 還可以通過url 來獲取token 等相關信息

if (OS == "RN") {
  //這里假設我們有多重環(huán)境..
}
if (OS == "wxminiprogram") {
  wx.miniProgram.navigateTo({
    url:
      "/pages/webview/index?url=" +
      decodeURIComponent("https://www.chuchur.com?id=100"),
  });
}

Hantar data ke program mini

wx.miniProgram.postMessage({
  data: {
    hello: "wrold",
  },
});
//web-view 則通過 bindmessage 來監(jiān)聽 傳過來的數據

Lagi kaedah

wx.miniProgram.navigateBack(); //返回
wx.miniProgram.switchTab(); //切換底部的導航
wx.miniProgram.reLaunch(); //重新加載
wx.miniProgram.redirectTo(); //地址重定向
wx.miniProgram.getEnv(); //獲取當前環(huán)境

• Pernahkah anda menghadapi masalah

  tidak dapat melompat walaupun anda mati Tidak kira bagaimana anda mengubahnya, ia akan berlaku? tidak boleh dilaksanakan, atau ia akan dilaksanakan dengan jayanya , masih tidak boleh melompat, walaupun anda menukarnya kepada redirectTo, ia tidak berfungsi. redirectTo

• Kerana

  tidak boleh melompat ke arus redirectTo dan page yang ditakrifkan dalam app.json di bawah tabBar=> list, jika anda mahu melompat ke pagePathIa berlaku untuk ditakrifkan dalam url, kemudian sila gunakan switchTab. pagePath

Lagi API

Sila lihat alamat API rasmi:

https://developers.weixin . qq.com/miniprogram/dev/component/web-view.html

Sila rujuk alamat dokumentasi WeChat JS-SDK:

https://developers.weixin.qq.com /doc/offiaccount/OA_Web_Apps/JS-SDK.html

Tutorial video H5

Atas ialah kandungan terperinci Analisis ringkas tentang interaksi antara applet WeChat dan web (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!