uniapp プロジェクト実践のまとめ (20) URLScheme プロトコルの知識のまとめ

プログラミング 2023-10-04 19:34:16 訪問数: null

はじめに: 日々の開発プロセスでは、アプリケーションの起動、APP を開いてウェイクアップ、チェーン内でのアプリケーションの起動など、多くのシナリオに遭遇することがよくありますが、その背景には URLScheme プロトコルの関連知識があります。

目次

  • 導入
  • 共通の URL スキーム
  • ジャンプ方法
  • 実践的な演習
  • ケースディスプレイ

導入

URL スキームは、APP が相互にジャンプできるようにするプロトコルです。各 APP には独自の URL スキームがあります。同じ URL スキームが存在する場合、最初にインストールされた APP が最初にジャンプされ、後でインストールされた APP は上書きされます。

プロトコルフォーマット

[scheme]://[host][:port]/[/path]?[query]

  • スキーム: 開発者によってカスタマイズされたプロトコル名
  • ホスト:ドメイン名
  • ポート:ポート
  • パス: ページパス
  • クエリ: リクエストパラメータ

たとえばタオバオ:taobao://

装備判定

// 游览器标识
const ua = navigator.userAgent.toLowerCase();

// 是否微信内
const isWeixin = ua.indexOf("micromessenger") !== -1;

// 是否android终端
const isAndroid = /(Android)/i.test(ua);

// 是否ios终端
const isIOS = /(iPhone|iPad|iPod|iOS|Mac)/i.test(ua);

共通の URL スキーム

アプリケーション市場

  • マーケットGoogle Playストア
  • tmastアプリケーションの宝物
  • mimarketXiaomi _
  • サムスンアプリSamsung _
  • ファーウェイファーウェイ_
  • オッポマーケットオッポ
  • ビボマーケットビボ
  • itms-apps ios

電子商取引

  • タオバオタオバオ
  • tmallTmall _
  • jdloginJD.com _
  • ピンドゥオドゥオピンドゥオデュオ_
  • カオラNetEase カオラ
  • yanxuan NetEase 厳選
  • ビップショップ
  • 蘇寧蘇寧_
  • mishopv1Xiaomiモール
  • ワイヤレス1688アリババ

ソーシャル、コミュニティ

  • 微博微博
  • ジフジフ_
  • xhsdiscover小紅書
  • モモチャトモモ_
  • 青っぽい_
  • mqzone QQスペース
  • mqqQQ _
  • たんたんぷたんたん_
  • フプティユフプ_
  • com.baidu.tiebaティエバ
  • 天ニャティアンヤコミュニティ_
  • ドゥバンドゥバン
  • すぐにジーク

短いビデオ

  • snssdk1128ドゥイン
  • snssdk1112火山
  • snssdk32スイカのビデオ
  • gifshowkuaishou _

ビデオ/ライブブロードキャスト

  • tenvideoテンセントビデオ
  • ようくようく_
  • ビリビリBステーション
  • imgotvマンゴーテレビ
  • qiyi-iphone iQiyi
  • ハンジュ韓国ドラマTV
  • ドゥユーテレビベタ
  • イキウィフヤ_

画像処理

  • mtxx.open美しい写真ショー
  • ファセウファセウ国内
  • 青岩国内のような

情報

  • snssdk141今日のヘッドライン
  • ニュースアプリネットイーズニュース
  • qqnewsテンセントニュース
  • イチンヒマラヤ_
  • Weread WeChat の読書
  • jianshu 简书
  • igetAppget _
  • 空気感クイックリードコミック

ファイナンス

  • 新浪ニュース新浪金融
  • アミヘキシンフラッシュ株取引

音楽

  • オルフェウスNetEase クラウド ミュージック
  • qqミュージック qqミュージック
  • kugouURLkugou _
  • qmkege国民的Kソング
  • チャンバを歌う

道具

  • イオサマップ高徳地図
  • 百度地図百度地図
  • baiduyun百度ネットワークディスク
  • rm434209233MojiWeatherインク天気

オフィス

  • wxworkエンタープライズ WeChat
  • ディントークディントーク

人生

  • 美団美団
  • ディアンピンのレビュー
  • Cainiao初心者ラップ
  • wbmain 58 市全体
  • mihomeミジア_

飲食

  • キッチン_
  • sbuxcnスターバックスチャイナ
  • 美団ワイマイ美団テイクアウト

スポーツ健康

  • fb370547106731052シャオミスポーツ
  • meetsyou.linggan美柚
  • ベビーツリーベビーツリー
  • 維持する

旅行

  • シートリップワイヤレスシートリップ_
  • ディディタシディディ
  • 淘宝旅行空飛ぶ豚
  • トラベルガイドマフェンウォ_

ゲーム

  • tencent1104466820栄光の王
  • tencent100689805天天内が排除
  • tencent382 QQ 家主

ジャンプ方法

アプリケーション間を移動する方法

uniapp Jump アプリケーションを開く一般的な方法は次のとおりです。

// 启动app
function startApp(url) {
    
    
  // #ifdef H5
  window.open(url);
  // #endif
  // #ifdef APP-PLUS
  if (plus) {
    
    
    plus.runtime.openURL(url, (res) => {
    
    
      console.log("res:", res);
    });
  }
  // #endif
}

uniapp アプリケーションはmanifest.json構成ファイルで設定できます。

//...
{
    
    
  "app-plus": {
    
    
    "distribute": {
    
    
      "android": {
    
    
        "schemes": "hello"
      }
    }
  }
}
//...

WeChat アプレットにジャンプ

  • URL スキーム: ミニ プログラムのスキーム コードを取得するために使用されます。ミニ プログラムがテキスト メッセージ、電子メール、外部 Web ページ、WeChat などを通じて起動されるビジネス シナリオに適しています。現在、国内のミニ プログラムにのみ公開されています。個人的な主題ではありません。

  • URL リンク: ミニ プログラムの URL リンクを取得します。これは、テキスト メッセージ、電子メール、Web ページ、WeChat などを介してミニ プログラムを開始するビジネス シナリオに適しています。現在、非個人主体の国内ミニ プログラムにのみ公開されています。

  • ショート リンク: WeChat でミニ プログラムを起動するビジネス シナリオに適したミニ プログラムのショート リンクを取得します。現在、e コマース カテゴリ (具体的には、e コマース プラットフォーム、マーチャントの自主運営、国境を越えた e コマースの次の第 1 レベル カテゴリが含まれます) に対してのみ公開されています。このインターフェイスを通じて、期限切れで永続的に有効なミニ プログラムの短いリンクを生成することを選択できます。

  • wx-open-launch-weapp : 指定されたアプレットにジャンプできるボタンをページ上に提供するために使用されます。このタグを使用した後、ユーザーは Web ページのタグ ボタンをクリックしてミニ プログラム、認定サービス アカウントおよび認定非個人対象ミニ プログラムにジャンプする必要があります。

WeChat オープンラベル

  • ドメイン名をバインドする：WeChatパブリックプラットフォームにログインし、「公式アカウント設定」の「機能設定」に入り、「JSインターフェースセキュリティドメイン名」を入力します。

  • JS ファイルの導入: 次の JS ファイルhttps://res2.wx.qq.com/open/js/jweixin-1.6.0.jsを、JS インターフェイスを呼び出す必要があるページに導入します。これは、AMD/ を使用した読み込みをサポートします。 CMD標準モジュールのロード方法。

  • 構成インターフェイスを介して権限検証構成を挿入し、必要なオープン タグを適用します。オープン タグを使用する必要があるすべてのページは、最初に構成情報を挿入し、openTagList フィールドを介して必要なオープン タグを適用する必要があります。そうしないと、その情報を使用できなくなります (同じ URL を呼び出す必要があるのは 1 回だけです)。

  • 構成の取得

function getConfig () {
    
    
  wx.config({
    
    
    debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [], // 必填，需要使用的 JS 接口列表
    openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
  });

  // 验证通过
  wx.ready(function () {
    
    
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中

  });

  wx.error(function (res) {
    
    
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
  });
}
  • ページ埋め込みタグ
<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc">
  <script type="text/wxtag-template">
    <style>.btn {
      
       padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>

// 点击跳转操作
let btn = document.getElementById("launch-btn");
btn.addEventListener("launch", function (e) {
    
    
  console.log("success");
});
btn.addEventListener("error", function (e) {
    
    
  console.log("fail", e.detail);
});

注: エラーが報告された場合、WeChat にブラウザ環境が組み込まれているかどうかを判断し、スクリプト タグを動的に追加して Web ページに埋め込むことができる場合があります。

async function addOpenScript() {
    
    
  const ua = navigator.userAgent.toLowerCase();
  const isWxwork = ua.match(/wxwork/i) == "wxwork";
  const isWeixin = !isWxwork && ua.match(/micromessenger/i) == "micromessenger";
  if (isWeixin) {
    
    
    const wxOpen = document.createElement("script");
    wxOpen.type = "text/javascript";
    wxOpen.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js";
    wxOpen.onload = getConfig;
    document.body.appendChild(wxOpen);
  }
}
URLスキーム
  • 通話インターフェース
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
  • 正常に戻りました
{
    
    
 "errcode": 0,
 "errmsg": "ok",
 "openlink": Scheme,
}
URLリンク
  • 通話インターフェース
POST https://api.weixin.qq.com/wxa/generate_urllink?access_token=ACCESS_TOKEN
  • 正常に戻りました
{
    
    
  "errcode": 0,
  "errmsg": "ok",
  "url_link": "URL Link"
}
ショートリンク
  • 通話インターフェース
POST https://api.weixin.qq.com/wxa/genwxashortlink?access_token=ACCESS_TOKEN
  • 正常に戻りました
{
    
    
  "errcode": 0,
  "errmsg": "ok",
  "link": "Short Link"
}

実践的な演習

効果を確認するために簡単なページを作成してみましょう。

テンプレートセクション

<view class="openapp-box">
  <!-- #ifdef H5 -->
  <button class="openapp-item" @click="openApp">打开谷歌应用市场</button>
  <!-- #endif -->
  <!-- #ifdef APP-PLUS -->
  <button class="openapp-item" @click="openApp">打开谷歌应用市场</button>
  <!-- #endif -->
</view>

スタイル部分

.openapp-box {
  box-sizing: border-box;
  padding: 30rpx;
  .openapp-item {
    margin-bottom: 30rpx;
  }
}

スクリプト部分

// 打开app
function openApp() {
    
    
  let url = "market://details?id=dev.hello";
  proxy.$apis.utils.startApp(url);
}

ケースディスプレイ

  • H5末

ここに画像の説明を挿入します

URL スキーム プロトコル アドレスが存在しない場合は、エラーが報告されます。

ここに画像の説明を挿入します

  • アプリ側

ここに画像の説明を挿入します

やっと

以上が URLScheme プロトコル知識まとめの主な内容ですが、不足があればご指摘ください。

おすすめ

転載: blog.csdn.net/fed_guanqi/article/details/133185379
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com