最终展示以及相关代码

1.最终效果展示

最终效果展示已经根据最初要求使用视频拍摄在抖音上,下面是相关页面展示图片:

2.相关代码

本次开发主要页面则是首页界面以及记账界面以及实现页面跳转,以及记账内容保存。

index定义首页界面,部分代码如下:

//index.js
//获取应用实例
const app = getApp() Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
goIndex_1Tap: function (event) {
wx.navigateTo({
url: '../bookkeeping/bookkeeping',
})
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view> <block>
<image class="imagelog" src="../img/1.jpg" >
</image>
</block> <view class="usermotto" bindtap="goIndex_1Tap">
<text class="user-motto" >欢迎使用祺小屋记账</text>
</view> </view>

记账界面主要在me文件中,部分代码如下:

//index.js
//获取应用实例
var app = getApp() function _item() {
this.Key = ""
this.Title = ""
this.Parse = function (e) {
return {
key: this.Key,
data: this.Title
}
}
} var WANT_KEY = "WANT_" Page({
data: {
motto: '你想要的都会有',
userInfo: {},
items: [],
inputTitle: '',
}, // 输入的内容
bindInputTitle: function (e) {
// console.log(this.data.inputTitle)
this.setData({
inputTitle: e.detail.value
})
}, deleteIt: function (e) {
var index = e.target.id
var item = this.data.items[index]
wx.removeStorageSync(item.Key)
this.data.items.splice(index, 1)
this.setData({
items: this.data.items
})
}, addWant: function () {
console.log('addWant')
var item = new _item()
item.Key = WANT_KEY + String(Date.now())
item.Title = this.data.inputTitle this.data.items.push(item)
this.setData({
items: this.data.items
}) wx.setStorage(item.Parse()) this.setData({
inputTitle: ""
})
}, onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
}) var res = wx.getStorageInfoSync()
var items = []
res.keys.map(function (key) {
if (key.indexOf(WANT_KEY) == 0) {
var item = new _item()
item.Key = key
item.Title = wx.getStorageSync(key)
items.push(item)
}
})
this.setData({
items: items
})
}
})
<!--pages/keep/keep.wxml-->
<!--index.wxml-->
<view class="title">我的账本</view>
<view class="container">
<view class="pure-g">
<view class="pure-u-20-24">
<input bindinput="bindInputTitle" value="{{inputTitle}}" placeholder="请在这里输入收支信息" />
</view>
<view class="pure-u-4-24">
<button type="primary" size="mini" bindtap="addWant"> + </button>
</view>
</view>
</view> <view class="container" style="align-items:left;">
<view class="pure-g main-items">
<scroll-view scroll-y="true">
<block wx:for="{{items}}" wx:for-item="item" wx:key="items">
<view class="item">
<text>{{index + 1}}. {{item.Title}}</text>
<icon class="delete" type="cancel" size="15" bindtap="deleteIt" id="{{index}}"/>
</view>
</block>
</scroll-view>
</view>
</view>

3.开发想法与实际差距

最初,刚刚开始放寒假时自己对于开发这个东西是怀着十分高兴的心情的,自己也设想了许多功能,但是不知不觉寒假过去了,自己最终做出来的作品只是达到了自己当时最低的要求,寒假被自己荒废了,新学期马上就要开始了,自己不能荒废,要完善自己的小程序至发布。

自己小程序类似于平常家庭记账本,把记账簿变成了手机微信记账簿。

这和自己当初设想有着很大差距,自己想要实现分类回收,数据的加减,总收入支出的计算还有待提升,在新学期里,想要完成相关功能,最好实现相关发布工作。

微信小程序--家庭记账本开发--07的更多相关文章

  1. 微信小程序--家庭记账本开发--05

    界面跳转 在微信小程序中,按钮也是<button></button>标签,它是通过bindtap属性来绑定点击事件: <view class="usermott ...

  2. 微信小程序--家庭记账本开发--04

    界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下 ...

  3. 微信小程序--家庭记账本开发--03

    组件.标签以及模板的使用 在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件.标签模板的使用有了初步的了解. 1.组件 组件是数据和方法的简单封装,对于微 ...

  4. 微信小程序--家庭记账本开发--02

    代码文件的了解 对于一个程序的开发,代码的了解的必须的,不同的后缀名文件有着不同的作用,通过学习,对于微信小程序开发中的文件有了自己的理解. 文件概述 一个微信小程序一般有有pages文件夹,util ...

  5. 微信小程序--家庭记账本开发--01

    微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...

  6. 微信小程序--家庭记账本开发--06

    重要部分学习——记账簿 本次项目开发的目的主要是记账本的开发,最初自己想法简单,把家里的纸质记账簿变成手机上的记账簿.最终自己程序可以实现的功能可以记录每天的账目信息,并形成叠加效果,并按1.2.3… ...

  7. 微信小程序--家庭记账小账本(三)

    家庭记账小账本打算先通过微信小程序来实现,昨天就去注册了解了一下微信小程序,感觉比较复杂而且困难.如何将ecplise源代码与小程序连接,如何建立数据库等等都困扰了我.查阅网上的资料也没有很大的进展. ...

  8. 微信小程序--家庭记账小账本(五)

    (源码已上传至github,https://github.com/xhj1074376195/CostBook_weixin) 今天,尝试弄了账单的表,发现还是弄不了,于是就把账单上的删除功能给去了, ...

  9. 微信小程序--家庭记账小账本(四)

    今天的进展不太顺利,总的账单表,代码改了又改,最后决定用一个新的表,账单界面中弄了一天删除,发现都无法实现想要的效果,于是把账单界面的删除功能去了,就感觉大功告成的时候,发现收入和支出界面的删除也出现 ...

随机推荐

  1. [CTSC2008]网络管理 [整体二分]

    题面 bzoj luogu 所有事件按时间排序 按值划分下放 把每一个修改 改成一个删除一个插入 对于一个查询 直接查这个段区间有多少合法点 如果查询值大于等于目标值 进入左区间 如果一个查询无解 那 ...

  2. Forget Guava: 5 Google Libraries Java Developers Should Know

    Forget Guava: 5 Google Libraries Java Developers Should Know Published on 2016 7 13 Somenath PandaFo ...

  3. 3173. 【GDOI2103模拟3.17】扫雷游戏(搜索 + 剪枝)

    Problem 给出一个类似扫雷的游戏,有\(num\)个数字,求至少有多少个雷. Data constraint \(n,m\le 15,num\le 15\) Solution 好搜索啊. 现讲一 ...

  4. JS学习笔记Day9

    一.BOM (一)概念:是 Browser object model 的缩写,简称浏览器对象模型. BOM 提供了独立于内容而与浏览器窗口进行交互的对象 由于 BOM 主要用于管理窗口与窗口之间的通讯 ...

  5. Python的编码和解码

    Python的编码和解码 在不同的国家,存在不同的文字,由于现在的软件都要做到国际化通用,所以必须要有一种语言或编码方式,来实现各种编码的解码,然后重新编码. 在西方国家,没有汉字,只有英文,所以最开 ...

  6. 10分钟快速搞定pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook .习惯 ...

  7. ACM-ICPC 2018 沈阳赛区网络预赛 D Made In Heaven(第k短路,A*算法)

    https://nanti.jisuanke.com/t/31445 题意 能否在t时间内把第k短路走完. 分析 A*算法板子. #include <iostream> #include ...

  8. [物理学与PDEs]第5章第3节 守恒定律, 应力张量

    5. 3 守恒定律, 应力张量 5. 3. 1 质量守恒定律 $$\bex \cfrac{\p \rho}{\p t}+\Div_y(\rho{\bf v})=0.  \eex$$ 5. 3. 2 应 ...

  9. [译]Ocelot - Headers Transformation

    原文 Add to Request 为上游请求添加请求头,只需如下一样将下面的配置添加到一个ReRoute里: "UpstreamHeaderTransform": { " ...

  10. js 数字前自动补零

    num为传入的数字,n为需要的字符长度 return (Array(n).join(0) + num).slice(-n); 例如 我想返回两位数  输入6 然后返回06 就可以这样写: return ...