微信小程序真机(手机预览)https访问本地服务程序

2016-12-26

手机测试访问本地tomcat部署服务程序

真机https访问本地服务程序

先声明,本人小白一名,应公司部门老大要求学习微信小程序,纯粹新手,到目前为止就只做了一个很low的小程序,后台服务程序(Java)是公司内部早就写好的,已有一套完整的Web系统和App,我做的就是写好小程序页面调用后台接口完成与原生App相同的功能,仅此而已。

我写的这些东西很浅显,没什么价值,对大神们来说根本不值一提,但我想肯定也有一部分像我一样的小白,希望能帮到他们。

我在开发的时候遇到很多困难,尤其是真机预览这一步。如果不去访问后台服务程序,单纯的预览页面及之间的跳转等动作,真机测试很简单,有appid即可,不过没什么意义,完全是单机程序;但要访问后台,微信小程序对请求做了严格的限制,合法的域名、备案、服务器配置、ssl证书(还要检测能通过)、TLS版本问题、url不能有端口等等让人举步维艰。我遇到的问题是服务程序部署到公司服务器上,域名不能备案(好多信息要填,我不知道),证书检测未通过(阿里云申请的,不知道为什么),默认端口不对外开放也没权限使用,无奈我只能把服务程序部署到我本地电脑上,缺陷是只能自娱自乐,好处是也能体验小程序的功能,还能随时调试前后台。

说了好多废话,现在开始吧,这里只做一个小程序,点击按钮访问后台,成功后页面跳转。

需要材料:

1、 一台可以上网的电脑

2、 后台服务程序(我只会Java,这里用Java示范)

3、 tomcat部署服务程序,保证通过浏览器http://localhost:8080/xxx可以访问

4、 微信web开发工具

5、 能用无线网的手机

第一步:创建小程序

微信小程序真机(手机预览)https访问本地服务程序

微信小程序真机(手机预览)https访问本地服务程序

微信小程序真机(手机预览)https访问本地服务程序

微信小程序真机(手机预览)https访问本地服务程序

很简单,只有两个页面,index页面点击go按钮访问url成功后跳转到test页面

第二步:tomcat部署服务程序,浏览器访问

微信小程序真机(手机预览)https访问本地服务程序 开启tomcat

浏览器访问http://localhost:8080/StrutsTest/user_test

我后台用struts写的简单的程序,访问成功后后台打印

微信小程序真机(手机预览)https访问本地服务程序 后台访问成功!

第三步:小程序访问后台

将index.js中的url替换成http://localhost:8080/StrutsTest/user_test

注意将 微信小程序真机(手机预览)https访问本地服务程序 打勾,还没配置https,否则会报错

微信小程序真机(手机预览)https访问本地服务程序

打勾后保存重新编译调试

微信小程序真机(手机预览)https访问本地服务程序

微信小程序真机(手机预览)https访问本地服务程序 打印第二条信息,访问成功!

第四步:https配置

1、域名,我是在阿里云万网2块钱1年买的,大家随意,这里记为www.xxx.zzz

微信小程序真机(手机预览)https访问本地服务程序

2、查询本机ip

微信小程序真机(手机预览)https访问本地服务程序

微信小程序真机(手机预览)https访问本地服务程序 这里记为192.168.xxx.xxx,测试http://192.168.xxx.xxx/StrutsTest/user_test

微信小程序真机(手机预览)https访问本地服务程序 打印第三条信息,访问成功!

3、解析,我也是在阿里云解析的

微信小程序真机(手机预览)https访问本地服务程序

解析的ip为上述查询的本机ip,解析过程很快,1分钟后就生效

微信服务器配置,把域名填进去

微信小程序真机(手机预览)https访问本地服务程序

测试http://www.xxx.zzz:8080/StrutsTest/user_test

微信小程序真机(手机预览)https访问本地服务程序 打印第四条信息,访问成功!

4、ssl证书

有了域名后到阿里云或其他渠道申请免费证书

微信小程序真机(手机预览)https访问本地服务程序

下载下来后是这样的 微信小程序真机(手机预览)https访问本地服务程序 名称是订单号

5、https配置tomcat

首先用jdk的keytool工具将下载下来的pfx证书转成jks证书(其实不用转也可以,直接用pfx证书,但是我没配置成功,只好这么办)

微信小程序真机(手机预览)https访问本地服务程序

具体操作百度一下,很简单,之后配置tomcat

http://www.zzidc.com/main/help/showHelpContent/id_461.html

注意访问端口一定是443,另外server.xml中的其他两个地方的redirectPort="8443"默认8443也要改为443

配置完tomcat后重启tomcat,测试https://www.xxx.zzz/StrutsTest/user_test

微信小程序真机(手机预览)https访问本地服务程序 访问成功!

第五步:微信小程序https访问后台

将小程序中的url改为https://www.xxx.zzz/StrutsTest/user_test

微信小程序真机(手机预览)https访问本地服务程序 将勾去掉,让开发工具校验

保存编译测试,由于我家里电脑没有做上述配置,就不演示了,亲测可行!

第六步:真机预览

获取appid方法

http://www.moquu.com/v/372.html


确保手机与电脑在同一局域网下,可以用手机连接电脑的wifi,即可进行真机测试,我这里不方便演示,亲测可行!

最后,再贫几句,公司给我安排了别的任务,任务来了,小程序的学习也只当是业余活动了,万一以后还要用呢,只不过不能那么上心了,学多学少看心情吧。

我不知道把服务程序放到某些云平台上行不行,按理来说是可以的,我之前学微信公众号开发的时候我就把我的服务程序直接打包到新浪SAE,是可行的,但我目前用的服务程序不仅要配置tomcat,还有activemq什么的,云平台不可能这么智能吧,所以我还是在我电脑上自娱自乐吧,哈哈!

我这个垃圾教程也写完了,仅供参考,有错误还请大家指正,希望能帮到那些像我一样没有服务器可用的、没有备案的、证书检测未通过的、迷茫的小白们,权当是送给你们的圣诞礼物了,今后在自己电脑上就可以完成前后台对接,上线公布先别想了,乐呵乐呵得了!




2
收藏