WeChat HTML5 ページで共有インターフェイスを呼び出す方法

最近、同社は学生が投票するための H5 ページを作成しました。これは主に WeChat で使用され、WeChat 共有機能を追加する必要があります。この記事では主に WeChat html5 の共有インターフェイスの呼び出し例に関する関連情報を紹介します。ページが皆さんのお役に立てれば幸いです。

1. フロントエンドで使用される angular1 フレームワークの場合、まずインデックス ページに WeChat インターフェイス ファイルを導入する必要があります。2. WeChat 共有関数を myApp.run ファイルに記述します。この関数は、現在のページの URL を取得して解析し、それをバックエンドに送信して、対応する署名を生成し、コードを直接アップロードする必要があります

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

現在の URL を解析した後、バックエンド インターフェイスに送信します。バックエンドは、appId、タイムスタンプ、ランダムな文字列、署名を返す必要があります。その後、必要に応じて、共有インターフェイスを呼び出すだけであることに注意してください。デバッグ時に、debug を true に変更すると、WeChat インターフェースが呼び出されるたびにインターフェース情報のアラートが表示され、インターフェース呼び出しが正常かどうかを確認するのに便利です。

3.共有コンテンツのコードは次のとおりです。

// 微信分享函数
    function wxShare() {
        var url = $location.absUrl().split('#')[0];
            wxServices.postWxShare(url).then(function (res) {
            if (res.data.code == 0) {
                var respanse = res.data.data;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: respanse.appId,
                    timestamp: respanse.timestamp, // 必填，生成签名的时间戳
                    nonceStr: respanse.nonceStr, // 必填，生成签名的随机串
                    signature: respanse.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone']// 必填，需要使用的JS接口列表
                });
            }
        })
    }

wx.ready は wx.config の後に自動的に実行されます。コンテンツを共有するための一般的なオブジェクトを定義し、それを直接呼び出すこともできます。必要に応じて、友達、モーメント、Weibo などを共有します。詳細については、WeChat インターフェースのドキュメントを確認してください。主に共有リンクを強調します。リンクは、公式アカウントによって設定された JS 安全なドメイン名の下にある必要があります。そうでない場合は、共有できません。成功しました。

共有失敗のパフォーマンスは、共有リンク画像がカスタマイズした画像を読み込めず、共有タイトルが間違っていることです

5. 私のプロジェクトは投票用なので、クリックするたびにユーザーコードを取得する必要があります。記事を共有するだけでユーザー情報が必要ない場合は、リンクを記事のリンクに変更してください。

6. 投票カテゴリーについては、私たちと同様に、特別に扱いました。 H5 が WeChat ユーザー情報を取得するには 2 つの方法があります。1 つは WeChat 公式アカウントをフォローする方法で、もう 1 つはユーザーの公開情報を取得するように求められ、ユーザーは [OK] をクリックします。ただし、これらは両方とも WeChat の要件に従って特別な WeChat リンクに接続する必要があります。したがって、ドメイン名は WeChat に付属しており、弊社独自の公式アカウントの JS 安全なドメイン名ではありません。共有リンクの場合、ユーザー コードを取得する必要がある場合は、他の方法を使用してそれを実現する必要があります。私が使用したのは、空白のページを追加し、ページが読み込まれた後に WeChat にジャンプしてコード リンクを取得することです。 , http://dev.spbcn.org/wechat -vote-phone/redirect.html このリンクは空白のページです

wx.ready(function () {
        var obj = {
            title: 'SPBCN团体赛开始投票啦！', // 分享标题
            desc: 'SPBCN团体赛开始投票了，快来为我们加油吧！', // 分享描述
            link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
            // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
            imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享图标
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        };
        // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage(obj);

        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline(obj);

        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareQQ(obj);

        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo(obj);

        // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
        wx.onMenuShareQZone(obj);
    })

8 この方法には欠点があります。つまり、追加の空白ページが追加されます。まだ良い方法が思いつきません。メッセージを残してください。この手順を追加しない場合、共有リンクは正常に表示されます。を取得できない場合、バックエンドはユーザーを判断できず、ユーザーの投票を制限できなくなります。

以上がWeChat HTML5 ページで共有インターフェイスを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。