微信调试

发表于 | 分类于 | 浏览 次

随着微信小程序的出现,相信会有一大批人会开始接触微信开发,而在微信开发的过程中,其调试是非常繁琐的.下面我将我
自身在微信开发方面做一些总结,希望可以抛砖引玉.
其实早就应该反思自己的微信开发流程了,但是一直有项目,所以就搁置了.

##微信调试的难处

###微信接口的使用的粗略说明
其实前端所说的微信开发,目前来说就是微信的 jssdk 的使用与调试.微信的 jssdk 上手其实并不难, API 都比较友好,
关键是微信接口的调试,因为微信自身必须顾及自己服务器等的安全性,因此在使用 jssdk 之前,需要通过验证,拿取一个
token,经过 SHA1 加密算法得到一个签名,不过这部分微信已经提供有 Node.js 或 Java 等版本的代码供参考,可以直接
用,相信并不困难.
后台只需要将得到的签名, 与用于生成签名的公众号的 appid, secret, 时间戳在使用微信接口之前通过验证:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var currentUrl = window.location.href.split("#")[0];

$.ajax({
	type: "post",
	url: "url",
    dataType: "json",
	data:{
		"url": currentUrl
	},
	success: function(msgs){
		console.log(msgs);
		var signPackage = JSON.parse(msgs);
		wx.config({
			debug: false,
			appId: signPackage.appId,
			timestamp: signPackage.timestamp,
			nonceStr: signPackage.nonceStr,
			signature: signPackage.signature,
			jsApiList: [  //填写需要使用的 API 名
			    'chooseImage',
				'previewImage',
				'uploadImage'
			]
		});
	}
});

即可使用.

###难处
虽然 wx.ready 函数有选项可以开启调试模式(将 debug 选项改为 true), 可以 alert 出部分报错信息,但是在手机
上却不能看到我们自己的报错信息,有时候我们需要知道微信返回的是一个字符串还是一个数组还是一个对象,如果不能通
过本地调试,而是需要通过线上调试的话将会造成很大的困扰与不便, 我先前的做法是使用 git 部署并线上调试,在这里
和大家说明极其不推荐这种方式,这只能在项目很赶的时候用来解决燃眉之急的.
由于调试微信接口不接受 localhost 本地服务器,必须自行准备一个带有域名服务器或者使用内网穿透工具.
(使用 https://ngrok.com/ 或 国内版 https://natapp.cn/)；

##为什么要使用内网穿透工具
微信公众平台都必须在公众管理平台里面配置才能获得调用 jssdk 的权限(即 wx.ready 函数通过).


里面的 url 填写的是你使用内网穿透工具获得的 url 之后的接口地址.而 token 是后台需要规定用于生成签名的字符串
并且这里的 url 只能接收域名(IP 地址也不行),如果我们不想使用线上调试希望本地调试的话,就只能使用内网穿透工具.

###内网穿透
我们上网之前都必须通过 DHCP 协议获取一个 IP 地址,但是这个 IP 地址并没有映射一个域名,即 DNS 服务器没有一个
CNAME 映射,如果我们需要将本地 IP 映射成一个域名,然后将这个域名使用到我们的微信配置上,那么就需要使用内网穿
透工具,内网穿透就是分配一个域名(这里是二级域名),绑定到本地获得的 IP 地址,并且到 DNS 服务器增加一个 CNAME
查询.

##调试准备
我在这里使用 ubuntu 16.04 进行说明.步骤如下:

###下载工具
从 https://ngrok.com/download 下载适合自己系统的版本.解压后可以看到一个执行文件.

###使用注册后的 authtoken 启动 ngrok

###命令行执行

1
./ngrok http port  //port 是自己需要设定的端口号,执行后会得到下面的界面


可以看到, 本地的 127.0.0.1:port 已经可以映射为一个域名地址 http://3b69fdf1.ngrok.io, 也可以使用 https 版
本的 https://3b69fdf1.ngrok.io .

###查看转接的 HTTP 信息
访问 localhost:4040 就可以看到映射的网址的 HTTP 访问情况了.

###最后
这样就可以本地调试了,如果需要用手机进行调试,那么只需要使用手机访问获得的域名就可以访问到页面了.

##附录

  • 在上线自己的产品之前一定要确保自己的域名是有公信部备案的,不然在绑定网页域名的时候就会出错,无法绑定.
  • ngrok 每次执行分配的域名是随机生成的,所以如果想固定使用一个域名,那么先执行ngrok -authtoken autoken port, authtoken 是注册时得到的 token, port 是想要绑定的端口号.然后执行 ngrok -subdomain testHost port 这样就可以通过 http://testHost.ngrok.io 就可以一直访问到本机的 127.0.0.1:port 了.
  • ngrok 文档