Maison >interface Web >Tutoriel H5 >Une brève analyse de l'interaction entre l'applet WeChat et le Web (partage de code)

Une brève analyse de l'interaction entre l'applet WeChat et le Web (partage de code)

奋力向前
奋力向前avant
2021-08-17 11:49:144842parcourir

Dans l'article précédent "Analyse approfondie de l'interaction de base entre React Native et le Web (avec code)", je vous ai fait comprendre l'interaction entre React Native et le Web. L'article suivant vous donnera une compréhension de l'interaction entre l'applet WeChat et le Web. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Une brève analyse de l'interaction entre l'applet WeChat et le Web (partage de code)

Contexte

Habituellement, nous écrivons un ensemble de programmes Web adaptatifs et souhaitons les utiliser dans une variété d'environnements, par exemple, dans des applications, des mini-programmes WeChat, divers partages d'applications, si nous ne pouvons utiliser que l'application. pour naviguer, le problème n'est pas grave, mais si vous souhaitez interagir avec l'application elle-même dans l'application intégrée, vous devez faire toutes sortes de problèmes, donc cet article est ici.

Ajoutez 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 &#39;weixin-js-sdk&#39;

判断是微信小程序环境

通过userAgentmicromessenger,或者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刚好在pagePathVeuillez voir ici

Conditions d'accès

  • Vous devez d'abord disposer des autorisations de développeur
  • Vous devez disposer d'un serveur et avoir l'autorisation de télécharger des fichiers, sinon la vérification ne réussira pas

  • Il doit s'agir d'une applet d'entreprise, les applet personnelles et étrangères ne peuvent pas être utilisées vue Web code> Composant

  • Votre nom de domaine pertinent est configuré avec un certificat valide et le service https est activé

  • L'URL que vous souhaitez visiter doit être ajoutée au Liste blanche des noms de domaine professionnels. L'interface API appelée doit être ajoutée à la liste blanche des noms de domaine du serveur, et l'interface api utilise également le protocole https

    Les conditions ci-dessus doivent être rencontrés en même temps, et les deux sont indispensables WeChat JSSDKIntroduction🎜🎜WeChat JSSDKIntroduction🎜🎜🎜Introduction externe🎜🎜rrreee🎜🎜Utilisez la méthode de chargement du module standard AMD/CMD pour charger🎜🎜🎜🎜Installation 🎜🎜rrreee🎜🎜Utilisez🎜🎜rrre dans mian.js ee 🎜Pour déterminer s'il s'agit d'un environnement d'applet WeChat🎜🎜Utilisez userAgent pour être micromessenger ou window.__wxjs_environment pour le déterminer🎜🎜🎜À partir de WeChat 7.0.0, vous pouvez déterminer l'environnement d'affichage Web du mini-programme en déterminant que l'agent utilisateur contient le mot miniProgram. 🎜🎜rrreee🎜Introduit sdk, et connaissant les variables d'environnement, commençons. 🎜🎜Exemple d'applet interactif🎜🎜🎜Utilisez les composants de l'applet🎜, créez un nouveau /page/webview/index.wxml🎜🎜🎜web-view remplira automatiquement toute la page de l'applet, type personnel L'utilisation de mini-programmes étrangers n'est actuellement pas prise en charge. À partir de la version client 6.7.2, navigationStyle: custom n'est pas valide pour les composants🎜🎜rrreee🎜🎜New🎜/page/webview/index.js🎜rrreee🎜Exemple interactif côté Web🎜🎜Côté Web , nous Si vous savez comment juger si le Web est dans un mini programme, vous pouvez envoyer directement des informations interactives via WeChat jsskd, tout comme dans le mini programme natif WeChat 🎜🎜🎜Faites sauter un itinéraire🎜🎜 rrreee🎜🎜 au mini programme Envoyer des données🎜🎜rrreee🎜🎜Plus de méthodes🎜
    🎜rrreee🎜Questions connexes🎜
    • 🎜Avez-vous déjà rencontré redirectTo Le problème de l'impossibilité de sauter est que peu importe la façon dont vous le modifiez, il ne sera pas exécuté, ou même si l'exécution réussit, il ne peut toujours pas être sauté, même si vous le modifiez. redirectTo, cela ne servira à rien. 🎜🎜
    • 🎜Parce que redirectTo ne peut pas accéder à la page actuelle, et tabBar=> sous <code>app.json pagePath défini dans la liste, si l'url vers laquelle vous souhaitez accéder se trouve être défini dans pagePath, veuillez utiliser switchTab. 🎜🎜🎜🎜🎜Pour plus d'API 🎜🎜🎜🎜 veuillez vous référer à l'adresse API du site officiel : 🎜🎜https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 🎜🎜Veuillez vous référer vers WeChat JS -L'adresse de la documentation du SDK : 🎜🎜https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html🎜🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo H5🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer