微信公众号开发问题总结

模板的使用

  jsp <script type="text/html" id="list-tpl">
                {{if (results==null || results=='') && start==0}}
                <div class="no-data">
                    <img src="/resources/images/first-skin/no-data.png" />
                    <p>暂没数据！</p>
                </div>
                {{/if}} {{each results as v}}
                <div class="list-info clearfix" data-id="{{v.id}}">
                    <div class="list-img">
                        <img src="${serverUrl}/gridfs-download?f_id={{v.imgId}}">
                    </div>
                    <div class="list-detail">
                        <h3 class="this-title">{{v.title}}</h3>
                        <div class="this-content">{{v.summary}}</div>
                        <h5>
                            <span class="this-lastUpdate"><i class="img-last-update">      </i>{{v.lastUpdate | dateFormat:'yyyy-MM-dd'}}</span>
                            <span class="this-viewCount"><i class="img-view-count">      </i>{{v.viewCount}}</span>
                        </h5>
                    </div>
                </div>
                {{/each}}
            </script>

js// 加载列表数据
function addList(listParam) {
    var url = "/home-ajax/newsList";
    $.post(url, listParam, function(data) {
        console.log(data);
        var h = template("list-tpl", data);
        $('#list-body').append(h);
        listParam.totalPages = data.totalPages;
        listParam.pageIndex++;
    }, "json");
}

1.轮播图

js/

            <div class="swiper-container">
                <div class="swiper-wrapper" id='swiper-body'>

                </div>
                <div class="swiper-pagination"></div>
            </div>

// 初始化轮播图

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) {

var h = template("swiper-tpl", data);

$('#swiper-body').html(h);

newSwiper();

}, "json");

}

 jsp <!--轮播图模块-->

<div class="swiper-container">

<div class="swiper-wrapper" id='swiper-body'> </div> <div class="swiper-pagination"></div> </div>

  <!-- 轮播图模板 -->
            <script type="text/html" id="swiper-tpl">
                {{each results as v}}
                <div class="swiper-slide">
                    <a href="{{v.linkUrl}}">
                        <img src="${serverUrl}/gridfs-download?f_id={{v.picId}}" />
                        <!-- <img src="/resources/images/first-skin/jingwu.png" /> -->
                    </a>
                    <p class="title">{{v.title}}</p>
                </div>
                {{/each}}
            </script>

2.滚动加载

js中写入：

 // 滚动加载
    $(document.body).infinite();
    var loading = false; //状态标记为不加载
    $(document.body).infinite(10).on("infinite", function() {
        if (loading) return; // 如果正在加载，则退出事件
        $(".loadmore .weui-loadmore").show();
        // 加载图标和无更多内容
        if (listParam.pageIndex >= listParam.totalPages) {
            $(".loadmore .weui-loadmore").hide();
            $(".loadmore .no-more-data").show();
            $(document.body).destroyInfinite();
            return;
        }
        loading = true;
        setTimeout(function() {
            addList(listParam);
            loading = false;
            $(".loadmore .weui-loadmore").hide();
        }, 1000);
    });

jsp中写入：

 
<div class="loadmore">

{{if (results==null || results=='') && start==0}}
                <div class="no-data">
                    <img src="/resources/images/first-skin/no-data.png" />
                    <p>暂没数据！</p>
                </div>
                {{/if}}

<div class="weui-loadmore"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span> </div> <div class="no-more-data"> <p>暂无更多内容！</p> </div> </div>

script 模板中写入，可实现没有数据的时候显示无数据

jsp

{{if (results==null || results=='') && start==0}} <div class="no-data"> <img src="/resources/images/first-skin/no-data.png" /> <p>暂没数据！</p> </div> {{/if}}

3.浏览量加1

/**
	 * 单位详情页面
	 */
	@Override
	public void detail() {

		if (!this.isAjaxRequest()) {
			return;
		}
		if ("单位介绍".equals(this.typestr)) {
			Map<String, Object> params = new HashMap<>();
			params.put("typestr", "3001");
			entity = this.baseSrv.findBy(params).get(0);
		} else {
			entity = this.baseSrv.find(id);
		}
		
		this.sendResponseMsg(entity);
		entity.setViewCount(entity.getViewCount()+1);
		this.addOrUpdate();//浏览量+1
	
		
	}

4.两个按钮的切换

jsp

<div class="sort"> <div class="active" id="btn-new"> <i class="img-new">      </i>最新报道 </div> <div id="btn-hot"> <i class="img-hot">      </i>热门报道 </div> </div>

js

$("#btn-new").click(function() { $(this).addClass("active").siblings().removeClass("active"); }); $("#btn-hot").click(function() { $(this).addClass("active").siblings().removeClass("active"); });

5.日期字符串的截取

jsp

<div class="warningsigns-date"> <h5>{{v.lastUpdate.substring(5,7)}}月</h5> <h3>{{v.lastUpdate.substring(8,10)}}日</h3> </div>

6.小标签的使用

jsp

<div class="label"> [{{v.label}}] </div>

7.电话的呼叫

                    <div class="btn-call" data-phone="{{v.phone}}">
                        <a href="tel:{{v.phone}}">
                            <i class="img-phone-write">      </i>呼叫
                        </a>
                    </div>

8.两表关联显示（点击一个表时，显示关联的内容）

jsp

// 加载列表数据function addList(id) { var url = "/home-ajax/policeList"; listParam = { "id": id }; $.post(url, listParam, function(data) { console.log(data); var h = template("list-police-tpl", { "results": data }); $("#list-body").html(h); }, "json");}

 /**
     * 社区民警列表
     */
    public void policeList() {
        currUrl = "/police-presence-api!find";
        commonOper();
    }

//民警列表
	  public void find() {

	    	 try {  
	             sendResponseMsg(this.srv.findBy("thePoliceStationId",this.id));  //thePoliceStationId所属派出所的id
	         } catch (final Throwable e) { 
	             sendFailMsg("", "查询失败！");  
	         }  
	    }

9.按钮切换，浮动隐藏from表单项

js

$("#btn-realname").click(function() { $(this).addClass("active").siblings().removeClass("active"); $("#name").show(1000, function() { $(this).show(); }); $("#phone").show(1000, function() { $(this).show(); }); }); $("#btn-anonymous").click(function() { $(this).addClass("active").siblings().removeClass("active"); $("#name").hide(1000, function() { $(this).hide(); }); $("#phone").hide(1000, function() { $(this).hide(); }); });

jsp

<div class="btn-report"> <div class="active" id="btn-realname"> <a> 实名举报</a> </div> <div id="btn-anonymous"> <a>匿名举报</a> </div> </div>

10.微信端form表单的提交

js

$(".button-submit").click(function() { var params = $("#baseInfoForm").serialize();

$.ajax({

type: "POST",

url: "/home-ajax/illegalReportSubmit",

data: params,

success: function() {

alert("提交成功！");

}

});

});

11.电话号码的判断

jsp

<div class=" weui-cell div-phone" id="phone"> <div class="weui-cell__hd"> <i class="icon-phone"></i><label class="weui-label text-phone">电话</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" pattern="[0-9]*" name="entity.phone" id="phoneid"> </div> </div>

js

var phone = document.getElementById("phoneid").value;

if (phone != "") { if (!(/^1[34578]\d{9}$/.test(phone))) { alert("请输入有效的手机号码！"); return false; } } else { alert("电话号不能为空！"); return false; }

12.文本框的字数显示和文字随着数字增长而减少，并提醒超过限制字数

js

//文本域中字数的限制和显示剩余输入的文字functioncheckLength(which) { var maxChars = 300; // if (which.value.length > maxChars) { alert("您出入的字数超多限制!"); // 超过限制的字数了就将 文本框中的内容按规定的字数 截取 which.value = which.value.substring(0, maxChars); return false; } else { var curr = maxChars - which.value.length; //250 减去 当前输入的 document.getElementById("sy").innerHTML = curr.toString(); return true; }}

jsp

<div class="text-box"> <div class="weui-cells weui-cells_form col"> <div class="weui-cells__title illegal"> <i class="icon-pencil"></i> <div> <p class="sty">违法行为描述</p> <p class="sty1">(数字在300字以内) </p> </div> </div> <div class="weui-cell"> <!-- //onkeyup事件会在键盘按键放开时发生 --> <div class="weui-cell__bd"> <textarea class="weui-textarea" placeholder="请输入文本" rows="3" name="entity.behaviorDescription" id="behaviorDescriptionid"onkeyup="checkLength(this);"></textarea> <div class=" weui-textarea-counter"><span id="sy">0</span>/300</div> </div> </div> </div> </div>