通過`jQuery.wechat`構建你的微信WEB應用

AbnerMing 發布于2019-08-21 10:20 / 2899人閱讀

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

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

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

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

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

首先，安裝那是相當的簡單

bower install --save jquery-wechat

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

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

你如果用了amd，cmd之類的延遲加載技術，想必你也是個行家，不用我再教你怎么配置了吧？

使用——簡單、輕松、統一、爽！ 啟用jQuery.wechat功能

$.wechat.enable(); //So easy!

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

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

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

隱藏/顯示菜單

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

啟用jQuery.wechat之后，就可以隨意調用如hideMenu之類的方法了，無需將其他方法寫入enable的done回調之中。jQuery.wechat的實現原理是，如果jQuery.wechat還沒有啟用成功，所有操作會進入排隊，一旦啟用成功后，則順序執行；如果啟用失敗，則永遠不會執行。

隱藏/顯示底部工具欄

$.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"
    ]                                      //所有要在預覽模式下顯示的圖片
});

獲取網絡狀態

$.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分享出來的消息都帶著精美的縮略圖、適當的標題和描述，更有甚者消息下面還跟了一行小字指出該消息是由誰發送出來的；再看看你自己分享出去的消息，一個藍色的默認空白圖片，配著不搭調的標題，會不會奇怪是什么邏輯把他們塞進去的？

還好，咱們現在就來解決這個問題:

$.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);                                         //分享后的回調函數，常見的有成功和取消
    }
});

具體參考如下截圖：

該分享格式變更會影響發送給朋友、分享到朋友圈、分享到微博、發送郵件四項功能。當設置后，再點擊右上角菜單鍵打開菜單后，選擇前述四項中的任意一項，就能看到更改后的效果

關閉當前頁

$.wechat.closeWindow();

停用jQuery.wechat機制

$.wechat.destroy();

停用后，所有功能自動重置回初始狀態
該功能在單頁應用(SPA)中比較常用

更多詳情，參考Github-Source

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

如有問題, 大膽注冊issue

云服務器 GPU云服務器我怎樣綁定老公的微信免費的微信小程序怎么盜取別人的微信密碼免費的微信防封域名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85341.html

一份最中肯的Java學習路線+資源分享（拒絕傻逼式分享）

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

hearaway 2019-08-15 18:05 評論0 收藏0
PHP相關

摘要：的機器學習庫的機器學習庫，包括算法交叉驗證神經網絡等內容。在即將到來的大會上，她將和大家分享在機器學習領域的全新可能。入門總結入門相關，如安裝配置基本使用等。基于 Swoole 開發 PHP 擴展 Swoole-1.9.7 增加了一個新特性，可以基于 Swoole 使用 C++ 語言開發擴展模塊，在擴展模塊中可以注冊 PHP 內置函數和類。現在可以基于 Swoole 來編寫 PHP ...

lewinlee 2019-06-28 14:39 評論0 收藏0
前端經典文章

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

lowett 2019-08-22 13:58 評論0 收藏0
微信應用號（小程序）資源匯總（1010更新）

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

趙春朋 2019-08-29 11:20 評論0 收藏0