微信小程序开发知识点汇总

一:导航

导航分两种做法:

做法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" />

 

posted @ 2022-05-05 10:57  Shapley  阅读(100)  评论(0编辑  收藏  举报