Analisis ringkas tentang interaksi antara applet WeChat dan web (perkongsian kod)

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>
//进一步提升服务稳定性，当上述资源不可访问时，可改访问
<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"; //假设有多种环境

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 来监听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") {
  //这里假设我们有多重环境..
}
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 来监听 传过来的数据

Lagi kaedah

wx.miniProgram.navigateBack(); //返回
wx.miniProgram.switchTab(); //切换底部的导航
wx.miniProgram.reLaunch(); //重新加载
wx.miniProgram.redirectTo(); //地址重定向
wx.miniProgram.getEnv(); //获取当前环境

Soalan berkaitan

• 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

Pembelajaran yang disyorkan:

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!