jQuery.wechatを使用してWeChat WEBアプリケーションを構築するためのメソッドコード

今回説明するのは、私が苦労の末に書いた jQuery.wechat です。これは、統合された API を提供する、jQuery.promise をベースにした jQuery.plugin です。これが皆さんのお役に立てば幸いです。

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

ご存知のとおり、Tencent はビジネスで大きな成功を収めた素晴らしい会社ですが、パブリック アカウント開発プラットフォームとしては、ウェブに関する本物のドキュメントを見つけることができません。開発された公式ドキュメントの一部は単なる例であり、残りは... はは、開発者交換と相互支援と呼ばれるものがあります。

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

ということで、早速本題に入りますが、私が苦労して書いた jQuery.wechat という、jQuery をベースにした jQuery についてです。統合された API を提供する Promise。これが皆さんのお役に立てば幸いです。

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

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

bower install --save jquery-wechat

bowerを使用しない場合は、Githubから自分でダウンロードして解凍することもできますが、同じです!

読み込みは水のように自然です

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

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-wechat/dist/jquery-wechat.min.js"></script>

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({
    current: 'http://xxx/img/pic001.jpg',  //进入预览模式后，直接显示这张图片
    urls: [
        '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    非wifi,包含3G/2G
network_type:fail    网络断开连接
network_type:wwan    (2g或者3g)

変更された共有形式

他の人のアプリで共有されたメッセージを見るたびに、美しいサムネイル、適切なタイトルと説明、さらにはメッセージの下に、メッセージの送信者を示す小さなテキストが表示されます。タイトルが一致しない青いデフォルトの画像を見てください。

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

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

$.wechat.setShareOption({
    appid: 'xxxx',                                               //小标appid
    img_width: '60',
    img_height: '60',
    img_url: window.location.toString() + 'img/demo.jpg',        //缩略图
    title: 'DEMO',                                               //标题
    desc: 'The description is set from $.wechat.setShareOption', //描述
    link: function() {
        return window.location.toString();                       //消息分享出去后，用户点击消息打开的链接地址
    },
    callback: function(response) {
        alert(response);                                         //分享后的回调函数，常见的有成功和取消
    }
});

具体的な参照については、以下のスクリーンショットを参照してください:

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

現在のページを閉じます

コードは次のとおりです。

$.wechat.closeWindow();

jQuery を無効にします。wechat メカニズム

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

$.wechat.destroy();

非アクティブ化後、すべての機能は自動的に初期状態に戻ります
この機能はシングル ページ アプリケーション (SPA) でよく使用されます

以上がjQuery.wechatを使用してWeChat WEBアプリケーションを構築するためのメソッドコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。