微信小程序开发知识点汇总
一:导航
导航分两种做法:
做法1:
使用系统自带导航,只需要在app.json文件中定义tabBar,并设置"custom": false,这样即使你在系统根目录下添加了custom-tab-bar组件,那么系统还会按照app.json中设置的方式,这种设置比较简单,不需要在项目的根目录添加custom-tab-bar组件,而且效果好,缺点是缺乏更细的控制,比如我如果想传参数等等(当然也有办法传参)。
做法2:
使用自定义导航,这种方式方式与上部的设置大部分相同,只是设置"custom": true,这样需要在custom-tab-bar组件中设置自己的各种参数,但这样做有一个问题,在点击切换后,selectedColor是不会随着切换变化的,原因就在于:每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar
接口,获取当前页面的自定义 tabBar 组件实例。即需要在切换后的子页面添加如下代码:
onShow: function () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) } },
tabbar和非tabbar页面间切换:
tabbar->非tabbar页面,代码:
wx.reLaunch({ url: '/pages/login' })
非tabbar页面->tabbar页面,代码:
wx.switchTab({ url: '../summary/index', })
二:验证码
验证码的思路为:后端以jfinal框架为例,后端输出图片:
public void captcha() { renderCaptcha(); }
其实这句话除了输出图片外,还负责将图片key值写入cookie,供后台验证时,根据key值获取缓存的验证码,与用户提交的进行验证。那么由于现在的项目一般都是前后端分离,前后端一般都不在一个服务器上,由于跨域问题,在越来越注重安全的浏览器安全策略下,cookie肯定是无法写入的,这个案肯定是行不通的。但可采用类似思路解决:即将key写入header中,并提交到后台,后端再进行获取,并进行比较。
前端图片的加载:
wx.request({ url: baseUrl + "/wx/mini/captcha?v=" + Math.random(), method: 'GET', responseType: 'arraybuffer', success: (res) => { if (res.statusCode == 200) { let cookie = res.header["Set-Cookie"].split(';'); let captchaData = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data); let hasFill = false; //获取header代码略。
this.setData({ captcha_key: captchaItem[1],//验证码图片key captchaData: captchaData//将二进制数据转为base64,并传递给image的src属性
}); } else { wx.showModal({ title: '提示', content: '验证码生成错误,请重试' }) } } })
前端:
<image class="captcha" src="{{captchaData}}" bindtap="updateCaptcha" />