微信小程序開發第四天，學習如何編寫。

在下載了微信開發者工具後開始着手編寫代碼，在網上找了一些相關的視頻學習着編寫代碼。

今天主要是編寫了index文件的代碼以下

將視頻中的素材導入到icon文件夾中

 

index.js

var app = getApp()

var list = wx.getStorageSync('cashflow') || []

Page({

data: {

mainindex: '',

title: '',

sum: 0,

persum: 0,

sublist: []

},

onLoad: function (params) {

// 生命週期函數--監聽頁面加載

this.setData({

mainindex: params.index,

title: list[params.index].title,

})

wx.setNavigationBarTitle({

title: this.data.title

})

},

onReady: function () {

// 生命週期函數--監聽頁面初次渲染完成

},

onShow: function () {

// 生命週期函數--監聽頁面顯示

list = wx.getStorageSync('cashflow') || []

var sublist = list[this.data.mainindex].items

var sum = 0

var persum = 0

for (var i = 0; i < sublist.length; i++) {

sum += parseFloat(sublist[i].cost)

persum += parseFloat(sublist[i].cost) / sublist[i].member

}

this.setData({

sum: sum.toFixed(2),

persum: persum.toFixed(2),

sublist: sublist

})

},

onHide: function () {

// 生命週期函數--監聽頁面隱藏

},

onUnload: function () {

// 生命週期函數--監聽頁面卸載

},

onPullDownRefresh: function () {

// 頁面相關事件處理函數--監聽用戶下拉動做

},

onReachBottom: function () {

// 頁面上拉觸底事件的處理函數

},

onShareAppMessage: function () {

// 用戶點擊右上角分享

return {

title: '小帳本', // 分享標題

desc: '您的私人帳本', // 分享描述

path: '/pages/index/index' // 分享路徑

}

},

//手指觸摸動做開始 記錄起點X座標

touchstart: function (e) {

//開始觸摸時 重置全部刪除

this.data.sublist.forEach(function (v, i) {

if (v.isTouchMove)//只操做爲true的

v.isTouchMove = false

})

this.setData({

startX: e.changedTouches[0].clientX,

startY: e.changedTouches[0].clientY,

sublist: this.data.sublist

})

},

//滑動事件處理

touchmove: function (e) {

var that = this,

index = e.currentTarget.dataset.index,//當前索引

startX = that.data.startX,//開始X座標

startY = that.data.startY,//開始Y座標

touchMoveX = e.changedTouches[0].clientX,//滑動變化座標

touchMoveY = e.changedTouches[0].clientY,//滑動變化座標

//獲取滑動角度

angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })

that.data.sublist.forEach(function (v, i) {

v.isTouchMove = false

//滑動超過30度角 return

if (Math.abs(angle) > 30) return

if (i == index) {

if (touchMoveX > startX) //右滑

v.isTouchMove = false

else //左滑

v.isTouchMove = true

}

})

//更新數據

that.setData({

sublist: that.data.sublist

})

},

/**

* 計算滑動角度

* @param {Object} start 起點座標

* @param {Object} end 終點座標

*/

angle: function (start, end) {

var _X = end.X - start.X,

_Y = end.Y - start.Y

//返回角度 /Math.atan()返回數字的反正切值

return 360 * Math.atan(_Y / _X) / (2 * Math.PI)

},

//刪除事件

del: function (e) {

this.data.sublist.splice(e.currentTarget.dataset.index, 1)

this.setData({

sublist: this.data.sublist

})

list[this.data.mainindex].items = this.data.sublist

wx.setStorageSync('cashflow', list)

wx.showToast({

title: '成功',

icon: 'success',

duration: 2000

})

}

})

index.json

{}

index.wxml

<!--handbook.wxml-->

<import src="../../common/foot.wxml" />

<view class="container">

<view class="page-head">

<view class="page-head-desc">本次活動共計花費{{ sum }}元，我的花費{{persum}}元。

</view>

<view class="page-head-line"></view>

</view>

<view class="page-body">

<view class="index-bd">

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{sublist}}" wx:key="id">

<view class="content">

<navigator url="../detail/detail?mainindex={{mainindex}}&subindex={{ index }}&act=edit" class="navigator">

<view class="navigator-text">{{index+1}}、{{item.subtitle}}:共花費 {{item.cost}}元</view>

<view class="navigator-arrow"></view>

</navigator>

</view>

<view class="del" catchtap="del" data-index="{{index}}">刪除</view>

</view>

</view>

<view>

<navigator url="../detail/detail?mainindex={{mainindex}}&act=new" hover-class="navigator-hover">

<image class="float-action2" src="../../common/icon/add.png"></image>

</navigator>

</view>

<view>

<navigator url="../statistics/statistics?mainindex={{mainindex}}" hover-class="navigator-hover">

<image class="float-action" src="../../common/icon/statistics.png"></image>

</navigator>

</view>

</view>

<template is="foot" />

</view>

index.wess