微信カスタム共有リンク

微信カスタム共有リンク
微信は今、多くの会社のマーケティングの重点です.モーメンツやメッセージグループに広がるhtml 5の皆さんも毎日お会いしているかもしれませんが、微信が公式apiを更新してから、微信内のページ全体の管理が厳しくなりました.公式の共有カードは、微信生態の中で伝播しているhtml 5の静的ページの多くの重点である.しかし、多くの人が共有した画像と要約が予想に達していないことに気づきます.この文章はこれを述べて、初めて微信開発の先端の参考に供します.(実は公式の文書も詳しくなっていますが、一部の地方では公式が無視していないので、新人に穴を開けやすい)という話はここから来ています
準備が必要だ
PS:本明細書の方法は、6.0.2.58以降の微信クライアントにのみ適用されます.初期の微信はWeixinJsBridgeというオブジェクトで実現できたが、新しいバージョンはjssdkで構成する必要がある.旧版はこの非公式のAPIを参考に新版だけを話して、新旧バージョンにかかわらず.次のいくつかはコードを超えた存在であり、これらの認証がなければ、構成が正しくても正常なカスタム共有コンテンツは得られません.
1.微信が認証した公衆番号
認証されている必要があります.認証されていないか、認証が期限切れになっている場合は、微信公衆プラットフォームは使用できません.
2.届出済みドメイン名
届出済みでなければ使用できません
3.バックグラウンドサーバ
フロントページには、appId、timestamp、noncesStr、signatureなどのバックグラウンドサーバからいくつかの構成パラメータが送信される必要があります.これらのパラメータはバックグラウンドが微信公衆プラットフォームから取得したもので、バックグラウンドで協力する必要があります.そのため、1台のサーバは欠かせません.
完成したものはそろっているが,ただ開発に欠けているだけだ.
構成プロセス
1.ドメイン名のバインド
まず、共有する必要があるウェブサイトのドメイン名を微信公衆プラットフォームにバインドする必要があります.具体的な操作:まず微信公衆プラットフォームにログインして「公衆番号設定」の「機能設定」に「JSインタフェース安全ドメイン名」を記入します.
2.アクセスの取得token
パブリック番号APPID、APPSECRETを利用して、微信サーバから対応するaccess_を取得するtoken、ここはバックグラウンド開発パートナーの範囲ではあまり説明されていませんが、微信公式には既成のdamoがありますが、公式のバックグラウンドコードにはaccessがキャッシュされていないことに注意してください.tokenは、毎日の2 k回のAPI呼び出し上限をトリガーしやすく、上限になると当日認証を継続できないのでバックグラウンドは保存する必要があります
3.フロントエンド検証構成
以下はフロントエンドの友达の仕事の范囲に属して、公式サイトの上のバックグラウンドは直接ajaxを通じて直接必要なパラメータを得ることができなくて、バックグラウンドの友达に少し変えることができて、私のここはajaxを通じて直接呼び出すバックグラウンドのインタフェースで、さもなくばあなたはファイル名の接尾辞を必要とします.phpまたは.jsp. 3.1 jsファイルを導入共有するページには、微信公式のjsファイルを導入し、httpsをサポートする必要があります(ここにはピットがあります.もしあなたのページがhttpsであれば、httpsパスのjsを導入する必要があります.そうしないと素晴らしいです).

3.2 ajax パラメータフロントajax バックグラウンドのパートナーが いたインタフェースを じて、 する があるパラメータを するには、appId、timestamp、noncesStr、signatureの4つのパラメータが です.ここには があります. されているページのurlをバックグラウンドに する があります. のページを に し、urlを する があります.さもないと に たない

    var localUrl = encodeURIComponent(location.href.split('#')[0]);
    var url = "wechatShare?url=" + localUrl;
    var nonceStr,signature,timestamp,appId,shareUrl;
    $.ajax({
        url: ip() + url,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Token", getCookie("token"));
        },
        type: 'GET',
        data: '',
        dataType: "json",
        contentType: 'application/json',
        success: function (result) {
            appId = result.data.appid;
            nonceStr = result.data.nonceStr;
            signature = result.data.signature;
            timestamp = result.data.timestamp;
            shareUrl = result.data.url;   //   url       ，         
        },
        error: function (err) {
            errorCallback(err);
        },
    });

3.3マイクロ configインタフェースによる

wx.config({
     debug: false,   //    false   true        ，      
     appId: appId,
     timestamp: timestamp,
     nonceStr: nonceStr,
     signature: signature,
     jsApiList: [
          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ',
          'onMenuShareWeibo'
     ]
});

3.4カスタム コンテンツの

window.share_config = {
     'share': {
          'imgUrl': 'https://www.jing-cloud.com/images/logo_share.png',  //           
          'desc': '           ，            ，       ',  //          
          'title' : '    -       ',   //            
          'link': shareUrl,   //         
          'success':function(rr){
                console.log('  ' + JSON.stringify(rr))
          },
          'cancel': function (tt) {
                console.log('  ' + JSON.stringify(tt));
          }
     }
};
wx.ready(function () {
     wx.onMenuShareAppMessage(share_config.share);  //     
     wx.onMenuShareTimeline(share_config.share);    //      
     wx.onMenuShareQQ(share_config.share);          // QQ
});

に jssdk ドキュメントを します