Heim > Artikel > Web-Frontend > 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.
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 Sie ReactNative
ein, ReactNative
里折腾,请看这里
首先得有开发者权限
你得有台服务器,有权限上传文件,不然验证无法通过
必须是企业小程序,个人和海外小程序无法使用web-view
组件
你的相关域名配置了有效的证书,并且开启了https
服务
你要访问的网址必须加入了业务域名白名单,网址所调用的api接口必须加入了服务器域名白名单,并且api
接口也使用的https
协议
以上条件必须同时满足,缺一不可微信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是在小程序中,可以通过微信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
Siehe hier
Sie müssen über einen Server und die Berechtigung zum Hochladen von Dateien verfügen, andernfalls wird die Überprüfung nicht bestandenDie URL, die Sie besuchen möchten, muss hinzugefügt werden Die aufgerufene API-Schnittstelle muss zur Whitelist des Serverdomänennamens hinzugefügt werden, und dieEs 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 der
https
-Dienst ist aktiviert
api
-Schnittstelle verwendet auch das https
-ProtokollDie oben genannten Bedingungen müssen erfüllt sein gleichzeitig erfüllt sein, und beide sind unverzichtbar WeChat JSSDK
Einführung🎜🎜WeChat JSSDK-Einführung🎜🎜🎜Externe Einführung🎜🎜rrreee🎜🎜Verwenden Sie zum Laden die AMD/CMD-Standardmodullademethode🎜🎜🎜🎜 Installation🎜🎜rrreee🎜🎜Verwenden🎜🎜rrre in mian.js ee 🎜Um festzustellen, ob es sich um eine WeChat-Applet-Umgebung handelt🎜🎜Verwenden Sie userAgent
, um micromessenger
zu sein, oder window.__wxjs_environment
um es zu bestimmen🎜🎜🎜Ab WeChat 7.0.0 können Sie die Miniprogramm-Webansichtsumgebung bestimmen, indem Sie feststellen, dass der userAgent das Wort miniProgram enthält. 🎜🎜rrreee🎜sdk
eingeführt und die Umgebungsvariablen bekannt, fangen wir an. 🎜🎜Interaktives Beispiel-Applet🎜🎜🎜Erstellen Sie mithilfe der Komponenten des Applets🎜 eine neue /page/webview/index.wxml
🎜🎜🎜web-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 WeChat jsskd
senden, genau wie im nativen WeChat-Miniprogramm 🎜🎜🎜Machen Sie Routing-Sprünge🎜🎜 rrreee🎜🎜 zum Miniprogramm Daten senden🎜🎜rrreee🎜🎜Weitere Methoden🎜redirectTo
Das 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 werden redirectTo
, es wird nutzlos sein. 🎜🎜redirectTo
nicht zur aktuellen Seite
springen kann und tabBar=> unter <code>app.json
pagePath
in Liste definiert. Wenn die URL
, zu der Sie springen möchten, zufällig in pagePath
definiert 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.html🎜🎜🎜Empfohlenes Lernen: 🎜H5-Video-Tutorial🎜🎜Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Interaktion zwischen WeChat-Applet und dem Web (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!