- 微信小程序可以用thinkphp的验证码类库captcha来做图形验证码吗
楼主菜鸡一枚,最近有在学习thinkphp,看到有个图形验证码的类库captcha,故想尝试用在小程序中。 小程序wxml代码如下: <!--pages/test/test.wxml--> <form bindsubmit="formsubmit"> <input name="code" placeholder="请输入验证码" style="border:1px solid black"/> <image onload="imageload" src="{{captchaImage}}" style="width:200px;height:88px;" ></image> <button form-type="submit">提交</button> </form > js代码如下: // pages/test/test.js Page({ data: { captchaImage:'https://www.st1207.com/captcha' //验证码图片地址 }, formsubmit: function (e) { console.log(e.detail.value); var that=this; wx.request({ url: "https://www.st1207.com/api/v3.captcha/index", //服务器验证地址 method:"GET", data:e.detail.value, success: function (res) { console.log(res.data); }, fail: function (err) { console.log(err); } }) }, }) 服务器代码如下 <?php namespace app\api\controller\v3; use think\Controller; use think\captcha\Captcha as Cap; class Captcha extends Controller{ public function index($code=''){ $captcha=new Cap; if(!$captcha->check($code)){ return '验证失败'.$code; }else{ return '验证成功'.$code; } } } ?> 代码完成,开始测试,虽然验证码可以正常显示,但是提交表单进行验证的时候总是提示验证失败。 [图片] 各种网络搜索查找资料,才发现thinkphp是用Session来储存验证码的。而小程序不支持主动保存cookie,更不会在request header中发送cookie。导致小程序每次向服务器发送请求的时候,SESSIONID都会发生变化,所以永远都不会验证成功。 思考解决办法:手动保存服务器response header中的sessionid,再向服务器发送验证请求的时候,在wx.request中手动添加header:{'cookie':'PHPSESSID=...' }. 查看以上代码,小程序第一次向服务器发送请求是在<image>组件加载服务器验证码图片的时候,此时没有办法获得response header。所以也就不能手动保存。 再想办法 :<image>组件的src 不直接使用服务器的图形验证码地址,先在onload事件中通过wx,request或者wx.downloadFile请求服务器https://www.st1207.com/captcha, 获得response header和图片信息再通过js的data 让小程序来显示。 查看wx.request 的回调函数success:function(res){ } [图片] 有response header,可以获得sessionID 为 res.header['Set-Cookie'],但是返回的res.data确是一堆乱码,无法来让<image>组件进行显示 查看wx.downloadFile 的回调函数[图片]虽然可以把图片下载下来进行显示,但是并不能获得response header。 作为一名菜鸟,不知道有没有表达的清楚,请各位大神帮忙看看还有没有其他办法。
2018-07-18 - navigationStyle设置为custom后,webview没有全屏
在小米手机上,navigationStyle设置为custom后,webview没有全屏,底部会有空白区域。 而且空白区域的高度似乎就是顶部状态栏的高度。 关键代码是: <web-view src="https://www.baidu.com" /> 微信客户端的版本是6.6.7,开发工具是 1.02.1806120。 下面图片中左边视图的底部是空白区域, 右边视图是手动拖动webview让顶部的状态栏出现,正好填充底部的空白区域。 [图片]
2018-06-25