jQuery.wechat を使用して WeChat WEB を構築する application_jquery

最近、私の製品を WeChat パブリック アカウントで宣伝する必要があり、いくつかの意味のある機能を提供する必要があるため、WeChat をサポートすることで引き返せない道を歩まざるを得なくなりました。

皆さんが知っているように、Tencent はビジネスで大きな成功を収めた素晴らしい会社ですが、Noda のパブリック アカウント開発プラットフォームに関する本物のドキュメントを見つけるのは非常に困難です。 Web 開発に関する公式ドキュメントは個々の例にすぎず、残りは... はは、開発者交換と相互支援と呼ばれるものがあります。

上の写真を読んで、多くの人が何が起こったのかを必死に知ろうとしているのに、公式声明は何もない、と感じませんか? o(∩_∩)o はは

ここまで述べたので、すぐに本題に入りましょう。この号で私が話したいのは、私が苦労の末に書いた jQuery.wechat です。これは、統合された機能を提供する jQuery.promise をベースとした jQuery.plugin です。 API。皆さんのお役に立てれば幸いです。

まず第一に、インストールは非常に簡単です

コードをコピー コードは次のとおりです:

bower install --save jquery-wechat

bower を使わずに、Github から自分でダウンロードして解凍しても同じです。

ローディング中、水のように自然です

コードをコピー コードは次のとおりです:

amd や cmd などの遅延読み込みテクノロジを使用する場合は、その設定方法を私が教える必要はありません。

使い方 - シンプル、簡単、統一感があって楽しい！

jQuery.wechat 機能を有効にする
$.wechat.enable(); //とても簡単です!

プラグイン全体は jQuery.promise に基づいているため、チェーンを与えることもできます。

コードをコピーします コードは次のとおりです:

$.wechat.enable().done(function(){
alert('正常にアクティブ化されました');
}).fail(function(){
alert('アクティベーションに失敗しました');
});

現在のシングル ページ テクノロジ (SPA) の広範な応用を考慮すると、ツール クラスの設計では有効化/無効化メカニズムを考慮する必要があります。そうしないと、未知のエラーが発生する可能性があります。

メニューの非表示/表示

コードをコピー コードは次のとおりです:

$.wechat.hideMenu() // メニューを非表示
$.wechat.showMenu() // メニューを表示

jQuery.wechat を有効にすると、有効になった Done コールバックに他のメソッドを書き込むことなく、hideMenu などのメソッドを自由に呼び出すことができます。 jQuery.wechat の実装原則は、jQuery.wechat が正常に有効化されていない場合、すべての操作がキューに入れられ、有効化に失敗した場合には実行されません。

下部ツールバーの表示/非表示
$.wechat.hideToolbar() // 下部のツールバーを非表示にします
$.wechat.showToolbar() // 下部のツールバーを表示します

QR コード スキャン インターフェイスを開きます
$.wechat.scanQRcode();

画像プレビュー ツールを開きます

コードをコピー コードは次のとおりです:

$.wechat.preview({
現在: 'http://xxx/img/pic001.jpg', //プレビューモードに入ったら、この画像を直接表示します
URL: [
'http://xxx/img/pic001.jpg',
'http://xxx/img/pic002.jpg',
'http://xxx/img/pic003.jpg',
'http://xxx/img/pic004.jpg',
'http://xxx/img/pic005.jpg',
'http://xxx/img/pic006.jpg'
]] });

ネットワークステータスを取得

コードをコピー コードは次のとおりです:

$.wechat.getNetworkType().done(function(response) {
$('#network').text(response.split(':')[1]);
});

応答の形式は次のとおりです:

コードをコピー コードは次のとおりです:

network_type:wifi wifi ネットワーク
network_type:edge 非 Wi-Fi (3G/2G を含む)
network_type:fail ネットワーク切断
network_type:wwan (2g または 3g)

共有形式を変更する

他の人のアプリで共有されたメッセージを見るたびに、美しいサムネイル、適切なタイトル、説明が表示されます。さらに、メッセージの下にメッセージの送信者を示す小さなテキストが表示されます。あなたが共有したメッセージ、タイトルが一致しない青いデフォルトの空白の画像、それらがどのようなロジックで配置されたのか疑問に思いますか?

幸いなことに、この問題を今すぐ解決しましょう:

コードをコピー コードは次のとおりです:

$.wechat.setShareOption({
appid: 'xxxx'、 img_width: '60',
img_height: '60',
img_url: window.location.toString() 'img/demo.jpg', //サムネイル
title: 'デモ', //タイトル
Desc: '説明は $.wechat.setShareOption から設定されます', //Description
リンク: function() {
Return window.location.toString(); // メッセージが共有された後、ユーザーはメッセージが開くリンク アドレスをクリックします
}、
コールバック: function(response) {
alert(response); //共有後のコールバック関数、一般的なものは成功とキャンセルです
}
});

詳細については、次のスクリーンショットを参照してください:

今回の共有形式の変更は、友達への送信、モーメントへの共有、Weiboへの共有、メール送信の4つの機能に影響を与える。設定後、右上隅のメニューボタンをクリックしてメニューを開き、上記の 4 つの項目のいずれかを選択すると、変更の効果が表示されます

現在のページを閉じる

コードをコピー コードは次のとおりです:

$.wechat.closeWindow();

jQuery.wechat メカニズムを無効にする

コードをコピー コードは次のとおりです:

$.wechat.destroy();

無効化後、すべての機能は自動的に初期状態にリセットされます
この関数はシングル ページ アプリケーション (SPA) でよく使用されます