微信ブラウザの中のh 5ジャンプの小さいプログラム


WeChatブラウザ内のh5ジャンプウィジェット
注意事項、vue を例に
一、jssdk配置を取得し、wx.readyコールバック関数にボタンを展示する
wx.config({
      debug: false, 
      appId: data.appId, 
      timestamp: data.timestamp, 
      nonceStr: data.nonceStr, 
      signature: data.signature,
      //             
      jsApiList: ['chooseImage'],
      //       “wx-open-launch-weapp”,        “wx-open-launch-app”
      openTagList: ["wx-open-launch-weapp"], 
    });
   wx.ready(function() {
      me.showtplBtn=true;
      me.$nextTick(()=>{
         try {
            var btn = document.getElementById('launch-btn');
            btn.addEventListener('launch', function (e) {
               console.log('success');
               console.log(e);
           });
            btn.addEventListener('error', function (e) {
                console.log('fail', e);
            })
            } catch (error) {

            }
        })

    });
    wx.error(function(err) {
        me.$toast(err.errMsg);
    });

二、対応するHTMLテンプレート
注意点:
  • username: id gh_
  • path: , .html
  • vue , template script vue tempalte
  • 
            :username="appid"
            path="pages/personalInfoSub/personalInfoSub.html?type=active"
            v-if="showtplBtn"
            >
            
            
                //              
                    <style>
                        .label {
                            color: #448ce1;
                            font-size: 15px;
                            display:block;
                            text-align:center;
                             margin-top: 10px;
                            }
                    </style>
                <div class="label">     </div>
               
            
            

    三、誤報問題の解決
  • コンソールに次のエラーメッセージが表示する場合
  • .
    vconsole.min.js?aac1:10 [Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> 
            at src/views/index/index.vue
              at src/App.vue
               
  • 解決策:
  • main.js Vue.config.ignoredElements = ['wx-open-launch-weapp']
    四、いくつかの注意事項
  • 公衆番号にジャンプが必要なウィジェットをバインドする必要があります
  • jssdkの構成を取得するには、パブリックプラットフォームにセキュリティドメイン名
  • をバインドする必要があります.
  • は、インタフェースを介してjssdkの構成を取得するときにurlが必要とするときに動的に取得され、セキュリティドメイン名
  • にバインドする.
  • 微信バージョンの要求は:7.0.12以上である.システムバージョンの要件は、iOS 10.3以上、Android 5.0以上です.
  • 微信のwx-open-launch-weappimgのラベルを追加する必要がある場合、imgの経路はbase 64またはリモートアドレスである必要があり、ローカルの静的アドレス
  • ではない.
  • vueでwx-open-launch-weappサブエレメントにimgタグが含まれている場合、ループ(v-for)で画像をレンダリングすることはできません.そうしないと、画像がレンダリングされず、HTMLテンプレートに
  • と書くことができます.