微信小程序aes加解密

参考[资料2]中的aes

var CryptoJS = require('../../utils/aes.js');

var str = 'abcabcabcabc';

// 密钥 16 位
var key = 'abcabc36511111';

// 初始向量 initial vector 16 位

var iv = 'abcabc36500000';
var pwd = CryptoJS.encrypt(str, key, iv);
console.log('AES加密:' + pwd);

var original = CryptoJS.decrypt(pwd, key, iv);
console.log('AES解密:' + original);

相关资料

资料1-PHP、iOS、JAVA以及微信小程序之间的加解密

资料2-微信小程序aes加密解密 这个页面的就是下面那个的资源

资料3-微信小程序AES加密 这个版本的AES加密提到的可以加偏移量 但是需要CSDN积分才可下载资源

微信小程序底部导航栏-tabBar

app.json 文件

    "tabBar": {
        "list": [
            {
                "pagePath": "pages/listTask/listTask",
                "text": "列表",
                "iconPath": "resources/images/listTask.png",
                "selectedIconPath": "resources/images/listTask.png"
            },
            {
                "pagePath": "pages/task/task",
                "text": "添加",
                "iconPath": "resources/images/task.png",
                "selectedIconPath": "resources/images/task.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "resources/images/my.png",
                "selectedIconPath": "resources/images/my.png"
            }
        ]
    }

相关资料

官方文档 tabBar

微信小程序之底部导航栏——tabBar

微信小程序thinkphp图形验证码类的使用

app.js全局数据中添加header

  globalData: {
    userInfo: null,
    header: {
      'Cookie': ''
    }
  }

test.js

const app = getApp()

Page({
   data: {
     imgUrl: '' ,
     result: ''
   },
   onLoad() {
     this .initCaptcha();
   },
   initCaptcha() {
     let url = '{域名}/Captcha/Index' ; // 空请求 为了拿到sessionId
     wx.request({
       header: app.globalData.header,
       url,
       data:{},
       success: (res) => {
         this .setSessionId(res);
         this .downloadCaptcha();
       }
     })
   },
   downloadCaptcha(){
     let url = '{域名}/Captcha/Generate?' + new Date().getTime();
     wx.downloadFile({
       header: app.globalData.header, // down时是没有sessionId
       url,
       success: (res) => {
         console.log(res);
         this .setData({
           imgUrl:res.tempFilePath
         });
       }
     })
   },
   refreshCaptcha() {
     this .initCaptcha();
   },

   setSessionId(res) {
     let cookieStr = res.header[ 'Set-Cookie' ];
     // app.globalData.header.Cookie = cookieStr;
     if (cookieStr){
       let cookies = cookieStr.split( '; ' )

       if (!cookies || cookies.length <= 0)
         return ;

       cookies.forEach(
         (v) => {
           const str = v.split( '=' );
           if (str[0] && str[0] == 'PHPSESSID' ) {
             let sessionId = decodeURI(str[1]);
             app.globalData.header.Cookie = `PHPSESSID=${sessionId}`;
           }
         }
       );
     }

   },

   onSubmit(e){
     let { code } = e.detail.value;
     let url = '{域名}/Captcha/Validate' ;
     wx.request({
       header: app.globalData.header,
       url,
       data: {code},
       success: (res) => {
         console.log(res);
         this .initCaptcha();

         this .setData({
           result:res.data.message
         })
       }
     })
   }
})

相关资料

微信小程序可以用thinkphp的验证码类库captcha来做图形验证码
微信小程序Session问题

微信小程序-自定义屏幕

宽度 高度 DRP 指的是什么?

宽度、高度指的是逻辑像素, DRP指的是device pixel ratio 设备像素缩放比, 设备物理像素和设备独立像素的比例.

微信小程序获取宽度,高度 DRP

wx.getSystemInfo({
  success: function(res) {
    console.log(res.pixelRatio)
    console.log(res.screenWidth)
    console.log(res.screenHeight)
  }
})

官方文档-getSystemInfo

相关资料

移动端web页面知识小结之像素、物理像素、逻辑像素

小程序-操作样式-CSS

小程序不是直接操作CSS, 而是通过页面变量.

<view class='{{alei}}' bindtap="a" style=" font-size: {{size}};> {{clickme}} </view>

//js文件传递类名,样式值
Page({
    data: {
        clickme: 'click me',
        alei: 'ac',//传递类名
        size: '30rpx',//传递样式值
    },

    //js文件定义点击事件函数
    a: function () {
        this.setData({
            clickme: 'changed data', //更改文本
            alei: 'bc', //更改样式
            size: '60rpx',//更改样式值
        })
    },
})