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

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

WBOY

リリース： 2016-05-16 16:34:32

オリジナル

1554 人が閲覧しました

最近、私の製品を 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); //共有後のコールバック関数、一般的なものは成功とキャンセルです
}
});

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