本期要講的就是我痛苦中掙扎徘徊後寫的jQuery.wechat，一個提供了統一API的、基於jQuery.promise的jQuery.plugin。希望能多少幫助大家。
因為最近自己的產品要在微信公眾號中推廣，需要提供一些有意義的功能，於是被迫走上了支持微信這條不歸路。
眾所周知，騰訊是那樣一個神奇的公司，他們的產品在商業上獲得巨大成功，但文檔真的很難令人恭維，諾大一個公眾號開發平台，我竟然找不到真正的，關於web開發的官方文檔，有的就是個別示例，剩下的...呵呵，有一個叫開發者交流互助的東東。
看完上面這個圖後，有沒有這樣的感覺，一幫群眾拼命的想知道發生了什麼，但就是沒有官方聲明！ o(∩_∩)o 哈哈
說了這麼多，趕緊入正題，本期要講的就是我痛苦中掙扎徘徊後寫的jQuery.wechat，一個提供了統一API的、基於jQuery .promise的jQuery.plugin。希望能多少幫助大家。
首先，安裝那是相當的簡單
程式碼如下:
bower install --save jquery-wechat
如果不用bower的，自己都從Git hub上下載、解壓縮，那也是一樣一樣滴！
加載，那也是水一樣的自然
代碼如下:
<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之類的延遲加載技術，想必你也是個行家，不用我再教你怎麼配置了吧？
使用－簡單、輕鬆、統一、爽！
啟用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)中比較常用
以上是利用jQuery.wechat建構微信WEB應用的方法程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
