欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-01-25 10:19浏览: 来源:网络 作者:tianshu

一: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生成证书,但是第一种无法访问,未找到原因,还是先记录下来。

方案一:

参考链接:https://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

方案二:

参考链接:https://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都拿不到参数。


解决方法参考链接:https://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

 

四:获取当前日期:微信小程序联盟:https://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中增加对应的定义。





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