Eine kurze Analyse der Interaktion zwischen WeChat-Applet und dem Web (Code-Sharing)

Im vorherigen Artikel „Eingehende Analyse der grundlegenden Interaktion zwischen React Native und dem Web (mit Code)“ habe ich Ihnen die Interaktion zwischen React Native und dem Web näher gebracht. Der folgende Artikel wird Ihnen einen Einblick in die Interaktion zwischen dem WeChat-Applet und dem Internet geben. Ich hoffe, er wird Ihnen weiterhelfen.

Hintergrund

Normalerweise schreiben wir eine Reihe adaptiver Webprogramme und möchten diese in verschiedenen Umgebungen verwenden, zum Beispiel in Apps, WeChat-Miniprogrammen, verschiedenen App-Sharing, wenn wir die App nur nutzen können Beim Durchsuchen ist das Problem nicht groß, aber wenn Sie mit der App selbst in der eingebetteten App interagieren möchten, müssen Sie alle möglichen Probleme lösen, daher ist dieser Artikel hier.

Geben SieReactNativeein,ReactNative里折腾，请看这里

接入条件

• 首先得有开发者权限

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

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

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

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

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

微信 JSSDK 引入

外部引入

 //进一步提升服务稳定性，当上述资源不可访问时，可改访问 

使用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对组件无效

新建/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刚好在pagePathSiehe hier

• Sie müssen zunächst über Entwicklerberechtigungen verfügen

• Sie müssen über einen Server und die Berechtigung zum Hochladen von Dateien verfügen, andernfalls wird die Überprüfung nicht bestanden

  Es muss ein Unternehmens-Applet sein. Persönliche Applets und Übersee-Applets können nicht verwendet werden.web-view code> Component

  Ihr relevanter Domainname ist mit einem gültigen Zertifikat konfiguriert und derhttps-Dienst ist aktiviert

  Die URL, die Sie besuchen möchten, muss hinzugefügt werden Die aufgerufene API-Schnittstelle muss zur Whitelist des Serverdomänennamens hinzugefügt werden, und dieapi-Schnittstelle verwendet auch dashttps-Protokoll
  Die oben genannten Bedingungen müssen erfüllt sein gleichzeitig erfüllt sein, und beide sind unverzichtbar WeChatJSSDKEinführungWeChat JSSDK-EinführungExterne EinführungrrreeeVerwenden Sie zum Laden die AMD/CMD-Standardmodullademethode InstallationrrreeeVerwendenrrre in mian.js ee Um festzustellen, ob es sich um eine WeChat-Applet-Umgebung handeltVerwenden SieuserAgent, ummicromessengerzu sein, oderwindow.__wxjs_environmentum es zu bestimmenAb WeChat 7.0.0 können Sie die Miniprogramm-Webansichtsumgebung bestimmen, indem Sie feststellen, dass der userAgent das Wort miniProgram enthält. rrreeesdkeingeführt und die Umgebungsvariablen bekannt, fangen wir an. Interaktives Beispiel-AppletErstellen Sie mithilfe der Komponenten des Applets eine neue/page/webview/index.wxmlweb-view füllt automatisch die gesamte Applet-Seite aus, persönlicher Typ Die Nutzung ausländischer Miniprogramme wird derzeit nicht unterstützt. Ab Client-Version 6.7.2 ist navigationStyle: custom für Komponenten ungültig , wir Wenn Sie wissen, wie Sie feststellen können, ob sich das Web in einem Miniprogramm befindet, können Sie interaktive Informationen direkt über WeChatjsskdsenden, genau wie im nativen WeChat-Miniprogramm Machen Sie Routing-Sprünge rrreee zum Miniprogramm Daten sendenrrreeeWeitere Methoden
  rrreeeVerwandte Fragen
  • Haben Sie schon einmal darauf gestoßenredirectToDas Problem, wenn Sie nicht springen können, besteht darin, dass es nicht ausgeführt wird, egal wie Sie es ändern, oder selbst wenn die Ausführung erfolgreich ist, kann nicht gesprungen werdenredirectTo, es wird nutzlos sein.
  • DaredirectTonicht zur aktuellenSeitespringen kann undtabBar=> unter app.jsonpagePathin Liste definiert. Wenn dieURL, zu der Sie springen möchten, zufällig inpagePathdefiniert ist, verwenden Sie bitte switchTab. Weitere APIs finden Sie auf der offiziellen Website-API-Adresse: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html Bitte beachten Sie zu WeChat JS – Die Adresse der SDK-Dokumentation: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.htmlEmpfohlenes Lernen: H5-Video-Tutorial