学习之路--微信公众号开发（二）--前端开发遇到的问题

（逻辑和表达能力不强，或许只有我自己才能看懂吧？/捂脸）

大写的壹——技术知识点学习

一、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、应该是先通过模板或别的途径加载好轮播图内部的节点，才进行初始化。

// 初始化轮播图
function newSwiper() {
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination'
    })
}

// 加载轮播图数据
function addSwiper() {
    var url = "/home-ajax/swiper";
    $.post(url, function(data) {
        console.log(data);
        var h = template("swiper-tpl", data);
        $('#swiper-body').html(h);
        newSwiper();
    }, "json");
}

 二、滚动加载问题

 　　1、滚动加载在电脑上的微信web开发者工具没法调试，需要使用真机调试；

 　　2、项目采用了WEUI的滚动加载功能，没有注意原项目在common.js层已经另行写有了一个不采用WEUI的滚动加载的方法。

 　　3、内容的加载不能使用.html()，而应该使用.append()；

　　4、滚动加载相当于后台项目中的分页功能，需要分步去请求数据，需要有分页的索引；

　　5、最后一页的下一页的滚动加载不需要请求后台，直接变换为无更多内容。

　　6、滚动加载事件的触发在加载期间是持续触发的，要做判断并提前提出事件。

　　7、触发滚动事件的滚动高度写高点，数据加载的量（每页多少条数据）也写大点，尽量不要让用户看到类似正在加载的文字，这样体验友好一点。

    var listParam = {
        "menuId": "1001",
        "pageIndex": 0,
        "totalPages": 0,
        "newsSort": "new"
    };
    // 初始加载第一页
    addList(listParam);
    // 滚动加载
    var loading = false; //状态标记为不加载
    $(document.body).infinite(50).on("infinite", function() {
        if (loading) return; // 如果正在加载，则退出事件
        // 如果没有下一页了，加载图标消失和无更多内容显示
        if (listParam.pageIndex >= listParam.totalPages) {
            setTimeout(function() {
                $(".loadmore .weui-loadmore").hide();
                $(".loadmore .no-more-data").show();
                $(document.body).destroyInfinite();
                return;
            }, 1000);
        }
        loading = true;
        setTimeout(function() {
            addList(listParam);
            loading = false;
        }, 1000);
    });
    // 加载列表数据
    function addList(listParam) {
        var url = "/home-ajax/newsList";
        $.post(url, listParam, function(data) {
            var h = template("list-tpl", data);
            $('#list-body').append(h);
            listParam.totalPages = data.totalPages;
            listParam.pageIndex++;
        }, "json");
    }

三、图片加载问题

　　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、微信加载内容的代码是这样的：

<script type="text/html" id="detail-tpl">
    <div class="title">
        <p>{{results.title}}</p>
    </div>
    <div class="time">
        {{results.lastUpdate | dateFormat:'yyyy-MM-dd'}}
    </div>
    <div class="content">
        {{#results.content}}
    </div>
</script>

// 去掉文本标签
// {{#jobinfo.info | removeTag}}
template.helper('removeTag', function(data) {
    return data.replace(/<[^>]+>/g, "");
});

　　6、综上所述，我们要解决问题的关键是改掉图片的链接：

// 首先在最顶部的位置(声明contextPath的位置)声明一个后台系统的绝对路径
<%
    String serverUrl=Constants.MEN_HU;
    request.setAttribute("serverUrl",serverUrl);
%>
<script>
    var serverUrl = '${serverUrl}';
</script>
// 前端页面img链接改写成：
    <img src="${serverUrl}/gridfs-download?f_id={{v.imgId}}">


// 详情的链接没法直接改写，我们可以在填充模板之后，再通过js遍历所有的图片,再改写
    $.post(url, listParam, function(data) {
        var h = template("detail-tpl", { "results": data });
        $('#detail-body').html(h);
        updateImgSrc('detail-body');
    }, 'json');

/**
 * 修改详情内容中的图片链接路径，（contextPath）
 * @param {*要填充模板的body的id} templateBodyId
 *  
 */
function updateImgSrc(templateBodyId) {
    $("#" + templateBodyId).find("img").each(function(i) {
        var src = $("#" + templateBodyId).find("img").eq(i).attr("src");
        if ("/gridfs-download?f_id=" == src.substring(0, 22)) {
            src = serverUrl + src;
        }
        $("#" + templateBodyId).find("img").eq(i).attr("src", src);
    });
}

 四、文件上传问题

　　1、整个项目就一个地方用到了文件上传，因为整个包括后台项目都是我来干，所以我很清楚微信项目并没有连接数据库，而且文件上传后支撑它的后台项目要能看到。

　　2、解决方法：首先在微信项目中引入数据库，文件上传的数据库和后台项目中文件上传的数据库（MongoDb）要一致。

　　3、引入mongo的maven包（改pom.xml），引入gridFSKit.java文件（从后台项目中拷过来，这个文件我是看不懂），新建一个GridfsController.java；

　　4、在新建的文件里面写upload方法，然后把url给前端，前端就可以调用了。

　　5、前端采用的是ajaxfileupload.js插件实现文件的上传。

    var data = {
        fileId: 'btnUpLoad',
        successCall: function(data, status) {
            if (data) {
                $('input[name="entity.imgName"]').val(data.filename);
                $('input[name="entity.imgId"]').val(data.f_id);
            }
        }
    }
    uploadFile(data);

// 上传文件（点击上传文件控件就上传）
function uploadFile(options) {
    options = options || {};
    options.url = options.url || "/gridfs/upload";
    options.fileId = options.fileId || "btnUpLoad";
    $(document).on('change', '#' + options.fileId, function(e) {
        _doUpload(options);
    });
}

function _doUpload(options) {
    $.ajaxFileUpload({
        url: options.url, //用于文件上传的服务器端请求地址
        secureuri: false, //是否需要安全协议，一般设置为false
        fileElementId: options.fileId, //文件上传域的ID
        dataType: 'json', //返回值类型 一般设置为json
        success: function(data, status) { //服务器成功响应处理函数
            if (!data.success) {
                return;
            }
            $.toptip("上传成功", 'success');
            if (options.successCall && typeof options.successCall == 'function') {
                options.successCall.call($(options.fileId), data, status);; //data.info --> fileId
            }
        },
        error: function(data, status, e) { //服务器响应失败处理函数
            $.toptip(e + "", 'error');
        }
    });
}

 五、微信呼叫功能

　　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中。可惜我已经完成功能了，没必要再否定百度地图再来一次。

// 导航按钮功能的实现（腾讯地图），只需要一个链接，这就是腾讯地图的特点。
// routeplan为路线规划方法，eword为地点名称，epointx为经度，epointy为纬度，referer为我的应用名称，key为申请的密钥，起点不填默认为我的位置（手机定位当前位置）
<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>

// 下面是百度地图
// 引入js
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script>
// 放置百度地图的容器，（页面只要距离，不要地图，所以样式设置为隐身）
<div class="baidu-map" id="mymap"></div>

    /** 百度地图API功能 start**/
    var map = new BMap.Map("mymap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
    var searchComplete = function(results) {
        if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
        }
        var plan = results.getPlan(0);
        $("#distance").text(plan.getDistance(true));
    }
    var transit = new BMap.DrivingRoute(map, {
        renderOptions: { map: map },
        onSearchComplete: searchComplete,
        onPolylinesSet: function() {

        }
    });
    var geolocation = new BMap.Geolocation();

    /** 百度地图API功能 end**/

    // 因为距离也是数据填充上去的，百度地图是异步的，所以百度地图的请求要放在数据填充之后
        $.post(url, listParam, function(data) {
            data.distance = "正在加载…";
            longitude = data.longitude;
            latitude = data.latitude;
            var h = template("list-tpl", data);
            $("#list-body").html(h);
            geolocation.getCurrentPosition(function(r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    var p1 = new BMap.Point(r.point.lng, r.point.lat);
                    var p2 = new BMap.Point(longitude, latitude);
                    transit.search(p1, p2);
                } else {
                    alert('failed' + this.getStatus());
                }
            }, { enableHighAccuracy: true });
        }, "json");