微信ブラウザ内h 5直接起動appの微信開放ラベルwx-open-launch-app

25012 ワード

以前、微信ブラウザ内でappを直接呼び覚ますか、微信のアプリ宝を受け取るか、テンセントの息子だったか.
微信は2020年5月に「微信オープンラベル」機能を発売した.
wx-open-launch-appは、微信ブラウザ内でappを直接起動するために使用され、パラメータを携帯することによってapp対応の内ページに直接アクセスすることもできる.
現在は息子ではなく、規定に従って微信SDKにアクセスすれば、この機能を直接使用することができます.

一、適用環境
微信バージョンの要求は:7.0.12以上です.システムバージョンの要件は、iOS 10.3以上、Android 5.0以上

二、アクセス微信JS-SDK
WeChat JS-SDKの要求に従ってセキュリティドメインをバインドし、configインタフェースを通じて権限を注入して構成を検証する

wx.config({
    appId: '',
    debug: true,
    timestamp: '',
    nonceStr: '',
    signature: '',
    jsApiList: [
        'onMenuShareTimeline', //      
        'onMenuShareAppMessage', //       
    ],
    openTagList: ['wx-open-launch-app’] //         
});

注意点:
1、オープンプラットフォームの要求に合う
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html
2、appはアクセス微信sdkによってhttps://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html
3、wx.config内に使用したopenTagListをリストします

WeChat開発者ツールでWebテストを開くと表示されます.

{errMsg: "config:ok”}

JS-SDKにアクセスできました
残念なことに、2020年7月13日現在、微信開発者ツールは微信オープンラベルのデバッグ機能をサポートできず、携帯電話でデバッグし、微信セキュリティドメイン名を付けたサーバ環境でデバッグするしかなく、面倒である.

三、VUEプロジェクト内でwx-open-launch-appを使用する
wx-open-launch-appというラベルはVUEプロジェクトのコンパイル時に認識できないため、main.jsファイルにエラーを無視するコードを付ける

//               
Vue.config.ignoredElements = [
    'wx-open-launch-app',
];

new Vue({

    el: '#app',

    template: '',

    components: { app }
})

wx-open-launch-appラベルコンポーネント

app
    :id="id"
    class="launch-btn"
    :appid="appId"
    :extinfo="extinfoStr"
    >
    
        <style>.btn {height: 96px;}</style>
        <div class="btn">  app</div>

に注意
1、ラベル内の本来のslotは<
script type="text/wxtag-template”>
2、テストした結果、ラベル内に定義されたスタイルは本当に気まずくて、コントロールされていないことが分かったので、ラベルをCSSで絶対的に位置決めし、透明度をopacity:0に設定し、私たちの元の設計図に蓋をしました.
3、透明度opacity:0のラベル
<span style="font-family: Courier;">空にすることはできません.そうしないと、幅が0に解析されます.つまり、ボタンが全然クリックできません.</span>
</div>
<div>
<span style="font-family: Courier;">4、ラベル内のappidは</span>
<strong><span style="font-family: Courier;"> </span></strong>
<span style="font-family: Courier;">微信公衆番号に記入したあなた方のappのappid</span>
</div>
<div>
<span style="font-family: Courier;">5、</span>extinfoにはappを喚起するデータが入力されていますが、私たちは微信7.0.15バージョンがios上で、データの受信に失敗する確率があることを発見しました.微信の問題なのか、IOSの書き方の問題なのか分かりません.
</div>
<div>
6.VUEのmountedライフサイクルコールバック関数内でオープンタグのコールバックイベントをリスニングする
</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: #000000;">mounted(){
</span><span style="color: #0000ff;">var</span> btn = document.getElementById(<span style="color: #0000ff;">this</span><span style="color: #000000;">.id)
btn.addEventListener(</span>'launch', e =><span style="color: #000000;"> {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> ここでは、appに渡されるパラメータ入力、</span>
console.log('success'<span style="color: #000000;">);
});
btn.addEventListener(</span>'error', e =><span style="color: #000000;"> {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> ここでは、appに渡されるパラメータ入力、</span>
console.log('fail'<span style="color: #000000;">, e.detail);
</span><span style="color: #008000;">//</span><span style="color: #008000;"> 起動に失敗した場合、ここでアプリケーション宝<にジャンプするなどのダウングレード処理に使用できます./span>
<span style="color: #000000;"> });
}</span></pre>
</div>
<p> 7、もし微信バージョンが7.0.12以下であれば、オープンラベルは使用できないので、オープンラベルコートのDIVでイベントをクリックするために使用したほうがいい.イベント中断区間で微信バージョン番号が低ければ、アプリケーション宝などの方案<に降格する./p>
<div class="cnblogs_code">
<pre><div @click="launch">
<wx-open-launch-<span style="color: #000000;">app
:id</span>="id"<span style="color: #000000;">
class</span>="launch-btn"<span style="color: #000000;">
:appid</span>="appId"<span style="color: #000000;">
:extinfo</span>="extinfoStr"
>
<script type="text/wxtag-template">
<style>.btn {height: 96px;}</style>
<div class="btn">app</を開くdiv>

launch(){
    //             ，       app     
    if(!this.enable){
        //          
    }
}

四、最後はもちろんプロジェクトにパッケージされたコンポーネントです.

<template>
  <div @click="launch">
    <wx-open-launch-app
        :id="id"
        class="launch-btn"
        :appid="appId"
        :extinfo="extinfoStr" 
      >
      <script type="text/wxtag-template">
        <style>.btn {height: 96px;}</style>
        <div class="btn">  app</div>
      script>
    wx-open-launch-app>
  div>
template>
<script>
  import globalConfig from '@assets/js/config'
  import { copyToClipboard } from '@assets/js/utils'
  import { getWeixinVersion, onBridgeReady } from '@assets/js/weixin/weixin'
  
  let idIndex = 0
  export default {
    name: 'LaunchButton',
    props: {
      extinfo: {
        type: Object,
        default: ''
      },
    },
    watch: {
      extinfo: {
        handler(n){
          this.extinfoStr = JSON.stringify(n)
        },
        immediate: true
      }
    },
    data() {
      idIndex++
      return {
        id: 'wxopenLanchAppId' + idIndex,
        appId: globalConfig.WEIXIN_APP_ID,
        enable: false,
        extinfoStr: '',
      }
    },
    methods: {
      redirectToApp(){
        setTimeout(()=>{
          window.location.href = globalConfig.YING_YONG_BAO
        }, 400)
      },
      setClipboard(){
        console.log('start copy')
        let copyObject = {
          app: 'yogo'
        }
        for(var k in this.extinfo){
          copyObject[k] = this.extinfo[k]
        }
        copyObject = JSON.stringify(copyObject)

        copyToClipboard(copyObject)
        console.log('end copy')
      },
      launch(){
        this.setClipboard()
        if(!this.enable){
          this.redirectToApp()
        }
      }
    },
    created(){
      //         7.0.12             app   
      const wxVersion = getWeixinVersion()
      if(wxVersion){
        let v = wxVersion.split('.')
        if(v[0]>=7){
          if(v[1]>=0){
            if(v[2]>=12){
              this.enable = true
            }
          }
        }
      }
    },
    mounted(){
      var btn = document.getElementById(this.id)
      btn.addEventListener('launch', e => {
        this.setClipboard()
        console.log('success');
      });
      btn.addEventListener('error',  e => {
        console.log('fail', e.detail);
        this.setClipboard()
        this.redirectToApp()
      });
    }
  }
script>
<style lang="scss" scoped>
  .launch-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    // background: red;
  }
style>

五、参考微信公式リンク
アクセスガイド
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html
微信内ホームページジャンプapp機能
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html
JS-SDK使用手順
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
オープンラベルの説明
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
注:転載は出典ブログ園:sheldon([email protected])
https://github.com/willian12345

[Vue.js] 3. インスタンス&構成部品

[伯俊]JS-#10998 A×B