Analisis ringkas tentang cara berkomunikasi antara halaman web dan program kecil

Bagaimana untuk berkomunikasi antara halaman web dan program mini? Artikel berikut akan memperkenalkan anda kepada pengetahuan yang berkaitan tentang komunikasi antara halaman web dan program kecil saya harap ia akan membantu anda!

Program mini WeChat kami menggunakan kaedah paparan web untuk membenamkan projek H5, dengan itu mengurangkan jumlah pembangunan Dalam penggunaan sebenar, hanya terdapat komunikasi antara halaman web dan program mini keperluan, di bawah saya merumuskan secara ringkas masalah yang saya hadapi dan penyelesaiannya.

Fungsi yang disediakan oleh program mini

WeChat menyediakan kaedah untuk halaman web menghantar mesej kepada program mini: wx.miniProgram.postMessage Kaedah ini menghantar mesej kepada program mini . Cetuskan peristiwa mesej komponen pada masa tertentu (undur program mini, pemusnahan komponen, perkongsian).

Butiran API khusus boleh dilihat WeChat Open Documents

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

Mari perkenalkan secara ringkas cara menggunakannya, mengambil perkongsian sebagai contoh Jika halaman A perlu menyediakan kandungan perkongsian khas, seperti tajuk pemajuan, lakaran kecil, dsb. Anda boleh menetapkan nilai pembolehubah dalam halaman web dan menghantarnya ke program mini

halaman web

let shareData = {
  path: '转发路径',
  title: '自定义转发标题',
  imageUrl: '缩略图url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });

program mini

index.wxml

Terima acara melalui pengikatan bindmessage

<web-view bindmessage=&#39;getMessage&#39; src=&#39;{{ src }}&#39;></web-view>

index.js

// 获取从网页发送来的消息
getMessage(e) {
  const getMessage (e) {
  // data是多次postMessage的参数组成的数组
  const { data } = e.detail;
  // 需要取最后一条数据
  let shareMessage = data[data.length - 1];
  this.shareMessage = JSON.parse(shareMessage);
};

// 设置分享
onShareAppMessage(options) {
  return {
    title: this.shareMessage.title,
    path:  this.shareMessage.path,
    imageUrl: this.shareMessage.imageUrl,
  };
}

Dengan cara ini, fungsi perkongsian tersuai selesai, tetapi kaedah postMessage hanya Mesej boleh diperolehi dalam senario tertentu, jadi bagaimana untuk mendapatkan komunikasi jika ia bukan senario tertentu?

Cara mudah untuk mendapatkan komunikasi

Penyelesaian yang saya sediakan mungkin bukan yang optimum atau paling universal, tetapi ia boleh digunakan sebagai penyelesaian jika anda menghadapi masalah masalah Satu alternatif.

1. Pemulihan pemandangan

Program mini kami mempunyai kedudukan bandar Apabila memasuki program mini untuk kali pertama, anda perlu memilih bandar di mana anda berada, pilih bandar Ia akan dicache secara tempatan, dan anda tidak perlu lagi memilih semula bandar apabila anda memasuki program mini sekali lagi. Fungsinya adalah seperti berikut: tangkapan skrin

Selepas memilih bandar, ia akan dipaparkan di sudut kanan atas halaman utama

Memandangkan kedua-dua halaman pemilihan bandar dan halaman utama adalah Dengan membenamkan program mini dalam paparan web, adalah jelas bahawa jika cache dimasukkan dalam halaman H5, maklumat cache tidak boleh diperoleh dalam program mini.

2.Penyelesaian

Penyelesaiannya sangat mudah selepas berkomunikasi dengan rakan kongsi belakang saya, saya meminta dia memberikan saya antara muka ke Id bandar dikaitkan dengan maklumat pengguna, supaya saya boleh mendapatkan id bandar yang terakhir dipilih pengguna apabila pengguna memasuki program mini, dan kemudian cache dalam program mini, supaya pengguna tidak perlu pilih bandar sekali lagi apabila dia memasuki program mini semula

Laman Web

// 保存城市信息
const saveCityHandle = () => {
  saveCity({
    cityId: cityId,
    userId: userId,
  }).then(() => {});
};

Program Mini

Selepas memperoleh id bandar, cache melalui wx.setStorageSync untuk kegunaan seterusnya.

wx.login({
  success(res) {
    if (res.code) {
      wx.request({
        url: `${that.domain()}/getUserInfo`,
        data: {
          body: { jsCode: res.code },
        },
        success(res) {
          wx.setStorageSync('cityId', res.data.cityId);
        },
      });
    } else {
      console.log('登录失败！' + res.errMsg);
    }
  },
});

Ringkasan

“Mengkaji masa lalu dan mempelajari perkara baharu boleh berfungsi sebagai guru.”

Kadang-kadang, lihat kembali pengetahuan tertentu Jika anda mengklik padanya, anda mungkin mempunyai idea baharu untuk dikongsi dengan anda.ヾ(◍°∇°◍)ﾉﾞ

Sajak kecil

Tengok pada tarikhnya, saya dapati bulan Disember adalah bulan terakhir untuk tahun 2021. Saya pernah Saya menulis puisi pendek, yang agak sesuai dengan keadaan fikiran saya sekarang saya juga mempunyai beberapa keberkatan untuk diri saya dan semua orang.

眼前是一扇窗，
窗外是变换的景色，
夜晚，
墨绿的树，
散落灯光的高楼大厦，
疾驰的汽车，
或匆忙或悠闲的行人。

我好像记住了每一座楼宇，
却不记得每一张面孔，
不变的建筑，
变换的路人。
今年，
有一些变化，
每一颗追求人生的心，
都值得期待，
每一个不舍的眼神，
笑容也无法遮掩。

致，
所有开发的伙伴，
一期一祈，
勿怀犹也，
幸福美好。

[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Atas ialah kandungan terperinci Analisis ringkas tentang cara berkomunikasi antara halaman web dan program kecil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!