WeChat アプレットと Web 間の対話 (コード共有) の簡単な分析

前回の記事「React Native と Web 間の基本的な相互作用の詳細な分析 (コード付き)」では、React Native と Web 間の相互作用について理解していただきます。ウェブ。次の記事では、WeChat アプレットと Web 間の相互作用について説明します。困っている友人は参照してください。お役に立てば幸いです。

バックグラウンド

通常、私たちは一連のアダプティブ Web プログラムを作成し、それらをさまざまな環境で使用したいと考えています。 、WeChatのミニプログラムや各種アプリ共有において、アプリを閲覧するだけであれば大きな問題はありませんが、埋め込みアプリでアプリ自体を操作したい場合は色々と手間がかかるので、この記事はこちらです。

ReactNativeを使ってみよう, こちらをご覧ください

アクセス条件

• 最初に必要なもの開発者の権限

• サーバーがあり、ファイルをアップロードする権限が必要です。そうでない場合は検証に合格しません。

• エンタープライズ アプレットである必要があります。個人用および海外ミニ プログラムでは、

  web-view コンポーネント

• 関連するドメイン名が有効な証明書と

  httpsservice で構成されています。 ## が有効になっています

#アクセスしたい Web サイトはビジネス ドメイン名のホワイトリストに追加する必要があり、Web サイトによって呼び出される API インターフェイスはサーバー ドメイン名のホワイトリストに追加する必要があります。 ##api
• インターフェースも使用する必要があります

  httpsプロトコル

  上記の条件は同時に満たす必要があり、それぞれが不可欠です WeChat
JSSDK

概要

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-sdk

main.js で

import wx from 'weixin-js-sdk'

を使用して、WeChat アプレット環境かどうかを判断します

から

userAgent

へ

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

を導入し、環境変数を理解したところで始めましょう。

インタラクティブなサンプル アプレット

アプレットのコンポーネントを使用して、新しい

/page/webview/index.wxml

## を作成します。 #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 がミニ プログラム内にあるかどうかを判断する方法がわかっています。WeChatjsskd

を通じてインタラクティブな情報を直接送信できます。ネイティブ 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

を実行してもジャンプできないという問題に遭遇したことはありますか? die? どうやって変更しますか? 実行されない、または実行は成功してもジャンプできないので、

redirectTo
• に変更してもダメです。

  redirectTo

  は現在の
page
• と

  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 サイトの他の関連記事を参照してください。