成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

通過`jQuery.wechat`構(gòu)建你的微信WEB應(yīng)用

AbnerMing / 2907人閱讀

摘要：因為最近自己的產(chǎn)品要在微信公眾號中推廣，需要提供一些有意義的功能，于是被迫走上了支持微信這條不歸路。的實現(xiàn)原理是，如果還沒有啟用成功，所有操作會進入排隊，一旦啟用成功后，則順序執(zhí)行如果啟用失敗，則永遠(yuǎn)不會執(zhí)行。

因為最近自己的產(chǎn)品要在微信公眾號中推廣，需要提供一些有意義的功能，于是被迫走上了支持微信這條不歸路。

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

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

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

首先，安裝那是相當(dāng)?shù)暮唵?/b> 
bower install --save jquery-wechat

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



  
你如果用了amd，cmd之類的延遲加載技術(shù)，想必你也是個行家，不用我再教你怎么配置了吧？
使用——簡單、輕松、統(tǒng)一、爽！ 啟用jQuery.wechat功能 
$.wechat.enable(); //So easy!

因為整個插件是基于jQuery.promise的，所以你也可以給它一個鏈：

$.wechat.enable().done(function(){
    alert("已經(jīng)啟用成功");
}).fail(function(){
    alert("啟用失敗");
});

  
考慮到目前單頁技術(shù)(SPA)的廣泛應(yīng)用，工具類的設(shè)計必須考慮啟用/停用機制，否則可能引起未知錯誤。
隱藏/顯示菜單 
$.wechat.hideMenu(); //隱藏菜單
$.wechat.showMenu(); //顯示菜單

  
啟用jQuery.wechat之后，就可以隨意調(diào)用如hideMenu之類的方法了，無需將其他方法寫入enable的done回調(diào)之中。jQuery.wechat的實現(xiàn)原理是，如果jQuery.wechat還沒有啟用成功，所有操作會進入排隊，一旦啟用成功后，則順序執(zhí)行；如果啟用失敗，則永遠(yuǎn)不會執(zhí)行。
隱藏/顯示底部工具欄 
$.wechat.hideToolbar(); //隱藏底部工具欄
$.wechat.showToolbar(); //顯示底部工具欄
打開掃描二維碼界面 
$.wechat.scanQRcode();
打開圖片預(yù)覽工具 
$.wechat.preview({
    current: "http://xxx/img/pic001.jpg",  //進入預(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分享出來的消息都帶著精美的縮略圖、適當(dāng)?shù)臉?biāo)題和描述，更有甚者消息下面還跟了一行小字指出該消息是由誰發(fā)送出來的；再看看你自己分享出去的消息，一個藍(lán)色的默認(rèn)空白圖片，配著不搭調(diào)的標(biāo)題，會不會奇怪是什么邏輯把他們?nèi)M去的？

還好，咱們現(xià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();                       //消息分享出去后，用戶點擊消息打開的鏈接地址
    },
    callback: function(response) {
        alert(response);                                         //分享后的回調(diào)函數(shù)，常見的有成功和取消
    }
});

具體參考如下截圖：

  
該分享格式變更會影響發(fā)送給朋友、分享到朋友圈、分享到微博、發(fā)送郵件四項功能。當(dāng)設(shè)置后，再點擊右上角菜單鍵打開菜單后，選擇前述四項中的任意一項，就能看到更改后的效果
關(guān)閉當(dāng)前頁 
$.wechat.closeWindow();
停用jQuery.wechat機制 
$.wechat.destroy();

  
停用后，所有功能自動重置回初始狀態(tài)

  該功能在單頁應(yīng)用(SPA)中比較常用

更多詳情，參考Github-Source

若要試用，請微信中打開jQuery.wechat-DEMO

如有問題, 大膽注冊issue

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85341.html

相關(guān)文章

  • 一份最中肯的Java學(xué)習(xí)路線+資源分享（拒絕傻逼式分享）

    摘要：因為某些原因，不方便在這里直接發(fā)送百度鏈接，關(guān)注我的微信公眾號面試通關(guān)手冊回復(fù)資源分享第一波即可領(lǐng)取。然后大家還有什么問題的話，可以在我的微信公眾號后臺面試通關(guān)手冊給我說或者加我微信，我會根據(jù)自己的學(xué)習(xí)經(jīng)驗給了說一下自己的看法。 這是一篇針對Java初學(xué)者，或者說在Java學(xué)習(xí)路線上出了一些問題（不知道該學(xué)什么、不知道整體的學(xué)習(xí)路線是什么樣的） 第一步：Java基礎(chǔ)（一個月左右） 推薦...

    hearaway 評論0 收藏0

  • PHP相關(guān)

    摘要：的機器學(xué)習(xí)庫的機器學(xué)習(xí)庫，包括算法交叉驗證神經(jīng)網(wǎng)絡(luò)等內(nèi)容。在即將到來的大會上，她將和大家分享在機器學(xué)習(xí)領(lǐng)域的全新可能。入門總結(jié)入門相關(guān)，如安裝配置基本使用等。 基于 Swoole 開發(fā) PHP 擴展 Swoole-1.9.7 增加了一個新特性，可以基于 Swoole 使用 C++ 語言開發(fā)擴展模塊，在擴展模塊中可以注冊 PHP 內(nèi)置函數(shù)和類?，F(xiàn)在可以基于 Swoole 來編寫 PHP ...

    lewinlee 評論0 收藏0

  • 前端經(jīng)典文章

    摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，...

    lowett 評論0 收藏0

  • 微信應(yīng)用號（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...

    趙春朋 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<