微信公众号开发(二)

时间 2019-11-07

标签微信公众号开发繁體版

原文原文链接

今天把以前的知识整合一下来作一个简单公众号购物界面的用户评价界面,供你们学习javascript

总体思路: 咱们通常看到的淘宝用户评价界面基本须要---->用户头像,用户昵称,和评论内容,评论时间等几个基本字段 .如何获取用户的基本信息咱们在上一节说过了,获取用户的评论内容咱们如今根据现实购物订单的用户评价来用数据库模拟.这样咱们就能够完成一个用户评价界面的模块功能了.css

首先咱们先建立实体类Evaluatehtml

@Getter@Setter@ToString
public class Evaluate {
//保证一个用户能够有不少条评价
private Long id;
//用户的openID
private String openID;
//评价时间
private Date evaluateTime;
//评价内容
private String  content;
//昵称
private String  nickname;
//头像
private String  headimgurl;
}
复制代码

接着建立EvaluateMapper获取全部的用户评价java

public interface EvaluateMapper {
List<Evaluate>listAll();
}
复制代码

建立接口(略)和实现类jquery

@Service
public class EvaluateServiceImpl implements IEvaluateService {
@Autowired
private EvaluateMapper mapper;
@Override
public List<Evaluate> listAll() {
    return mapper.listAll();
}
}
复制代码

建立EvaluateMapper.xmlajax

<mapper namespace="com.jd.wx.mapper.EvaluateMapper">
<resultMap id="BaseResultMap" type="com.jd.wx.domain.Evaluate">
    <id column="id" property="id" jdbcType="BIGINT"/>
    <result column="openID" property="openID" jdbcType="VARCHAR"/>
    <result column="evaluateTime" property="evaluateTime" jdbcType="DATE"/>
    <result column="content" property="content" jdbcType="VARCHAR"/>
</resultMap>
<select id="listAll" resultMap="BaseResultMap">
    select o.id ,c.openID, o.evaluateTime, o.content
	FROM  t_order o
    LEFT JOIN client c  ON o.clientId = c.id
	order BY o.evaluateTime
</select>
</mapper>
复制代码

咱们先建立evaluate.jsp再建立控制类spring

<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Insert title here</title>
<!-- head 中 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
</head>
<body>
//集成下拉刷新
<div class="weui-pull-to-refresh__layer">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>

<div class="weui-grids">
<a href="" class="weui-grid js_grid">
    <div class="weui-grid__icon">
        ![](images/icon_nav_button.png)
    </div>
    <p class="weui-grid__label">
        Button
    </p>
</a>
<a href="" class="weui-grid js_grid">
    <div class="weui-grid__icon">
        ![](images/icon_nav_cell.png)
    </div>
    <p class="weui-grid__label">
        List
    </p>
</a>
</div>
  嘿嘿!
</body>
<!-- body 最后 -->
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
</html>
复制代码

小结在这里咱们使用的是 jQuery WeUI 由于他给们提供了不少控件,根据官网提供的开发文档咱们选择合适的控件,选择好控件后,咱们须要向控件传入数据使得咱们的界面有数据显示给用户看sql

接着咱们能够经过EL表达式来获取须要的值(先说jsp界面) 首先要引入EL表达式的头文件而后经过EL表达式从共享做用域里获取须要的值数据库

建立EvaluateControllerjson

@Controller
public class EvaluateController {
@Autowired
private IEvaluateService service;

@RequestMapping("/evaluate")
public String evaluatemanager(Model model) {
    List<Evaluate> listAll = service.listAll();
    List<Object> lists = new ArrayList<>();
    //遍历全部订单 若是订单有评论就获取获取用户信息
    for (Evaluate li : listAll) {
        String content = li.getContent();
            String openid = li.getOpenID();
            //调用接口获取用户详细信息
            String result = HttpUtil.get(WeixinUtil.GET_USERINFO_URL.replace("ACCESS_TOKEN", WeixinUtil.getAccessToken()).replace("OPENID", openid));
            //转成json对象
            JSONObject json = JSON.parseObject(result);
            String nickname = (String) json.get("nickname");
            String headimgurl = (String) json.get("headimgurl");
            li.setNickname(nickname);
            li.setHeadimgurl(headimgurl);
            lists.add(li);
            System.out.println("-----" + result);
    }
    model.addAttribute("lists",lists);
   //跳转到evaluate.jsp界面(用户评价界面)
    return "evaluate";
}
}
复制代码

小结: 这里咱们想把界面须要的数据传给jsp界面首先要知道怎么讲数据传递过去,这里就要知道spring的几种传值方式,点击查看Spring传值方式我就随便找了一篇博客若是须要能够花一分钟看看,而后咱们须要获取过滤数据库的用户订单信息,咱们须要的是用户评价的信息,因此有两种方式获取1.经过sql条件排除没有评价的订单信息,2.获取全部订单,遍历过滤没有评论内容的订单.接着咱们经过查询数据库获取到订单信息这是过滤后的每个订单都是有用户评论的,而后调用接口获取用户详细信息,订单信息里有用户的openID,咱们遍历每个订单获取用户的openID,发送请求, String result = HttpUtil.get(WeixinUtil.GET_USERINFO_URL.replace("ACCESS_TOKEN", WeixinUtil.getAccessToken()).replace("OPENID", openid)); 这是咱们须要返回的结果转成json对象, JSONObject json = JSON.parseObject(result); 而后取值再赋值,咱们但愿把须要的属性所有封装到对象里这时咱们就必须在实现类里添加用户头像headimgurl和昵称nickname两个字段, String nickname = (String) json.get("nickname"); String headimgurl = (String) json.get("headimgurl"); li.setNickname(nickname); li.setHeadimgurl(headimgurl); lists.add(li); 而后就能够经过Spring的传值方式把集合共享到做用域里,在jsp界面再经过EL表达式获取便可 model.addAttribute("lists",lists);

这里用到HttpUtil工具类

public class HttpUtil {
/**
 * 发送get请求
 * @throws Exception
 */
public static String get(String url) {

	String result = "";
	InputStream in = null;
	try {
		// 打开和URL之间的链接
		HttpURLConnection conn = (HttpURLConnection) new URL(url)
				.openConnection();
		// 设置通用的请求属性
		conn.setRequestProperty("accept", "*/*");
		conn.setRequestProperty("connection", "Keep-Alive");
		conn.setRequestProperty("Content-Type", "application/json");
		conn.setRequestProperty("Accept", "application/json");
		conn.setRequestMethod("GET");
		// 创建实际的链接
		conn.connect();
		// 定义输入流来读取URL的响应
		in = conn.getInputStream();
		result = StreamUtils.copyToString(in, Charset.forName("utf-8"));
	} catch (Exception e) {
		e.printStackTrace();
	} finally {
		if (in != null) {
			try {
				in.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	return result;
}
复制代码

在js里集成下拉刷新

$(function () {
//初始化下拉刷新
$(document.body).pullToRefresh();
//下拉刷新
$(document.body).on("pull-to-refresh", function() {
window.location.reload();
});
//当下拉刷新的工做完成以后，须要重置下拉刷新的状态
$(document.body).pullToRefreshDone();
})
复制代码

上面的代码只能完成一点初级的要求,性能比较差.比较冗余,下面咱们对上面的代码进行优化----->查看更多功能(先跳转jsp界面,再调用加载更多方法)

先贴上代码

public class EvaluateController {
@Autowired
private IEvaluateService service;

//先跳转evaluate.jsp界面
@RequestMapping("/evaluate")
public String evaluatemanager(Model model) {
    return "evaluate";
}
/**
 * 做用:加载更多,执行查询分页相似的功能,点击查询更多功能会加载固定数量的消息,知道加载所有
 * @param qo  封装当前页,页面大小,和起始位置
 * @return 返回pageResult对象
 */
@RequestMapping("/loadmore_list")
@ResponseBody
public PageResult loadMorelist(QueryObject qo) {
    PageResult pageResult=service.evaluatePageResult(qo);
    List<Evaluate> rows=  pageResult.getRows();
    for (Evaluate li : rows) {
        String openid = li.getOpenID();
        //调用接口获取用户详细信息
        String result = HttpUtil.get(WeixinUtil.GET_USERINFO_URL.replace("ACCESS_TOKEN", WeixinUtil.getAccessToken()).replace("OPENID", openid));
        //转成json对象
        JSONObject json = JSON.parseObject(result);
        String nickname = (String) json.get("nickname");
        String headimgurl = (String) json.get("headimgurl");
        li.setNickname(nickname);
        li.setHeadimgurl(headimgurl);
    }
    return pageResult;
}
}
复制代码

接着咱们来修改jsp界面

只是把上面的jsp界面的内的内容修改一下,把原来的循环全部的评论条数的代码所有删除,点击加载更多经过js动态向jsp标签中批量添加数据 ,这样明显更加灵活,

<body>
<div class="weui-pull-to-refresh__layer">
    <div class='weui-pull-to-refresh__arrow'></div>
    <div class='weui-pull-to-refresh__preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
</div>
<div class="weui-panel weui-panel_access">
     <div class="weui-panel__hd">宝贝评价</div>
     <div class="weui-panel__bd"></div>
    <div class="weui-panel__ft">
    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
        <div class="js-load-more">加载更多</div>
        <span class="weui-cell__ft"></span>
    </a></div>
</div>
咻咻😝
</body>
复制代码

evaluate.js

$(function () {
//下拉刷新
$(document.body).pullToRefresh();
$(document.body).on("pull-to-refresh", function () {
    window.location.reload();
});
$(document.body).pullToRefreshDone();
});
$(function () {
/*初始化*/
/*计数器*/
var counter = 1;
/*从那一页开始加载*/
var pageStart = 1;
/*每次加载多少条数据*/
var pageSize = 10;


/*第一次加载页面*/
getData(counter, pageSize);
/*监听点击加载更多更多按钮,每次点击都会触发对应的事件*/
$(document).on('click', '.js-load-more', function () {
    counter++;
    pageStart = counter * pageSize;
    alert("counter:"+counter + "pageSize:" + pageSize);
    //第一次加载页面时就要调用
    getData(counter, pageSize);
    $(".js-load-more").hidden=true;
});
})
复制代码

//传入参数查询结果集
function getData(pageStart, pageSize) {
$.ajax({
    type: 'GET',
    url: '/loadmore_list.do?page=' + pageStart + "&rows=" + pageSize,
    dataType: 'json',
    success: function (reponse) {
        console.info(reponse);
        var data = reponse.rows;
        var total=reponse.total;
        var sum = reponse.rows.length;
        var result = '';

        if (sum - pageStart < pageSize) {
            pageSize = sum - pageStart;
        }
    //拼接要展现的界面
        for (var i = 0; i < data.length; i++) {
            result += '<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd">' +
                '![]('+data[i].headimgurl+')</div><div class="weui-media-box__bd">'+
                '<h1 class="weui-media-box__title">'+data[i].nickname+'</h1>' +
                '<p class="weui-media-box__desc">'+data[i].content+'</p>' +
                '</div></a>';
        }
     //将拼接结果追加到指定位置
        $('.weui-panel__bd').append(result);

        /*隐藏more按钮*/
        if (pageStart >= total) {
            $(".js-load-more").hidden=true;
        } else {
            $(".js-load-more").show();
        }
    },
    error: function (xhr, type) {
        alert('亲你的网络不稳定哦!');
    }
});
}
复制代码

这样咱们就把须要优化的部分优化了