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

一：导航

导航分两种做法：

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