这周在写 好记性记账本 中遇到好多 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
<picker mode="multiSelector" bindchange="bindMultiPickerChange"
value="{{currentDate}}" range="{{ multiArray }}">
<view class="picker">
{{multiArray[0][currentDate[0]]}}-{{multiArray[1][currentDate[1]]}}
</view>
</picker>
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
浮动布局和定位布局
浮动布局： 只要父级元素没有设置高度 给子元素设置浮动 父级就会失去高度
