（邏輯和表達能力不強，或許只有我自己才能看懂吧？/捂臉）
大寫的壹——技術知識點學習
一、http://jqweui.com/extends#infinite ——JQuery WEUI
在這里也不詳細說了，功能很多，如果寫的話能寫好幾章……下面列出一些主要功能：
表單，文件上傳，加載提示，搜索欄，加載更多，下拉刷新，滾動加載，圖片瀏覽器，日歷日期時間控件，地址控件，通知控件，下拉框控件，彈出框
二、http://lbs.qq.com/javascript_v2/index.html ——騰訊地圖導航接口文檔
三、http://lbsyun.baidu.com/index.php?title=jspopular/guide/routeplan ——百度地圖導航接口文檔，實現距離計算。示例：http://lbsyun.baidu.com/jsdemo.htm#i5_5
四、文件上傳ajaxfileupload.js
大寫的貳——遇到的問題及解決方法
一、輪播圖問題
1、輪播圖的圖片由后台傳過來的數據加載；
2、輪播圖在電腦上的微信web開發者工具沒法調試，需要使用真機調試；
3、應該是先通過模板或別的途徑加載好輪播圖內部的節點，才進行初始化。
1 // 初始化輪播圖 2 function newSwiper() { 3 var mySwiper = new Swiper('.swiper-container', { 4 direction: 'horizontal', 5 loop: true, 6 // 如果需要分頁器 7 pagination: '.swiper-pagination' 8 }) 9 } 10 11 // 加載輪播圖數據 12 function addSwiper() { 13 var url = "/home-ajax/swiper"; 14 $.post(url, function(data) { 15 console.log(data); 16 var h = template("swiper-tpl", data); 17 $('#swiper-body').html(h); 18 newSwiper(); 19 }, "json"); 20 }
二、滾動加載問題
1、滾動加載在電腦上的微信web開發者工具沒法調試，需要使用真機調試；
2、項目采用了WEUI的滾動加載功能，沒有注意原項目在common.js層已經另行寫有了一個不采用WEUI的滾動加載的方法。
3、內容的加載不能使用.html()，而應該使用.append()；
4、滾動加載相當於后台項目中的分頁功能，需要分步去請求數據，需要有分頁的索引；
5、最后一頁的下一頁的滾動加載不需要請求后台，直接變換為無更多內容。
6、滾動加載事件的觸發在加載期間是持續觸發的，要做判斷並提前提出事件。
7、觸發滾動事件的滾動高度寫高點，數據加載的量（每頁多少條數據）也寫大點，盡量不要讓用戶看到類似正在加載的文字，這樣體驗友好一點。
1 var listParam = { 2 "menuId": "1001", 3 "pageIndex": 0, 4 "totalPages": 0, 5 "newsSort": "new" 6 }; 7 // 初始加載第一頁 8 addList(listParam); 9 // 滾動加載 10 var loading = false; //狀態標記為不加載 11 $(document.body).infinite(50).on("infinite", function() { 12 if (loading) return; // 如果正在加載，則退出事件 13 // 如果沒有下一頁了，加載圖標消失和無更多內容顯示 14 if (listParam.pageIndex >= listParam.totalPages) { 15 setTimeout(function() { 16 $(".loadmore .weui-loadmore").hide(); 17 $(".loadmore .no-more-data").show(); 18 $(document.body).destroyInfinite(); 19 return; 20 }, 1000); 21 } 22 loading = true; 23 setTimeout(function() { 24 addList(listParam); 25 loading = false; 26 }, 1000); 27 }); 28 // 加載列表數據 29 function addList(listParam) { 30 var url = "/home-ajax/newsList"; 31 $.post(url, listParam, function(data) { 32 var h = template("list-tpl", data); 33 $('#list-body').append(h); 34 listParam.totalPages = data.totalPages; 35 listParam.pageIndex++; 36 }, "json"); 37 }
三、圖片加載問題
1、除去前端頁面的logo等死圖片之外，大部分圖片的加載來自后台；
2、公司使用的template.js，寫法是這樣：<img src="/gridfs-download?f_id={{v.imgId}}">，完整的是這樣：<img src="${contextPath}/gridfs-download?f_id={{v.imgId}}">
3、但是這樣寫不對，因為鏈接到的應該是后台項目的方法，后台的前端頁面可以這樣寫，畢竟在同一個項目，而微信項目是另一個項目，其本身的${contextPath}是微信本身的路徑。
4、還有一個地方就是詳情加載的時候，詳情的內容是可以有圖片視頻之類的，在后台的新增頁里，詳情的正文內容是一個編輯器（UEditor），圖片鏈接有可能是這樣的：
也有可能是這樣的：
5、微信加載內容的代碼是這樣的：
1 <script type="text/html" id="detail-tpl"> 2 <div class="title"> 3 <p>{{results.title}}</p> 4 </div> 5 <div class="time"> 6 {{results.lastUpdate | dateFormat:'yyyy-MM-dd'}} 7 </div> 8 <div class="content"> 9 {{#results.content}} 10 </div> 11 </script> 12 13 // 去掉文本標簽 14 // {{#jobinfo.info | removeTag}} 15 template.helper('removeTag', function(data) { 16 return data.replace(/<[^>]+>/g, ""); 17 });
6、綜上所述，我們要解決問題的關鍵是改掉圖片的鏈接：
1 // 首先在最頂部的位置(聲明contextPath的位置)聲明一個后台系統的絕對路徑 2 <% 3 String serverUrl=Constants.MEN_HU; 4 request.setAttribute("serverUrl",serverUrl); 5 %> 6 <script> 7 var serverUrl = '${serverUrl}'; 8 </script> 9 // 前端頁面img鏈接改寫成： 10 <img src="${serverUrl}/gridfs-download?f_id={{v.imgId}}"> 11 12 13 // 詳情的鏈接沒法直接改寫，我們可以在填充模板之后，再通過js遍歷所有的圖片,再改寫 14 $.post(url, listParam, function(data) { 15 var h = template("detail-tpl", { "results": data }); 16 $('#detail-body').html(h); 17 updateImgSrc('detail-body'); 18 }, 'json'); 19 20 /** 21 * 修改詳情內容中的圖片鏈接路徑，（contextPath） 22 * @param {*要填充模板的body的id} templateBodyId 23 * 24 */ 25 function updateImgSrc(templateBodyId) { 26 $("#" + templateBodyId).find("img").each(function(i) { 27 var src = $("#" + templateBodyId).find("img").eq(i).attr("src"); 28 if ("/gridfs-download?f_id=" == src.substring(0, 22)) { 29 src = serverUrl + src; 30 } 31 $("#" + templateBodyId).find("img").eq(i).attr("src", src); 32 }); 33 }
四、文件上傳問題
1、整個項目就一個地方用到了文件上傳，因為整個包括后台項目都是我來干，所以我很清楚微信項目並沒有連接數據庫，而且文件上傳后支撐它的后台項目要能看到。
2、解決方法：首先在微信項目中引入數據庫，文件上傳的數據庫和后台項目中文件上傳的數據庫（MongoDb）要一致。
3、引入mongo的maven包（改pom.xml），引入gridFSKit.java文件（從后台項目中拷過來，這個文件我是看不懂），新建一個GridfsController.java；
4、在新建的文件里面寫upload方法，然后把url給前端，前端就可以調用了。
5、前端采用的是ajaxfileupload.js插件實現文件的上傳。
1 var data = { 2 fileId: 'btnUpLoad', 3 successCall: function(data, status) { 4 if (data) { 5 $('input[name="entity.imgName"]').val(data.filename); 6 $('input[name="entity.imgId"]').val(data.f_id); 7 } 8 } 9 } 10 uploadFile(data); 11 12 // 上傳文件（點擊上傳文件控件就上傳） 13 function uploadFile(options) { 14 options = options || {}; 15 options.url = options.url || "/gridfs/upload"; 16 options.fileId = options.fileId || "btnUpLoad"; 17 $(document).on('change', '#' + options.fileId, function(e) { 18 _doUpload(options); 19 }); 20 } 21 22 function _doUpload(options) { 23 $.ajaxFileUpload({ 24 url: options.url, //用於文件上傳的服務器端請求地址 25 secureuri: false, //是否需要安全協議，一般設置為false 26 fileElementId: options.fileId, //文件上傳域的ID 27 dataType: 'json', //返回值類型 一般設置為json 28 success: function(data, status) { //服務器成功響應處理函數 29 if (!data.success) { 30 return; 31 } 32 $.toptip("上傳成功", 'success'); 33 if (options.successCall && typeof options.successCall == 'function') { 34 options.successCall.call($(options.fileId), data, status);; //data.info --> fileId 35 } 36 }, 37 error: function(data, status, e) { //服務器響應失敗處理函數 38 $.toptip(e + "", 'error'); 39 } 40 }); 41 }
五、微信呼叫功能
1、就是調用手機的打電話功能，看上去很高大上，但實現上微信這個軟件已經幫我們實現了，我們需要做的只有一步：
2、給呼叫按鈕用a標簽表示，href這樣寫：<a href="tel:{{v.phone}}">呼叫</a>
3、只要點擊這個呼叫，就會有一個彈窗，當然，不一樣的手機效果可能不一樣。彈窗之后的操作微信都實現了。效果圖如下：
六、地圖導航功能問題
1、微信開發要用地圖首先想到的就是騰訊地圖，於是我就去學習了騰訊地圖的API，當我做出來后，發現我並不能實現距離的計算。
2、彎路：我在騰訊地圖的JavaScript API 中沒有找到計算距離的方法，然后去學習了微信小程序JavaScript SDK，最后發現SDK並不適用於公眾號。
3、彎路：因為此微信項目是有一個原版公眾號的，這次開發是相當於重做，於是我去看了原項目的實現方法，被它帶進去了。
4、彎路：在網上百度了如何實現距離的計算，以及看了一些案例，發現都是用的百度地圖，於是學習百度地圖JavaScript API。
5、雖然最后寫出來了，但是很怪異，有點個功能點，一個是在詳情頁顯示距離（百度地圖實現），一個是點擊詳情頁的導航按鈕進入地圖導航（騰訊地圖實現）。
6、最后回來發現騰訊地圖也可以實現距離的計算，方法在WebService API中。可惜我已經完成功能了，沒必要再否定百度地圖再來一次。
1 // 導航按鈕功能的實現（騰訊地圖），只需要一個鏈接，這就是騰訊地圖的特點。 2 // routeplan為路線規划方法，eword為地點名稱，epointx為經度，epointy為緯度，referer為我的應用名稱，key為申請的密鑰，起點不填默認為我的位置（手機定位當前位置） 3 <a id="map-nav" class="map-nav" href="http://apis.map.qq.com/tools/routeplan/eword={{name}}&epointx={{longitude}}&epointy={{latitude}}?referer=myapp&key=XXX">導航</a> 4 5 // 下面是百度地圖 6 // 引入js 7 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script> 8 // 放置百度地圖的容器，（頁面只要距離，不要地圖，所以樣式設置為隱身） 9 <div class="baidu-map" id="mymap"></div> 10 11 /** 百度地圖API功能 start**/ 12 var map = new BMap.Map("mymap"); 13 map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); 14 var searchComplete = function(results) { 15 if (transit.getStatus() != BMAP_STATUS_SUCCESS) { 16 return; 17 } 18 var plan = results.getPlan(0); 19 $("#distance").text(plan.getDistance(true)); 20 } 21 var transit = new BMap.DrivingRoute(map, { 22 renderOptions: { map: map }, 23 onSearchComplete: searchComplete, 24 onPolylinesSet: function() { 25 26 } 27 }); 28 var geolocation = new BMap.Geolocation(); 29 30 /** 百度地圖API功能 end**/ 31 32 // 因為距離也是數據填充上去的，百度地圖是異步的，所以百度地圖的請求要放在數據填充之后 33 $.post(url, listParam, function(data) { 34 data.distance = "正在加載…"; 35 longitude = data.longitude; 36 latitude = data.latitude; 37 var h = template("list-tpl", data); 38 $("#list-body").html(h); 39 geolocation.getCurrentPosition(function(r) { 40 if (this.getStatus() == BMAP_STATUS_SUCCESS) { 41 var mk = new BMap.Marker(r.point); 42 map.addOverlay(mk); 43 map.panTo(r.point); 44 var p1 = new BMap.Point(r.point.lng, r.point.lat); 45 var p2 = new BMap.Point(longitude, latitude); 46 transit.search(p1, p2); 47 } else { 48 alert('failed' + this.getStatus()); 49 } 50 }, { enableHighAccuracy: true }); 51 }, "json");