學習之路--微信公衆號開發（二）--前端開發遇到的問題

（邏輯和表達能力不強，或許只有我本身才能看懂吧？/捂臉）

大寫的壹——技術知識點學習

1、http://jqweui.com/extends#infinite　　——JQuery WEUI

　　在這裏也不詳細說了，功能不少，若是寫的話能寫好幾章……下面列出一些主要功能：

　　　　表單，文件上傳，加載提示，搜索欄，加載更多，下拉刷新，滾動加載，圖片瀏覽器，日曆日期時間控件，地址控件，通知控件，下拉框控件，彈出框

2、http://lbs.qq.com/javascript_v2/index.html　　——騰訊地圖導航接口文檔

3、http://lbsyun.baidu.com/index.php?title=jspopular/guide/routeplan　　——百度地圖導航接口文檔，實現距離計算。示例：http://lbsyun.baidu.com/jsdemo.htm#i5_5

4、文件上傳ajaxfileupload.js

大寫的貳——遇到的問題及解決方法

1、輪播圖問題

　　一、輪播圖的圖片由後臺傳過來的數據加載；

　　二、輪播圖在電腦上的微信web開發者工具無法調試，須要使用真機調試；

　　三、應該是先經過模板或別的途徑加載好輪播圖內部的節點，才進行初始化。

 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 }

 

 2、滾動加載問題

 　　一、滾動加載在電腦上的微信web開發者工具無法調試，須要使用真機調試；

 　　二、項目採用了WEUI的滾動加載功能，沒有注意原項目在common.js層已經另行寫有了一個不採用WEUI的滾動加載的方法。

 　　三、內容的加載不能使用.html()，而應該使用.append()；

　　四、滾動加載至關於後臺項目中的分頁功能，須要分步去請求數據，須要有分頁的索引；

　　五、最後一頁的下一頁的滾動加載不須要請求後臺，直接變換爲無更多內容。

　　六、滾動加載事件的觸發在加載期間是持續觸發的，要作判斷並提早提出事件。

　　七、觸發滾動事件的滾動高度寫高點，數據加載的量（每頁多少條數據）也寫大點，儘可能不要讓用戶看到相似正在加載的文字，這樣體驗友好一點。

 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     }

 

 

3、圖片加載問題

　　一、除去前端頁面的logo等死圖片以外，大部分圖片的加載來自後臺；

　　二、公司使用的template.js，寫法是這樣：<img src="/gridfs-download?f_id={{v.imgId}}">，完整的是這樣：<img src="${contextPath}/gridfs-download?f_id={{v.imgId}}">

　　三、可是這樣寫不對，由於連接到的應該是後臺項目的方法，後臺的前端頁面能夠這樣寫，畢竟在同一個項目，而微信項目是另外一個項目，其自己的${contextPath}是微信自己的路徑。

　　四、還有一個地方就是詳情加載的時候，詳情的內容是能夠有圖片視頻之類的，在後臺的新增頁裏，詳情的正文內容是一個編輯器（UEditor），圖片連接有多是這樣的：

 　　

　　　　也有多是這樣的：

　　

　　五、微信加載內容的代碼是這樣的：

 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 });

　　六、綜上所述，咱們要解決問題的關鍵是改掉圖片的連接：

 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 }

 

 

 4、文件上傳問題

　　一、整個項目就一個地方用到了文件上傳，由於整個包括後臺項目都是我來幹，因此我很清楚微信項目並無鏈接數據庫，並且文件上傳後支撐它的後臺項目要能看到。

　　二、解決方法：首先在微信項目中引入數據庫，文件上傳的數據庫和後臺項目中文件上傳的數據庫（MongoDb）要一致。

　　三、引入mongo的maven包（改pom.xml），引入gridFSKit.java文件（從後臺項目中拷過來，這個文件我是看不懂），新建一個GridfsController.java；

　　四、在新建的文件裏面寫upload方法，而後把url給前端，前端就能夠調用了。

　　五、前端採用的是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 }

 

 

 5、微信呼叫功能

　　一、就是調用手機的打電話功能，看上去很高大上，但實現上微信這個軟件已經幫咱們實現了，咱們須要作的只有一步：

　　二、給呼叫按鈕用a標籤表示，href這樣寫：<a href="tel:{{v.phone}}">呼叫</a>

　　三、只要點擊這個呼叫，就會有一個彈窗，固然，不同的手機效果可能不同。彈窗以後的操做微信都實現了。效果圖以下：

　　         

 

 

6、地圖導航功能問題

　　一、微信開發要用地圖首先想到的就是騰訊地圖，因而我就去學習了騰訊地圖的API，當我作出來後，發現我並不能實現距離的計算。

　　二、彎路：我在騰訊地圖的JavaScript  API 中沒有找到計算距離的方法，而後去學習了微信小程序JavaScript  SDK，最後發現SDK並不適用於公衆號。

　　三、彎路：由於此微信項目是有一個原版公衆號的，此次開發是至關於重作，因而我去看了原項目的實現方法，被它帶進去了。

　　四、彎路：在網上百度瞭如何實現距離的計算，以及看了一些案例，發現都是用的百度地圖，因而學習百度地圖JavaScript API。

　　五、雖然最後寫出來了，可是很怪異，有點個功能點，一個是在詳情頁顯示距離（百度地圖實現），一個是點擊詳情頁的導航按鈕進入地圖導航（騰訊地圖實現）。

　　六、最後回來發現騰訊地圖也能夠實現距離的計算，方法在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");