小程序开发填坑《二十九》view的并排，tomcat配置成https，wx.request后台数据交互

一：view问题

1、view的并排

根据官网的说明，增加样式：style=”flex-direction:row;”，但是并没有生效，于是去demo种扒了下样式，增加：.flex-wrp{display:flex;}，完成并排

2、view的隐藏与显示

没有找到获取view的方式，希望有找到的可以一起分享

用了setData的方式，实现了该功能，大概逻辑就是在data中增加一个参数，然后在.wmxl中，style直接使用该参数，然后在按钮点击的时候，用setData修改该参数的值。

二：tomcat配置成https；

为了给本地tomcat配置https协议，查看了一些基本资料，本地生成证书要是是各大认证机构不认可（参考12306），但是不妨碍本地个人使用。

根据网上资料，用Java自带的keytool生成证书，但是第一种无法访问，未找到原因，还是先记录下来。

方案一：

参考链接：http://blog.csdn.NET/jimmy609/article/details/18557955

主要命令：

keytool -genkey -alias tomcat -keyalg RSA -keystore d:/ssl/keys-tools
keytool -export -file d:/ssl/tomcat.crt -alias tomcat -keystore d:/ssl/keys-tools
keytool -import -keystore “D:\Program Files\Java\jre1.8.0_25\lib\security\cacerts” -file D:/ssl/tomcat.crt -alias tomcat

tomcat server.xml配置：

<Connector port=”8443″ protocol=”org.apache.coyote.http11.Http11NioProtocol”
maxThreads=”150″ SSLEnabled=”true” scheme=”https” secure=”true”
clientAuth=”false” sslProtocol=”TLS” sslEnabledProtocols=”TLSv1″
keystoreFile=”D:\ssl\1\keys-tools”  
keystorePass=”tomcat”  
ciphers=”tomcat”/>

产生异常（未解决）：

javax.net.ssl.sslhandshakeexception:no appropriate protocol

方案二：

参考链接：http://blog.csdn.net/zhangyong125/article/details/49944683

主要命令：

keytool -genkey -v -alias tomcat -keyalg RSA -keystore D:\ssl\2\tomcat.keystore  -validity  36500
keytool -genkey -v -alias client -keyalg RSA -storetype PKCS12 -keystore D:\ssl\2\client.p12
keytool -export -alias client  -keystore D:\ssl\2\client.p12 -storetype PKCS12 -storepass tomcat -rfc -file D:\ssl\2\clientforserver.cer   
keytool -import -v -file D:\ssl\2\clientforserver.cer -keystore D:\ssl\2\tomcat.keystore  
keytool -list -keystore D:\ssl\2\tomcat.keystore 
keytool -keystore D:\ssl\2\tomcat.keystore -export -alias tomcat -file D:\ssl\2\CA.cer 

tomcat server.xml配置：

<Connector port=”8443″ protocol=”org.apache.coyote.http11.Http11NioProtocol”
SSLEnabled=”true” maxThreads=”150″ scheme=”https” secure=”true”
clientAuth=”true” sslProtocol=”TLS” keystoreFile=”D:\\ssl\\2\\tomcat.keystore”
keystorePass=”tomcat” truststoreFile=”D:\\ssl\\2\\tomcat.keystore”
truststorePass=”tomcat”/> 

访问成功。

做个记录，备查

三：wx.request后台数据交互

记录微信小程序wx.request这个api在跟后台交互时遇上的问题。

1、根据资料，完成第一步，请求发送，代码如下：

[javascript] view plain copy

• wx.request({  
•           url: ‘https://localhost:8443/xiaochengxu/addBill.do’,  
•           data: e.detail.value,  
•           method: ‘POST’,  
•           success:function(res) {  
•               console.log(‘submit success’);  
•           },  
•           fail:function(res){  
•               console.log(‘submit fail’);  
•           },  
•           complete:function(res){  
•               console.log(‘submit complete’);  
•           }  
•   
•       })  

后台成功接收到请求，控制台也打印了submit success和submit complete，但是，后台请求并未接收到数据，打开调试，发现数据都在request payload中，所以后台无论是springmvc的映射bean还是req.getParameter都拿不到参数。

解决方法参考链接：http://blog.csdn.NET/mhmyqn/article/details/25561535/

简单说就是增加了header: {‘content-type’: ‘application/x-www-form-urlencoded’},后台成功获取数据。至此，代码如下：

[javascript] view plain copy

• wx.request({  
•           url: ‘https://localhost:8443/xiaochengxu/addBill.do’,  
•           data: e.detail.value,  
•           method: ‘POST’,  
•           header: {‘content-type’: ‘application/x-www-form-urlencoded’},  
•           success:function(res) {  
•               console.log(‘submit success’);  
•           },  
•           fail:function(res){  
•               console.log(‘submit fail’);  
•           },  
•           complete:function(res){  
•               console.log(‘submit complete’);  
•           }  
•   
•       })  

2、接收请求返回数据

这一步问题不大，我是按照json格式返回的，只是按照官网写的console.log(res.data)的话，会在控制台打印Object，带上参数名就好了，比如res.data.code

四：获取当前日期：
微信小程序联盟：http://www.wxapp-union.com

微信小程序获取当前日期的正确姿势

1、微信自己提供的util中，有一个日期格式化的工具，如果要使用的话，请导入var util = require(‘../../utils/util.js’)，然后关于util.formatTime(new Date)的使用，不要用Date.now()，请老老实实使用  new Date()。

2、因为使用的格式是yyyy-mm-dd，所以修改了util中的方法，仿照formatTime写了formatTime2，记得在module.exports中增加对应的定义。

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。