WeChat 애플릿과 웹(코드 공유) 간의 상호 작용에 대한 간략한 분석

이전 글 "React Native와 웹(코드 포함)의 기본 상호작용 심층 분석"에서는 React Native와 웹의 상호작용에 대한 이해를 드렸습니다. 다음 기사는 WeChat 애플릿과 웹 사이의 상호 작용에 대한 이해를 제공할 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Background

보통 우리는 적응형 웹 프로그램 세트를 작성하고 이를 다양한 환경에서 사용하려고 합니다. 예를 들어 앱만 사용할 수 있다면 앱, WeChat 미니 프로그램, 다양한 앱 공유에서 사용할 수 있습니다. 찾아보려면 문제는 크지 않지만, 임베디드 앱에서 앱 자체와 상호작용하려면 온갖 고생을 해야 하므로 이 글은 여기까지입니다.

Toss in ReactNative, ReactNative里折腾，请看这里

接入条件

• 首先得有开发者权限

• 你得有台服务器，有权限上传文件，不然验证无法通过

• 必须是企业小程序，个人和海外小程序无法使用web-view组件

• 你的相关域名配置了有效的证书，并且开启了https服务

• 你要访问的网址必须加入了业务域名白名单，网址所调用的api接口必须加入了服务器域名白名单，并且api接口也使用的https协议

以上条件必须同时满足，缺一不可微信JSSDK引入

微信 JSSDK 引入

外部引入

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

使用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，知道了环境变量，下面就是开干了。

交互示例小程序端

使用小程序端的组件，新建/page/webview/index.wxml

web-view会自动铺满整个小程序页面，个人类型与海外类型的小程序暂不支持使用。客户端6.7.2版本开始，navigationStyle: custom对组件无效

<!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 -->
<web-view src="{{url}}" bindmessage="getMessage" />

新建/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，以及在app.json下面tabBar=> list里面定义的pagePath，假如你要跳转的url刚好在pagePath여기를 참조하세요

액세스 조건

• 먼저 개발자 권한이 있어야 합니다

• 서버가 있어야 하며 파일 업로드 권한이 있어야 합니다. 그렇지 않으면 인증이 통과되지 않습니다.

  개인용 및 해외 애플릿이어야 합니다. 웹뷰를 사용할 수 없습니다. > Component

  해당 도메인 이름이 유효한 인증서로 구성되어 있고 https 서비스가 활성화되어 있습니다

  방문하려는 URL을 업체에 추가해야 합니다 도메인 이름 화이트리스트라는 API 인터페이스를 서버 도메인 이름 화이트리스트에 추가해야 하며, api 인터페이스도 https 프로토콜을 사용합니다
  위 조건은 다음과 같아야 합니다. 동시에 만나서 둘 다 필수입니다 WeChat JSSDK소개🎜🎜WeChat JSSDK 소개🎜🎜🎜외부 소개🎜🎜rrreee🎜🎜AMD/CMD 표준 모듈 로딩 방법을 사용하여 로드🎜🎜🎜🎜설치 🎜🎜rrreee🎜🎜mian.js ee에서 🎜🎜rrre를 사용하세요. 🎜WeChat 애플릿 환경인지 확인하려면🎜🎜userAgent를 사용하여 마이크로 메신저 또는 가 되세요. window.__wxjs_environment를 통해 결정🎜🎜🎜WeChat 7.0.0부터 userAgent에 miniProgram이라는 단어가 포함되어 있는지 확인하여 미니 프로그램 웹 보기 환경을 결정할 수 있습니다. 🎜🎜rrreee🎜sdk를 도입했고, 환경 변수를 알고 있으니 시작해 보세요. 🎜🎜대화형 예제 애플릿🎜🎜🎜애플릿의 구성 요소를 사용하여🎜 새 /page/webview/index.wxml을 생성합니다.🎜🎜🎜web-view는 자동으로 전체 애플릿 페이지를 채웁니다. 개인 유형 해외 미니프로그램 이용은 현재 지원되지 않습니다. 클라이언트 버전 6.7.2부터 NavigationStyle: 구성 요소에 대한 사용자 정의가 유효하지 않습니다🎜🎜rrreee🎜🎜New🎜/page/webview/index.js🎜rrreee🎜Interactive example web side🎜🎜웹 측 , 우리 웹이 미니 프로그램에 있는지 판단하는 방법을 알고 있다면 기본 WeChat 미니 프로그램에서와 마찬가지로 WeChat jsskd를 통해 직접 대화형 정보를 보낼 수 있습니다 🎜🎜🎜Make Route Jump🎜🎜 rrreee🎜🎜 미니 프로그램으로 데이터 보내기🎜🎜rrreee🎜🎜더 많은 방법🎜
  🎜rrreee🎜관련 질문🎜
  • 🎜이런 적이 있으신가요? redirectTo점프할 수 없는 문제는 어떻게 변경해도 실행되지 않거나, 실행에 성공하더라도 점프할 수 없다는 점입니다. redirectTo, 쓸모가 없습니다. 🎜🎜
  • 🎜 redirectTo는 현재 페이지로 이동할 수 없고 app.json tabBar=> >pagePath가 목록에 정의되어 있습니다. 이동하려는 url이 pagePath에 정의되어 있으면 switchTab을 사용하세요. 🎜🎜🎜🎜🎜더 많은 API를 보려면 🎜🎜🎜🎜 공식 웹사이트 API 주소를 참조하세요: 🎜🎜https://developers.weixin.qq.com/miniprogram/dev/comComponent/web-view.html 🎜🎜참조하세요 WeChat JS - SDK 문서 주소: 🎜🎜https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html🎜🎜🎜추천 학습: 🎜H5 비디오 튜토리얼🎜🎜

위 내용은 WeChat 애플릿과 웹(코드 공유) 간의 상호 작용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!