【移動應用開發(fā)技術】rh 利用jQuery.wechat構建微信WEB應用

【移動應用開發(fā)技術】rh利用jQuery.wechat構建微信WEB應用

這篇文章將為大家詳細講解有關rh利用jQuery.wechat構建微信WEB應用，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。jQuery.wechat，一個提供了統(tǒng)一API的、基于jQmise的jQuery.plugin。希望能多少幫助到大家。因為最近自己的產品要在微信公眾號中推廣，需要提供一些有意義的功能，于是被迫走上了支持微信這條不歸路。眾所周知，騰訊是那樣一個神奇的公司，他們的產品在商業(yè)上獲得巨大成功，但文檔真的很難令人恭維，諾大一個公眾號開發(fā)平臺，我竟然找不到真正的，關于web開發(fā)的官方文檔，有的就是個別示例，剩下的...呵呵，有一個叫開發(fā)者交流互助的東東?？赐晟厦孢@個圖后，有沒有這樣的感覺，一幫群眾拼命的想知道發(fā)生了什么，但就是沒有官方聲明！o(∩_∩)o哈哈說了這么多，趕緊入正題，本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat，一個提供了統(tǒng)一API的、基于jQmise的jQuery.plugin。希望能多少幫助到大家。首先，安裝那是相當的簡單代碼如下: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之類的延遲加載技術，想必你也是個行家，不用我再教你怎么配置了吧？使用——簡單、輕松、統(tǒng)一、爽！啟用jQuery.wechat功能$.wechat.enable();//Soeasy!因為整個插件是基于jQmise的，所以你也可以給它一個鏈：代碼如下:$.wechat.enable().done(function(){

alert('已經啟用成功');

}).fail(function(){

alert('啟用失敗');

});考慮到目前單頁技術(SPA)的廣泛應用，工具類的設計必須考慮啟用/停用機制，否則可能引起未知錯誤。隱藏/顯示菜單代碼如下:$.wechat.hideMenu();

//隱藏菜單

$.wechat.showMenu();

//顯示菜單啟用jQuery.wechat之后，就可以隨意調用如hideMenu之類的方法了，無需將其他方法寫入enable的done回調之中。jQuery.wechat的實現原理是，如果jQuery.wechat還沒有啟用成功，所有操作會進入排隊，一旦啟用成功后，則順序執(zhí)行；如果啟用失敗，則永遠不會執(zhí)行。隱藏/顯示底部工具欄$.wechat.hideToolbar();//隱藏底部工具欄$.wechat.showToolbar();//顯示底部工具欄打開掃描二維碼界面$.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'

]

//所有要在預覽模式下顯示的圖片

});獲取網絡狀態(tài)代碼如下:$.wechat.getNetworkType().done(function(response)

{

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

});response格式如下：代碼如下:network_type:wifi

wifi網絡

network_type:edge

非wifi,包含3G/2G

network_type:fail

網絡斷開連接

network_type:wwan

(2g或者3g)修改分享格式每次看到別人的app分享出來的消息都帶著精美的縮略圖、適當的標題和描述，更有甚者消息下面還跟了一行小字指出該消息是由誰發(fā)送出來的；再看看你自己分享出去的消息，一個藍色的默認空白圖片，配著不搭調的標題，會不會奇怪是什么邏輯把他們塞進去的？還好，咱們現在就來解決這個問題:代碼如下:$.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);

//分享后的回調函數，常見的有成功和取消

}

});具體參考如下截圖：該分享格式變更會影響發(fā)送給朋友、分享到朋友圈、分享到微博、發(fā)送郵件四項功能。當設置后，再點擊右上角菜單鍵打開菜單后，選擇前述四項中的任意一項，就能看到更改后的效果關閉當前頁代碼如下:$.wechat.closeWindow();停用jQuery.wechat機制代碼如