ホームページ > 記事 > ウェブフロントエンド > WeChat アプレットと Web 間の対話 (コード共有) の簡単な分析
前回の記事「React Native と Web 間の基本的な相互作用の詳細な分析 (コード付き)」では、React Native と Web 間の相互作用について理解していただきます。ウェブ。次の記事では、WeChat アプレットと Web 間の相互作用について説明します。困っている友人は参照してください。お役に立てば幸いです。
通常、私たちは一連のアダプティブ Web プログラムを作成し、それらをさまざまな環境で使用したいと考えています。 、WeChatのミニプログラムや各種アプリ共有において、アプリを閲覧するだけであれば大きな問題はありませんが、埋め込みアプリでアプリ自体を操作したい場合は色々と手間がかかるので、この記事はこちらです。
ReactNativeを使ってみよう,
こちらをご覧ください
web-view コンポーネント
httpsservice で構成されています。 ## が有効になっています
httpsプロトコル
WeChat 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-sdkmain.js で
import wx from 'weixin-js-sdk'を使用して、WeChat アプレット環境かどうかを判断します から
micromessenger へ、または
window.__wxjs_environment から決定
WeChat 7.0.0 以降、 userAgent に miniProgram という単語が含まれているかどうかを判断することで、ミニ プログラムの Web ビュー環境を判断できます。
を導入し、環境変数を理解したところで始めましょう。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
インタラクティブなサンプル アプレット
## を作成します。 #web-view はミニ プログラム ページ全体を自動的に埋めます。個人および海外のミニ プログラムは当面サポートされません。クライアント バージョン 6.7.2 以降、navigationStyle:custom はコンポーネントでは無効です
<!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 --> <web-view src="{{url}}" bindmessage="getMessage" />
New/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 がミニ プログラム内にあるかどうかを判断する方法がわかっています。WeChat
jsskd を通じてインタラクティブな情報を直接送信できます。ネイティブ WeChat ミニ プログラム 同じ
ルーティング ジャンプを作成します
// 前面我们已经定义了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
app.json の下の
tabBar にジャンプできないため => pagePath
が list に定義されている場合、ジャンプ先の
url がたまたま
pagePath に定義されている場合は、switchTab を使用してください。
その他の API
公式 API アドレスを参照してください: https://developers.weixin .qq.com/miniprogram/dev/component/web-view.html
WeChat JS-SDK ドキュメントのアドレスを参照してください: https://developers.weixin.qq。 com /doc/offiaccount/OA_Web_Apps/JS-SDK.html推奨学習:
H5 ビデオ チュートリアル
以上がWeChat アプレットと Web 間の対話 (コード共有) の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。