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

今回は、WeChat側のh5ページで共有ページのインターフェースを呼び出す方法を説明します。WeChat側のh5ページを使用して共有ページのインターフェースを呼び出すときの注意事項は何ですか。以下は実際的なケースです。一見。

最近、会社は学生が投票するためのH5ページを作成しました。これは主にWeChatで使用され、WeChat共有機能を追加する必要があります。

この記事は主にWeChatに電話するときに注意する必要がある事項を記録しています。共有インターフェイス;

1. angular1 フレームワークの場合、最初に WeChat インターフェイス ファイルを myApp.run ファイルに記述する必要があります。この関数は、現在のページの URL を取得して解析し、それをバックエンドに送信して、対応するコードを生成する必要があります。

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

は、現在の URL を解析してバックエンド インターフェイスに送信します。バックエンドは、appId、タイムスタンプ、ランダムな

string

および署名を返し、必要に応じてインターフェイス リスト (jsApiList) を手動で追加する必要があります。これは配列の形式であることに注意してください。ここで共有インターフェイスを呼び出すだけで済みます。

デバッグ時に、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 の後に自動的に実行されます。 コンテンツを共有するための共通オブジェクトを定義し、それを直接呼び出すか、友人やサークルを共有するための別のコンテンツを定義できます。詳細については、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。追加の空白のページはまだ思いつきません。どなたでもメッセージを残してください。この手順を追加しないと、共有リンクが表示されますが、コードが取得できない場合は、バックエンドはユーザーを判断できないため、ユーザーの投票を制限できなくなります。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトにアクセスしてください。 ！

推奨読書:

h5 は複数の画像プレビューのアップロードとクリック可能なドラッグ コントロールを実装します

フロントエンド テクノロジーはテキスト テクスチャ オーバーレイを実装します

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