2017-01-09 19:23:26 u013174217 阅读数 39883
  • 微信公众号开发-开发后台设计

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

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

    

微信小程序忽如一夜春风来,我也凑个热闹想弄一个玩一下,但是在用微信开发者工具创建项目的时候出现下面的问题:

1、如果公众号是个人的,点击无AppID就行,是因为个人公众号的AppID是不支持的。


2、个人公众号功能是受限的,想使用全部功能最好是创建一个高权限的企业公众号。

如果是企业公众号,需要确认当前登录微信开发工具的帐号是否绑定为开发者帐号。

开发--开发者工具--web开发者工具--绑定开发者帐号:


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

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

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

微信公众平台开发者文档: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

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

参照微信开发文档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-06-03 02:46:00 Fabulous1111 阅读数 3236
  • 微信公众号开发-开发后台设计

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

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

一、上传测试代码到腾讯云

这里写图片描述
如何使用微信开发者工具上传测试代码到腾讯云?可通过以下设置实现。

(1)登录小程序后台

进入https://mp.weixin.qq.com/使用注册小程序时的邮箱登录(勿使用公众号的邮箱登录),点击开发者工具如下,点击开通。
这里写图片描述

(2)下载nodejs demo

随后会进去腾讯云,绑定账号后,点击下载nodejs demo。
这里写图片描述
解压缩后看到文件目录结构如下:
这里写图片描述

(3) 复制server到已经使用mpvue初始化的工程

图为本人复制server到工程后的目录结构:
这里写图片描述

(4) 修改project.config.json

右侧画圈处为添加内容,配置服务端目录。
这里写图片描述

(5)配置完毕,开始上传

点击微信开发者工具中的腾讯云,选择上传测试代码,会出现以下界面,第一次上传勾选如下:
这里写图片描述
点击确定,代码开始上传,一段时间后上传成功。
这里写图片描述

二、腾讯云后台本地开发环境的搭建

为什么要搭建本地环境?当代码做了一些与后端相关的修改后,想查看结果,需要重新提交测试代码到腾讯云,等待一段时间以后才能看到结果,这样效率不高,搭建本地开发环境能有效地解决这个问题。

(1)修改server/config.js

打开之前拉进项目的server中的config.js,在CONF中添加以下配置,需将其中的配置项换成你的信息,比如APPID:

    serverHost: 'localhost',
    tunnelServerUrl: '',
    tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
      // 腾讯云相关配置可以查看云 API 秘钥控制台:https://console.cloud.tencent.com/capi
    qcloudAppId: '您的腾讯云 AppID',
    qcloudSecretId: '您的腾讯云 SecretId',
    qcloudSecretKey: '您的腾讯云 SecretKey',
    wxMessageToken: 'weixinmsgtoken',
    networkTimeout: 30000

这里写图片描述
填入其中需要你自己填写的以下三项信息:
- 腾讯云 APPID 位于:
- https://console.qcloud.com/developer
- 腾讯云SecretID以及SecretKey位于:
- https://console.qcloud.com/cam/capi

(1)mysql配置

以下是本人在mac下的操作,Windows相关指令可能有些差异,mysql安装mac下很容易,只需要输入指令brew install mysql即可,由于本人之前已经安装,因此不再演示。
①:启动、登录mysql
这里写图片描述
②:创建数据库
这里写图片描述
数据库名必需是cAuth,这是与server/config.js中的配置对应的。
这里写图片描述

(2)初始化环境

① :安装服务端依赖
进入server, 输入cnpm install回车等待安装完成
这里写图片描述
②: 安装全局依赖
①安装完成后,继续输入cnpm install nodemon -g回车,等待安装完成
这里写图片描述
③:初始化数据库
输入node tools/initdb.js回车,初始化数据库:
这里写图片描述

(3)测试是否成功

①:修改routes/index.js,用于测试,如下:
这里写图片描述
②:在controllers中添加demo.js,内容自定,可如下:
这里写图片描述
③:启动debug模式
在server目录下,输入npm run dev,若成功,可得到以下信息:
这里写图片描述

④:此时打开浏览器,输入localhost:5757/weapp/demo(端口为server/config指定),可看到:
这里写图片描述

至此,使用mpvue+koa开发小程序时,上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建的方法均介绍完毕。

有错误欢迎指出,周末愉快,晚安!

2018-03-23 18:07:38 u014740338 阅读数 3765
  • 微信公众号开发-开发后台设计

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

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

微信打开开发者模式后,以前通过微信后台配置的菜单就失效了,需要通过我们自己服务器后台配置(需要开发),还有一种比较简单的方法,就是通过微信提供的“微信公众平台接口测试工具”进行配置。下面重点说一下通过微信提供的测试工具进行配置的过程。

一、进入微信接口调试页面

地址:https://mp.weixin.qq.com/debug


接口类型选择“自定义菜单”

接口列表选择“自定义菜单创建接口/menu/create”

接口参数:

access_token: 是公众号访问接口用的,需要填写要修改的公众号access_token

body: 创建菜单的JSON串。示例如下:

示例一:(创建两个一级按钮菜单)

{
    "button": [
        {
            "type": "view", 
            "name": "报名邀请", 
            "url": "https://blog.csdn.net/u014740338"
        }, 
        {
            "type": "view", 
            "name": "我的博客", 
            "url": "https://blog.csdn.net/u014740338"
        }
    ]
}

我创建的是连个view类型的菜单,也可以创建click类型的。

示例二:(创建一级菜单+二级菜单)

{
	"button": [{
		"type": "view",
		"name": "技术积累",
		"url": "https://blog.csdn.net/u014740338"
	},
	{
		"name": "工作",
		"sub_button": [{
			"type": "view",
			"name": "遇到的bug",
			"url": "https://blog.csdn.net/u014740338"
		},
		{
			"type": "view",
			"name": "工作记录",
			"url": "https://blog.csdn.net/u014740338"
		}]
	},
	{
		"type": "view",
		"name": "我的博客",
		"url": "https://blog.csdn.net/u014740338"
	}]
}

body写好之后点击“检查问题”按钮。若创建成功会返回一下信息:


若创建失败,检查access_token是否正确。

若没有公众号来玩,可以自己申请一个测试账号,具体流程可以参考我上篇博客。

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