快捷導(dǎo)航

使用jQuery.wechat構(gòu)建微信WEB應(yīng)用

更新時(shí)間：2014年10月09日 09:17:30 投稿：hebedich

本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat，一個(gè)提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。

因?yàn)樽罱约旱漠a(chǎn)品要在微信公眾號(hào)中推廣，需要提供一些有意義的功能，于是被迫走上了支持微信這條不歸路。

眾所周知，騰訊是那樣一個(gè)神奇的公司，他們的產(chǎn)品在商業(yè)上獲得巨大成功，但文檔真的很難令人恭維，諾大一個(gè)公眾號(hào)開發(fā)平臺(tái)，我竟然找不到真正的，關(guān)于web開發(fā)的官方文檔，有的就是個(gè)別示例，剩下的...呵呵，有一個(gè)叫開發(fā)者交流互助的東東。

看完上面這個(gè)圖后，有沒有這樣的感覺，一幫群眾拼命的想知道發(fā)生了什么，但就是沒有官方聲明！o(∩_∩)o 哈哈

說(shuō)了這么多，趕緊入正題，本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat，一個(gè)提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。

首先，安裝那是相當(dāng)?shù)暮?jiǎn)單

復(fù)制代碼代碼如下:

bower install --save jquery-wechat

如果不用bower的，自己從Github上下載、解壓，那也是一樣一樣滴！

加載，那也是水一樣的自然

復(fù)制代碼代碼如下:

<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之類的延遲加載技術(shù)，想必你也是個(gè)行家，不用我再教你怎么配置了吧？

使用——簡(jiǎn)單、輕松、統(tǒng)一、爽！

啟用jQuery.wechat功能
$.wechat.enable(); //So easy!

因?yàn)檎麄€(gè)插件是基于jQuery.promise的，所以你也可以給它一個(gè)鏈：

復(fù)制代碼代碼如下:

$.wechat.enable().done(function(){

    alert('已經(jīng)啟用成功');

}).fail(function(){

    alert('啟用失敗');

});

考慮到目前單頁(yè)技術(shù)(SPA)的廣泛應(yīng)用，工具類的設(shè)計(jì)必須考慮啟用/停用機(jī)制，否則可能引起未知錯(cuò)誤。

隱藏/顯示菜單

復(fù)制代碼代碼如下:

$.wechat.hideMenu(); //隱藏菜單

$.wechat.showMenu(); //顯示菜單

啟用jQuery.wechat之后，就可以隨意調(diào)用如hideMenu之類的方法了，無(wú)需將其他方法寫入enable的done回調(diào)之中。jQuery.wechat的實(shí)現(xiàn)原理是，如果jQuery.wechat還沒有啟用成功，所有操作會(huì)進(jìn)入排隊(duì)，一旦啟用成功后，則順序執(zhí)行；如果啟用失敗，則永遠(yuǎn)不會(huì)執(zhí)行。

隱藏/顯示底部工具欄
$.wechat.hideToolbar(); //隱藏底部工具欄
$.wechat.showToolbar(); //顯示底部工具欄

打開掃描二維碼界面
$.wechat.scanQRcode();

打開圖片預(yù)覽工具

復(fù)制代碼代碼如下:

$.wechat.preview({

    current: 'http://xxx/img/pic001.jpg',  //進(jìn)入預(yù)覽模式后，直接顯示這張圖片

    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'

    ]                                      //所有要在預(yù)覽模式下顯示的圖片

});

獲取網(wǎng)絡(luò)狀態(tài)

復(fù)制代碼代碼如下:

$.wechat.getNetworkType().done(function(response) {

    $('#network').text(response.split(':')[1]); 

});

response格式如下：

復(fù)制代碼代碼如下:

network_type:wifi    wifi網(wǎng)絡(luò)

network_type:edge    非wifi,包含3G/2G

network_type:fail    網(wǎng)絡(luò)斷開連接

network_type:wwan    (2g或者3g)

修改分享格式

每次看到別人的app分享出來(lái)的消息都帶著精美的縮略圖、適當(dāng)?shù)臉?biāo)題和描述，更有甚者消息下面還跟了一行小字指出該消息是由誰(shuí)發(fā)送出來(lái)的；再看看你自己分享出去的消息，一個(gè)藍(lán)色的默認(rèn)空白圖片，配著不搭調(diào)的標(biāo)題，會(huì)不會(huì)奇怪是什么邏輯把他們?nèi)M(jìn)去的？

還好，咱們現(xiàn)在就來(lái)解決這個(gè)問題:

復(fù)制代碼代碼如下:

$.wechat.setShareOption({

    appid: 'xxxx',                                               //小標(biāo)appid

    img_width: '60',

    img_height: '60',

    img_url: window.location.toString() + 'img/demo.jpg',        //縮略圖

    title: 'DEMO',                                               //標(biāo)題

    desc: 'The description is set from $.wechat.setShareOption', //描述

    link: function() {

        return window.location.toString();                       //消息分享出去后，用戶點(diǎn)擊消息打開的鏈接地址

    },

    callback: function(response) {

        alert(response);                                         //分享后的回調(diào)函數(shù)，常見的有成功和取消

    }

});

具體參考如下截圖：

該分享格式變更會(huì)影響發(fā)送給朋友、分享到朋友圈、分享到微博、發(fā)送郵件四項(xiàng)功能。當(dāng)設(shè)置后，再點(diǎn)擊右上角菜單鍵打開菜單后，選擇前述四項(xiàng)中的任意一項(xiàng)，就能看到更改后的效果

關(guān)閉當(dāng)前頁(yè)

復(fù)制代碼代碼如下:

$.wechat.closeWindow();

停用jQuery.wechat機(jī)制

復(fù)制代碼代碼如下:

$.wechat.destroy();

停用后，所有功能自動(dòng)重置回初始狀態(tài)
該功能在單頁(yè)應(yīng)用(SPA)中比較常用

您可能感興趣的文章: