2019-12-12 00:10:18 qq_41219586 阅读数 21
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

    10582 人正在学习 去看看 秦子恒

1.说明:前端使用微信开发者工具,后台用ideal,后台框架为springboot+mybatisplus 本文主要内容是实现从数据库查询数据并运用在页面上的整个流程

后台不会搭建的可以点击下面的链接看下另一篇博客
链接

2.数据库表的数据以及显示效果

在这里插入图片描述
在这里插入图片描述

3.后台关键代码

(1)action层

  /**
     * 查找商品的类别 返回数组类型的数据
     * */
    @RequestMapping("/findclassify")
    public ArrayList findclassify(){
        ArrayList classify =  goodsService.findclassify();
        System.out.println(classify);
        return classify;
    }

(2)service层

 public ArrayList findclassify() {
        return goodsDao.findclassify();
    }

(3)dao层

public ArrayList findclassify();

(4)mapper映射文件

    <select id="findclassify" resultType="java.lang.String">
        select  classify_name from t_classify ;
    </select>

4.前台关键代码

(1)wxml代码
key==index?‘is_checked’:‘classify_normal’–>根据点击与未点击的部分显示不同样式,具体查看下面的博客
链接

  <!-- 左边分类栏 -->
  <view class="left">
   <!-- wx:for遍历js中的classify1数组并显示-->
    <view wx:for="{{classify1}}"  wx:key="key" data-url="{{item.classify_id}}"  >
      <view class="{{key==index?'is_checked':'classify_normal'}}" bindtap="Checked"  data-index='{{index}}'>{{item}} </view>
    </view>
  </view>

(2)wxss代码

/*左边分类模块*/
.left{
  width: 160rpx;
  min-height: 1000rpx;
  background-color: white;
}
/*点击前的样式*/
.classify_normal{
width: 160rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #E4E4E4;
border-top: solid 1rpx white;
}
/*被点击选中后的样式*/
.is_checked{
width: 158rpx;
height: 110rpx;
display: flex;
justify-content: center;
align-items: center;
background-color:white;
border-bottom: solid 2rpx #E4E4E4;
border-left: solid 4rpx red;
}

(3)js代码

 /**
   * 页面的初始数据
   */
  data: {
    classify1:[
    ],
    key:0
    }
     /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /**
     * 查询商品有哪些类型
     */
    // findclassify:是action层@RequestMapping内对应的值,
    wx.request({
      url: 'http://localhost:8080/findclassify',
      success:function(e){
      /*把查出来的数据赋值给classify1数组*/
        that.setData({
          classify1: e.data
        }) 
      }
    })

该方法并没有向数据库传参数 ,只是一个简单的查询;
如果是要传参数到后台,那么在wx.request里加上一个data:{}就可以了;代码如下
findgoods:是action层@RequestMapping内对应的值,

   wx.request({
      url: 'http://localhost:8080/findgoods',
      data:{
			classify:classify的值
		}
    })

后台数据接收如下:
在这里插入图片描述

2017-05-01 16:41:08 y_f_raquelle 阅读数 3537
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

    10582 人正在学习 去看看 秦子恒

微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html


首先申请一个微信公众开发测试账号:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login


申请后会提供appID和appsecret,你需要在自己的代码中添加接口配置的处理。

但此处URL必须为一个公网地址,且使用80端口,这就涉及到之前讲到的公网映射的方式。通常使用ngrok,注册后获得authtoken并配置,使用ngrok http <port>即可将指定端口映射到公网80端口。

接口配置的java示例:(参考Journey的博客

@WebServlet(urlPatterns = "/wx", name = "wxHouseKeeperServlet")  
public class HouseKeeper extends HttpServlet {  
    public static final String TOKEN = "mzmzo";  
  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        try {  
            // 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数  
            String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)  
            String timestamp = request.getParameter("timestamp");// 时间戳  
            String nonce = request.getParameter("nonce");// 随机数  
            String echostr = request.getParameter("echostr");// 随机字符串  
            PrintWriter out = response.getWriter();  
            // 将token、timestamp、nonce三个参数进行字典序排序  
            String[] params = new String[] { TOKEN, timestamp, nonce };  
            Arrays.sort(params);  
            // 将三个参数字符串拼接成一个字符串进行sha1加密  
            String clearText = params[0] + params[1] + params[2];  
            String algorithm = "SHA-1";  
            String sign = new String(  
                    Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));  
            // 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信  
            if (signature.equals(sign)) {  
                response.getWriter().print(echostr);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }     
}  

此处TOKEN与网页中填写的Token一致即可

接下来配置“网页授权获取用户基本信息


注意填写时不用加http://,只填写域名即可。

完成后扫描下方二维码即可关注自己的公众测试号,网页中会显示关注用户的Openid。

下载微信Web开发工具,即可模拟手机调试


完成登录和绑定后,开发者就可以开始调试微信网页授权,在地址栏直接输入URL

示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

这里appid填写之前注册后得到的,redirect_uri指向自己的公网域名下的url,response_type为code,scope为snsapi_base表示静默授权,state填写uri后的mapping。注意这里的redirect_uri和state可能需要urlencode。








2017-06-26 16:19:41 Edison_03 阅读数 371
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

    10582 人正在学习 去看看 秦子恒

参照微信开发文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421135319


根据官网文档可知,整个微信开发总体有三个步骤,下面解析第一个步骤:配置微信服务器

第一步:填写服务器配置

登录微信公众平台官网后,在公众平台官网的开发-基本设置页面,勾选协议成为开发者,点击“修改配置”按钮,填写服务器地址(URL)、Token和EncodingAESKey,其中URL是开发者用来接收微信消息和事件的接口URL。Token可由开发者可以任意填写,用作生成签名(该Token会和接口URL中包含的Token进行比对,从而验证安全性)。EncodingAESKey由开发者手动填写或随机生成,将用作消息体加解密密钥。

同时,开发者可选择消息加解密方式:明文模式、兼容模式和安全模式。模式的选择与服务器配置在提交后都会立即生效,请开发者谨慎填写及选择。加解密方式的默认状态为明文模式,选择兼容模式和安全模式需要提前配置好相关加解密代码。

第二步:验证消息的确来自微信服务器

开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数如下表所示:

参数
描述
signature 微信加密签名,signature结合了开发者填写的token参数和请求中的timestamp参数nonce参数
timestamp 时间戳
nonce 随机数
echostr 随机字符串


开发者通过检验signature对请求进行校验(下面有校验方式)。若确认此次GET请求来自微信服务器,请原样返回echostr参数内容,则接入生效,成为开发者成功,否则接入失败。加密/校验流程如下:

1)将token、timestamp、nonce三个参数进行字典序排序

2)将三个参数字符串拼接成一个字符串进行sha1加密

3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信

本过程的代码如下:

(1)核心业务类

public class coreService extends HttpServlet{
	
	private static final long serialVersionUID = 1L;

	/**
	 * 验证是否是微信客户端发来的请求
	 */
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String signature = req.getParameter("signature");
		String timestamp = req.getParameter("timestamp");
		String nonce = req.getParameter("nonce");
		String echostr = req.getParameter("echostr");
		
		//开发者通过检验signature对请求进行校验(下面有校验方式)。
		//若确认此次GET请求来自微信服务器,请原样返回echostr参数内容,则接入生效,
		//成为开发者成功,否则接入失败
		PrintWriter out = resp.getWriter();
		if (signUtil.checkSignatrue(signature,timestamp,nonce)) {
			out.print(echostr);
		}
		out.close();
		out=null;
	}
	
}

(2)工具类--sha1加密方法直接在百度上搜的

public class signUtil {

	public static final String token = "imooc";

	public static boolean checkSignatrue(String signature, String timestamp, String nonce) {
		// 1)将token、timestamp、nonce三个参数进行字典序排序
		String[] strings = new String[] { token, timestamp, nonce };
		Arrays.sort(strings);
		// 2)将三个参数字符串拼接成一个字符串进行sha1加密
		StringBuffer sb = new StringBuffer();
		for (int i = 0; i < strings.length; i++) {
			sb.append(strings[i]);
		}
		// 3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
		String tmpStr = getSha1(sb.toString());
		return tmpStr.equals(signature);
	}

	// Sha1签名
	public static String getSha1(String str) {
		if (str == null || str.length() == 0) {
			return null;
		}
		char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' };
		try {
			MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
			mdTemp.update(str.getBytes("UTF-8"));

			byte[] md = mdTemp.digest();
			int j = md.length;
			char buf[] = new char[j * 2];
			int k = 0;
			for (int i = 0; i < j; i++) {
				byte byte0 = md[i];
				buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
				buf[k++] = hexDigits[byte0 & 0xf];
			}
			return new String(buf);
		} catch (Exception e) {
			return null;
		}
	}
}

第三步:依据接口文档实现业务逻辑

验证URL有效性成功后即接入生效,成为开发者。你可以在公众平台网站中申请微信认证,认证成功后,将获得更多接口权限,满足更多业务需求。

成为开发者后,用户每次向公众号发送消息、或者产生自定义菜单、或产生微信支付订单等情况时,开发者填写的服务器配置URL将得到微信服务器推送过来的消息和事件,开发者可以依据自身业务逻辑进行响应,如回复消息。

2018-01-15 22:14:46 MYTLJP 阅读数 4949
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

    10582 人正在学习 去看看 秦子恒

用了好几个小时的时间,整理了一下关于公众号的思维导图,由于CSDN不能上传相对应的文件,所以萍子一一的分解开的截图附上来,希望对大家有所帮助哦~
因为是电脑设备自动截图,又鉴于内容比较多,可能不是太清楚,需要的小伙伴们,可以联系我,我可以随时发给你。

学习微信公众号需要的配置

这里写图片描述


微信开发的主体、请求方式、数据类型和环境

主体

这里写图片描述

请求方式

这里写图片描述
这里写图片描述

数据类型和环境

这里写图片描述


开始开发

获取access_token值并存储

这里写图片描述
这里写图片描述


账号管理

生成带参数的二维码

这里写图片描述

长链接转短链接

这里写图片描述


消息管理

获取微信服务器的IP地址

接收普通消息

接收事件推送

被动回复用户消息

这里写图片描述


微信网页授权

微信网页授权步骤

第一步:跳转页面,用户同意授权,获取code

这里写图片描述

第二步:通过code换取网页授权access_token(与普通的access_token不一样,具体见下方)
第三步:如果需要,刷新access_token值

这里写图片描述

第四步:拉取用户信息(需要scope为snsapi_userinfo)
第五步:附,检验授权凭证access_token是否有效,一般用不到

这里写图片描述


微信JS-SDK

说明

这里写图片描述

JS-SDK使用步骤

这里写图片描述

上传图片素材

这里写图片描述


微信公众号

握手协议

这里写图片描述

自定义菜单

自定义菜单类型

这里写图片描述

自定义菜单的设置

这里写图片描述

自定义菜单参数说明

这里写图片描述

获取自定义菜单

这里写图片描述


自定义菜单事件推送/被动回复用户信息

自定义事件推送

这里写图片描述

被动回复用户信息

这里写图片描述

根据菜单类型的点击,被动回复

点击按钮事件

这里写图片描述

公众号首次被某个用户关注的推送

这里写图片描述

微信扫一扫,并展示扫的内容

这里写图片描述

推送图文消息

这里写图片描述

回复图片消息
没有点击按钮

这里写图片描述

2018-10-16 09:41:09 shixiansen6535 阅读数 579
  • 微信公众号开发-开发后台设计

    《微信公众号开发-开发后台设计》是子恒老师出品的微信公众号开发系列之一,这套视频教程,使用响应式网站的模式,帮你设计好开发后台,让你在后续的微信公众号开发中更高效。欢迎反馈,QQ/微信:68183131

    10582 人正在学习 去看看 秦子恒

 

        开发一个微信小程序需要https域名以及服务器

        1. 进入微信公众平台https://mp.weixin.qq.com/注册微信小程序,并获得APPID和APPsecrete。

            首先你得注册你的小程序,填写小程序的内容,过程很简单,博主就不赘述了

    

        

2.下载微信开发者工具,在上面那个网站可以下载。

    微信开发者工具是专门写微信小程序前台页面的,有html/javaScript/css基础的朋友可以结合API直接实践了。具体开发内容我就不详细说明了。

 

     

  

     3.后台和服务器

        后台:因为博主在比较熟悉SSM框架,就使用了SSM框架的后台,开发工具Eclipse,有javaWeb开发经验的朋友这里就很容易了,至于大家使用SSH,还是直接使用servlet,或者其他后台,这就看个人所熟悉什么技术了。

        服务器:在阿里云买了个服务器(学生价9.9/月,腾讯云似乎更便宜),数据库使用的是mysql。 嫌安装麻烦的朋友在这里推荐OneinStack,一键帮你装好java+tomcat+mysql,好像就几块钱。

        如果是购买阿里云的服务器,注意一下:阿里云在外部还有一层保护,记得配置安全组规则,打开80,8080,3306,443,8443端口,博主被这里坑了很久,因为没有打开3306端口,一直连接不上服务器上的mysql。

        至于前台如何连接到后台,api中有,最简单的就是wx.request直接发起url请求(多看看别人小程序源码以及API)。

    

  4.https域名(挺麻烦,但是两到三天就能搞定)

    开发微信小程序需要SSL证书的域名,在这里推荐大家买个便宜的域名,博主购买的是top,在阿里云上买的,几块钱。

    接下来就是域名备案了,这个比较麻烦,但是是必须的,推荐阿里云备案系统,大概两三个工作日就搞定了,阿里云的工作人员态度都非常好。

    域名备案完成后,阿里云上有免费的SSL证书,申请成功后下载,并按照他们的提示进行配置,就大功告成啦!

    不要忘了域名解析要解析到自己的服务器上。

    还有最后一步,你必须登录微信公众平台,配置服务器域名,这样才允许在微信前台中使用该域名。

   5.接下来就可以安心搞开发了,博主在开发过程中看了大量其他小程序的源码和官方API,终于完成了这个毕业设计。
--------------------- 
作者:huige_666 
来源:CSDN 
原文:https://blog.csdn.net/huige_666/article/details/79640073?utm_source=copy 

没有更多推荐了,返回首页