周报 第六期

这周在写 好记性记账本 中遇到好多 js 的问题， 许多功能还有待完善，不过目前自己可以用了。

首页

记账页

数据结构的转换

// 拿到的数据结构
const list = [
    { id: 1, amt: 10, type: -1, createTime: '2019-08-18 23:00' },
    { id: 2, amt: 2, type: -1, createTime: '2019-08-18 12:00' },
    { id: 3, amt: 15, type: 1, createTime: '2019-08-18 08:00' },
    { id: 4, amt: 8, type: -1, createTime: '2019-08-17 08:00' },
]

const obj = {}
list.forEach(item => {
    date = item.createTime.split(' ')[0]  // '2019-08-18'
    if (!obj[date]) {
        obj[date] = [] 
    }
    obj[date].push(item)
})

const newList = []
Object.keys(obj).forEach(key => {
    // key = '2019-08-18'
    const value = obj[key] // value 为 key 对应的值

    const o = {}
    o.date = key
    o.details = []

    let totalIncome = 0
    let totalPay = 0
    value.forEach(item => {
        if (item.type < 0) {
            totalPay += item.amt
        } else {
            totalIncome += item.amt
        }
        item.amt = item.amt * item.type
        delete item.createTime
        delete item.type
        o.details.push(item)
    })
    o.totalIncome = totalIncome
    o.totalPay = totalPay

    newList.push(o)
})

// 需要转换为这样的数据结构
const list2 = [
    {
        date: '2019-08-18',
        totalIncome: 15,
        totalPay: 12,
        details: [
            { id: 1, amt: -10 },
            { id: 2, amt: -2 },
            { id: 3, amt: 15 },
        ]
    },
    {
        date: '2019-08-17',
        totalIncome: 0,
        totalPay: 8,
        details: [
            { id: 4, amt: -8 },
        ]
    }
]

arr.forEach()

循环数组中的每一项且没有返回值

var arr3 = [1, 2, 3, 4, 5]
  let f = 0
  arr3.forEach( item=> {
    f += item
  })
console.log(f)
// 15

arr.map()

循环数组中的每一项且返回一个新数组，原数组不变

  var arr4 = [1, 2, 3, 4, 5]
  var arr5 = arr4.map(item => {
    return item = item * item
  })

console.log(arr5)
 // 新数组  [1, 4, 9, 16, 25]

console.log(arr4)
 //原数组 [1, 2, 3, 4, 5]

arr.join()

把数组转化为字符串

var arr6 = [2019, 08, 23]
arr6.join()  // 默认是用逗号隔开
// "2019,8,23"
arr6.join('')
// "2019823"
arr6.join('-')
// "2019-8-23"

arr.push()

向数组最后一项加值

var arr7 = [2019, 08, 23]
arr7.push(45)

console.log(arr7)
//  [2019, 8, 23, 45]

arr.find() 和 findIndex()

find() 函数用来查找目标元素，返回找到的第一个元素，找不到返回undefined。
findIndex() 函数也是查找目标元素，返回找到的第一个元素的位置，找不到就返回-1。

 var arr7 = [2019, 08, 23]
arr7.find((value)=> {
  return value < 10
})
 // 8

var arr7 = [2019, 08, 23]
arr7.findIndex((item)=> {
  return item === 08
})
// 1  

arr.filter()

查找数组中符合条件的所有元素 返回的是数组

var arr7 = [2019, 08, 23]
arr7.filter((item)=> {
  return item < 2019
})
//  [8, 23]    返回的新数组

小程序

图片预览

小程序怎么点击放大图片

wx.previewImage({
  current: `${that.data.picUrl}`, // 当前显示图片的http链接
  urls: [`${that.data.picUrl}`] // 需要预览的图片http链接列表，里面至少有一张图片
})

自定义选择日期

wxml

  
    {{multiArray[0][currentDate[0]]}}-{{multiArray[1][currentDate[1]]}}
  

js

data ：{
 multiArray: [
      ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029', '2030', '2031', ],
      ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
    ],

    currentDate: [],
}

// 默认生成当前年月
onLoad: function () {
    const year = new Date().getFullYear()
    const month = new Date().getMonth() + 1
    const { multiArray } = this.data
    const years = multiArray[0]
    const months = multiArray[1]
    const yearIndex = years.findIndex(item => item == year)
    const monthIndex = months.findIndex(item => item == month)
    console.log(yearIndex)
    console.log(monthIndex)
    this.setData({ currentDate: [yearIndex, monthIndex] })
},


   // 选择时间
  bindMultiPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      currentDate: e.detail.value
    })
  },   

页面间传数据

把变量拼接在 url 后面传到跳转的页面，在跳转页面用 onLoad 里的 options 接收，这种传参方式只能传变量 不能传数组

wx.navigateTo({
  url: `../detail/detail?userid=${that.data.userId}&cashbookid=${that.data.cashbooksId}&ueravatar=${that.data.userUrl}`
})

//  跳转页面接收
onLoad: function(options) {
    console.log(options)
    this.setData({
      userId: options.userid,
      cashbookId: options.cashbookid,
      useravatar: options.ueravatar,
    });
}

ts

声明文件就是别人定义的 ts 我们引用之后就可以直接使用

image.png

css

浮动布局和定位布局
浮动布局： 只要父级元素没有设置高度 给子元素设置浮动 父级就会失去高度