您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)rh 利用jQuery.wechat構(gòu)建微信WEB應(yīng)用,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
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)單
代碼如下:
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之類的延遲加載技術(shù),想必你也是個(gè)行家,不用我再教你怎么配置了吧?
使用——簡(jiǎn)單、輕松、統(tǒng)一、爽!
啟用jQuery.wechat功能
$.wechat.enable(); //So easy!
因?yàn)檎麄€(gè)插件是基于jQuery.promise的,所以你也可以給它一個(gè)鏈:
代碼如下:
$.wechat.enable().done(function(){ alert('已經(jīng)啟用成功'); }).fail(function(){ alert('啟用失敗'); });
考慮到目前單頁(yè)技術(shù)(SPA)的廣泛應(yīng)用,工具類的設(shè)計(jì)必須考慮啟用/停用機(jī)制,否則可能引起未知錯(cuò)誤。
隱藏/顯示菜單
代碼如下:
$.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ù)覽工具
代碼如下:
$.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)
代碼如下:
$.wechat.getNetworkType().done(function(response) { $('#network').text(response.split(':')[1]); });
response格式如下:
代碼如下:
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è)問(wèn)題:
代碼如下:
$.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è)
代碼如下:
$.wechat.closeWindow();
停用jQuery.wechat機(jī)制
代碼如下:
$.wechat.destroy();
停用后,所有功能自動(dòng)重置回初始狀態(tài)
該功能在單頁(yè)應(yīng)用(SPA)中比較常用
關(guān)于“rh 利用jQuery.wechat構(gòu)建微信WEB應(yīng)用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。