Rumah > Artikel > hujung hadapan web > Analisis ringkas tentang interaksi antara applet WeChat dan web (perkongsian kod)
Dalam artikel sebelumnya "Analisis mendalam tentang interaksi asas antara React Native dan Web (dengan kod) ", saya akan memberi anda pemahaman tentang interaksi antara React Native dan Web. Artikel berikut akan memberi anda pemahaman tentang interaksi antara applet WeChat dan web Rakan yang memerlukan saya harap ia akan membantu anda.
Biasanya kami menulis satu set atur cara web adaptif dan mahu menggunakannya dalam pelbagai persekitaran Contohnya, dalam apl , WeChat Dalam program mini dan pelbagai perkongsian aplikasi, jika anda hanya boleh menggunakan aplikasi untuk menyemak imbas, ia bukan masalah besar, tetapi jika anda ingin berinteraksi dengan aplikasi itu sendiri dalam aplikasi terbenam, anda perlu melakukan semua jenis masalah , jadi inilah artikel ini.
Tolong masuk ReactNative
, Sila lihat di sini
Anda mesti mempunyai kebenaran pembangun terlebih dahulu
Anda mesti mempunyai pelayan dan mempunyai kebenaran untuk memuat naik fail, jika tidak pengesahan tidak akan lulus
Ia mestilah program mini perusahaan, peribadi dan program mini di luar negara tidak boleh Gunakan komponen web-view
untuk mengkonfigurasi sijil yang sah untuk nama domain anda yang berkaitan dan mendayakan perkhidmatan https
yang anda ingin akses URL mesti ditambahkan pada senarai putih nama domain perniagaan, antara muka api yang dipanggil oleh URL mesti ditambahkan pada senarai putih nama domain pelayan dan antara muka api
juga menggunakan https
protokol
Syarat di atas mesti Pada masa yang sama, kedua-duanya amat diperlukan WeChat JSSDK
Pengenalan
. Pengenalan luar
<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>
Gunakan AMD/CMD Standard modul memuatkan kaedah memuatkan
pemasangan
npm i weixin-js-sdk
dalam mian.js menggunakan
import wx from 'weixin-js-sdk'
Hakim oleh userAgent
sebagai micromessenger
, atau window.__wxjs_environment
Bermula dari WeChat 7.0.0, anda boleh menilai bahawa userAgent mengandungi Perkataan miniProgram digunakan untuk menentukan persekitaran paparan web program mini.
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"; } }); }
diperkenalkan sdk
, dan sekarang setelah kita mengetahui pembolehubah persekitaran, mari mulakan.
Menggunakan komponen applet , paparan web /page/webview/index.wxml
baharu akan mengisi keseluruhan secara automatik Pada halaman program mini, program mini peribadi dan luar negara tidak disokong pada masa ini. Bermula dari versi klien 6.7.2, navigationStyle: tersuai tidak sah untuk komponen
<!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 --> <web-view src="{{url}}" bindmessage="getMessage" />
Baharu/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, }; }, });
Di bahagian web, kami tahu bagaimana untuk menentukan sama ada web berada dalam program mini Kami boleh menghantar maklumat interaktif terus melalui WeChat jsskd
, sama seperti dalam program mini WeChat asli
Lompat laluan
// 前面我们已经定义了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"), }); }
Hantar data ke program mini
wx.miniProgram.postMessage({ data: { hello: "wrold", }, }); //web-view 则通过 bindmessage 来监听 传过来的数据
Lagi kaedah
wx.miniProgram.navigateBack(); //返回 wx.miniProgram.switchTab(); //切换底部的导航 wx.miniProgram.reLaunch(); //重新加载 wx.miniProgram.redirectTo(); //地址重定向 wx.miniProgram.getEnv(); //获取当前环境Soalan berkaitan
tidak dapat melompat walaupun anda mati Tidak kira bagaimana anda mengubahnya, ia akan berlaku? tidak boleh dilaksanakan, atau ia akan dilaksanakan dengan jayanya , masih tidak boleh melompat, walaupun anda menukarnya kepada redirectTo
, ia tidak berfungsi. redirectTo
tidak boleh melompat ke arus redirectTo
dan page
yang ditakrifkan dalam app.json
di bawah tabBar=> list
, jika anda mahu melompat ke pagePath
Ia berlaku untuk ditakrifkan dalam url
, kemudian sila gunakan switchTab. pagePath
Lagi API
Sila lihat alamat API rasmi: https://developers.weixin . qq.com/miniprogram/dev/component/web-view.html Sila rujuk alamat dokumentasi WeChat JS-SDK: https://developers.weixin.qq.com /doc/offiaccount/OA_Web_Apps/JS-SDK.htmlPembelajaran yang disyorkan:
Atas ialah kandungan terperinci Analisis ringkas tentang interaksi antara applet WeChat dan web (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!