备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

微信公众号开发(二)

2017-09-06 1090
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天把之前的知识整合一下 来做一个简单公众号购物界面的用户评价界面,供大家学习整体思路:我们一般看到的淘宝用户评价界面基本需要---->用户头像,用户昵称,和评论内容,评论时间等几个基本字段.

今天把之前的知识整合一下 来做一个简单公众号购物界面的用户评价界面,供大家学习

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

首先我们先创建实体类Evaluate

img_938760481480f65f5dbb091edae36e6a.png 
@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获取所有的用户评价

public interface EvaluateMapper {
List<Evaluate>listAll();
}

创建接口(略)和实现类

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

创建EvaluateMapper.xml

<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再创建控制类

<%@ 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 因为他给们提供了很多控件,根据官网提供的开发文档我们选择合适的控件,选择好控件后,我们需要向控件传入数据使得我们的界面有数据显示给用户看

img_de079b3d69bb1b97b9147ec6297ad991.png
选择WEIUI控件

接着我们可以通过EL表达式来获取需要的值(先说jsp界面)
首先要引入EL表达式的头文件
然后通过EL表达式从共享作用域里获取需要的值

img_39b73d93c98e1218fa175d5c1b42bc03.png

创建EvaluateController

@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();
})
img_19c1a45898df83717606b31d8f4f6c9a.png
效果图

上面的代码只能完成一点初级的要求,性能比较差.比较冗余,下面我们对上面的代码进行优化----->查看更多功能(先跳转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界面的<body>内的内容修改一下,把原来的循环所有的评论条数的代码全部删除,点击加载更多通过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('亲你的网络不稳定哦!');
    }
});
}

这样我们就把需要优化的部分优化了

文章标签：
CDN
Java
数据格式
JSON
JavaScript
前端开发
关键词：
微信公众平台开发
coderzs
目录
相关文章
camellia。
|
5月前
|
小程序 PHP
微信公众号开发（一）打通服务器与微信之间的通信
说来惭愧PHP做了这么久，好像就没有从头开发过一个微信公众号，这次刚好有机会从头接入开发一个完整的公众号，也不能说完整，但是这些微信的接口我基本上都试一试~看看大概是什么情况。 首先：打通服务器与微信之间的通信。
camellia。
60 0
2019ab
|
2月前
|
开发者
微信公众平台开发基本配置
微信公众平台开发基本配置
2019ab
89 0
Boale_H
|
2月前
|
移动开发 JavaScript
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
Boale_H
47 0
七镜
|
4月前
|
XML Go 数据格式
【微信公众号开发】基于golang的公众号开发——接入消息自动回复接口
【微信公众号开发】基于golang的公众号开发——接入消息自动回复接口
七镜
145 0
camellia。
|
5月前
|
小程序 PHP 开发者
微信公众号开发（八）生成带参数二维码，以及将二维码下载至本地
微信的二维码真是个神奇的东西。在我们开发中，应用也是很多~ 用户扫描带场景值（参数）二维码时，可能推送以下两种事件：
camellia。
66 1
camellia。
|
5月前
|
XML 移动开发 小程序
微信公众号开发（七）微信h5跳转小程序及小游戏示例
最近公司做活动，需要从h5页面跳转至微信小游戏。 当时接到这个需求的时候，就在想，这玩意能相互跳转么？ 后来百度了一下，还真行。
camellia。
117 1
camellia。
|
5月前
|
小程序 PHP
微信公众号开发（六）微信支付（发红包、企业支付到零钱）需要证书请求示例
这里最主要的就是curlpost请求的时候需要带上证书。否则请求会失败。
camellia。
71 0
camellia。
|
5月前
|
XML JSON 小程序
微信公众号开发（四）获取用户信息
获取用户信息，微信公众号提供了两种方式：
camellia。
54 0
camellia。
|
5月前
|
JSON 小程序 前端开发
微信公众号开发（三）设置底部菜单
填写access_token值，关于如何获取accesstoken值，请参见《微信公众号开发（二）微信公众号的access_token》 最后，将想要设置菜单的json写入body中。
camellia。
115 0
camellia。
|
5月前
|
JSON 小程序 数据库
微信公众号开发（二）微信公众号的access_token
微信对用户使用开放了很多的功能，如：自定义菜单接口、客服接口、获取用户信息接口、用户分组接口、群发接口，但是为了保证用户访问这些功能相对安全，每次访问都需要带上一个秘钥去验证身份。那么这个秘钥就是access_token。
camellia。
73 0

热门文章

最新文章

  • 1
    java发送微信公众号模板消息
  • 2
    【超详细！超多图！】【代码管理】Python微信公众号开发（3）- 服务器代码上传Github
  • 3
    Python爬虫-使用代理获取微信公众号文章
  • 4
    Python开发微信公众号后台（系列一）
  • 5
    Senparc.Weixin.MP SDK 微信公众平台开发教程（八）：通用接口说明
  • 6
    微信公众平台开发(74) 用户分组管理
  • 7
    微信公众平台开发入门教程（二）启用开发模式
  • 8
    27.3. 微信公众平台开发
  • 9
    微信公众平台小程序开放公测终于来了 附注册地址
  • 10
    微信公众平台消息接口星标功能
  • 1
    Python爬虫-使用代理获取微信公众号文章
    62
  • 2
    微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
    47
  • 3
    Java网络爬虫实践：解析微信公众号页面的技巧
    31
  • 4
    微信公众平台开发基本配置
    89
  • 5
    自己动手做一个Server酱-cloudflare workers实现通过微信公众号发送消息
    100
  • 6
    C#微信公众号HIS预约挂号系统源码
    89
  • 7
    【微信公众号开发】基于golang的公众号开发——接入消息自动回复接口
    145
  • 8
    微信公众号后台回复5s重试解决方案和思路
    76
  • 9
    【微信公众号对接】有关签名一直报错，提示invalid signature问题（我的签名和使用微信开发者工具验证返回的签名的是一致的）但还是报错！！！
    52
  • 10
    【微信公众平台对接】有关【创建发票卡券模板】调用示例
    37

    • 相关课程

    更多
  • C++ 入门教程开发文档
  • Python爬虫实战

    • 相关电子书

    更多
  • 微信PaxosStore简介
  • 《阿里巴巴Android开发手册》
  • 云栖社区特邀专家徐雷Java Spring Boot开发实战系列课程（第20讲）：经典面试题与阿里等名企内部招聘求职面试技巧
    • 下一篇
    将Stable Diffusion模型文件转存到FC环境的NAS