웹페이지와 작은 프로그램 간의 통신 방법에 대한 간략한 분석

웹페이지와 미니 프로그램 간 통신은 어떻게 하나요? 다음 글은 웹페이지와 작은 프로그램 사이의 통신에 관한 관련 지식을 소개하겠습니다. 도움이 되길 바랍니다!

저희 WeChat 애플릿은 H5 프로젝트를 삽입하기 위해 웹 보기 방식을 사용하므로, 실제 사용 시 웹 페이지 및 애플릿 통신의 기능적 요구 사항에 직면하게 됩니다. 아래에서는 제가 겪은 문제를 간략하게 요약합니다. 그리고 솔루션.

미니 프로그램에서 제공하는 기능

WeChat은 웹 페이지에서 미니 프로그램에 메시지를 보내는 방법을 제공합니다: wx.miniProgram.postMessage 이 방법은 미니 프로그램에 메시지를 보내고 특정 시간(미니 프로그램 수련회, 구성 요소 파괴, 공유)는 구성 요소의 메시지 이벤트를 트리거합니다.

특정 API 세부정보 확인 가능 WeChat Open Documents

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

사용 방법에 대한 간략한 소개 예를 들어 페이지 A에서 전달 제목, 썸네일 등과 같은 특별한 공유 콘텐츠를 설정해야 하는 경우 웹 페이지에서 변수 값을 설정하고 이를 applet

webpage

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

applet

index.wxml

bind 메시지로 보내면 이벤트

<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,
  };
}

를 받을 수 있습니다. time 맞춤형 공유 기능이 완성됐는데 postMessage 메소드는 특정 시나리오에서만 메시지를 얻을 수 있는데, 비특정 시나리오에서는 어떻게 통신을 얻을 수 있을까요?

간단한 의사소통 방법

제가 제공하는 솔루션은 최적이거나 가장 보편적이지 않을 수 있지만 문제가 발생할 경우 대안으로 사용할 수 있습니다.

1. 장면 복원

미니 프로그램에 처음 들어갈 때 도시를 선택해야 합니다. 도시를 다시 선택하면 더 이상 다시 선택해야 합니다. 기능은 다음과 같습니다. 보기에는 분명히 H5 페이지에 캐시되어 있으며 미니 프로그램에서는 캐시 정보를 얻을 수 없습니다.

2. 해결 방법

해결 방법은 매우 간단합니다. 백엔드 파트너와 대화한 후 도시 ID와 사용자 정보를 연결할 수 있는 인터페이스를 제공해달라고 요청했습니다. 프로그램 중에 사용자가 마지막으로 선택한 도시 ID를 얻은 다음 미니 프로그램에 캐시하므로 사용자가 미니 프로그램에 다시 들어갈 때 도시를 다시 선택할 필요가 없습니다

webpage

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

미니 프로그램

도시 ID를 얻은 후 wx.setStorageSync를 통해 캐시하여 나중에 사용할 수 있습니다.

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

요약

"과거를 복습하고 새로운 것을 배우면 선생님이 될 수 있습니다."때때로 특정 지식 포인트를 되돌아보면 새로운 아이디어가 생겨서 공유할 수도 있습니다.ヾ(◍°∇°◍)ﾉﾞ

작은 시

날짜를 보니 12월이 2021년의 마지막 달이더군요. 예전에 짤막한 시를 썼는데, 지금의 저와 어느 정도 일치하네요. 기분이 좋으면 나 자신과 모두에게도 축복이 있습니다.

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

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

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

【관련 학습 추천:

미니 프로그램 개발 튜토리얼

】

위 내용은 웹페이지와 작은 프로그램 간의 통신 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!