微信公众号开发问题总结

模板的使用

  jsp 

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/

// 初始化轮播图

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 

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中写入：

{{if (results==null || results=='') && start==0}}
                

                    
                    
暂没数据！
                
                {{/if}}

正在加载

暂无更多内容！

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

jsp

{{if (results==null || results=='') && start==0}}

暂没数据！

{{/if}}

3.浏览量加1

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

		if (!this.isAjaxRequest()) {
			return;
		}
		if ("单位介绍".equals(this.typestr)) {
			Map 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

      最新报道

      热门报道

js

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

5.日期字符串的截取

jsp

{{v.lastUpdate.substring(5,7)}}月

{{v.lastUpdate.substring(8,10)}}日

6.小标签的使用

jsp

[{{v.label}}]

7.电话的呼叫

                    

                        href="tel:{{v.phone}}">
                                  呼叫
                        
                    

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

实名举报

匿名举报

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

电话

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

//文本域中字数的限制和显示剩余输入的文字function checkLength(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

违法行为描述

(数字在300字以内)

οnkeyup="checkLength(this);</span>">

0/300