当前位置： 首页 > news >正文

网上怎么自己做网站商城网站开发价格

news 2025/9/28 15:43:44
网上怎么自己做网站,商城网站开发价格,专门做衣服特卖的网站有哪些,做毕设网站在前面的微信小程序实例中我们开发了体重记录等实用小程序，今天来尝试一个和生活消费紧密相关的 ——“每日记账小程序”。它能帮你随时记录收支情况，让每一笔花费都清晰可查。下面就跟着步骤，一步步构建这个小程序。​体验一个开发者的快乐。…

          在前面的微信小程序实例中我们开发了体重记录等实用小程序，今天来尝试一个和生活消费紧密相关的 ——“每日记账小程序”。它能帮你随时记录收支情况，让每一笔花费都清晰可查。下面就跟着步骤，一步步构建这个小程序。​体验一个开发者的快乐。

一、开发微信小程序的准备工作​

1. 微信小程序开发工具准备​

          请确保使用最新版本的微信开发者工具。若尚未安装，请访问微信公众平台(https://mp.weixin.qq.com/)，在页面底部"下载"区域选择适合您操作系统的安装包进行安装。已安装的用户请打开工具检查更新，以确保开发环境运行顺畅。

2.  账号准备​

        如果仅用于学习和小程序开发练习，使用开发者工具的"体验模式"创建项目即可。这种模式无需注册小程序账号，直接点击开发者工具中的"体验模式"按钮就能快速开始项目开发，非常适合新手入门和功能测试。

当需要正式上线小程序时，则必须完成以下完整流程：

首先访问微信公众平台（https://mp.weixin.qq.com/），注册小程序账号

完成账号注册后，登录小程序后台管理界面

在左侧导航栏中找到"开发"菜单，进入"开发设置"页面

在基本设置区域可以查看到该小程序的AppID（小程序ID），这是一串18位的数字和字母组合，形如：wx123456789abcdefg

复制这组AppID，在创建新项目时粘贴到对应的输入框中

确保项目目录与AppID匹配，这样才能正常进行后续的代码上传和审核发布流程

二、创建每日记账小程序项目​

              打开微信开发者工具，点击 “新建项目”。在弹出窗口中，填写项目名称（如 “我的日常账本”），选择合适的项目存放目录。有 AppID 就填入，没有则勾选 “不使用云服务” 并选择 “体验模式”，点击 “新建”，项目框架就搭建好了。​

           重点：项目目录里，pages文件夹存放各页面代码，app.js是小程序逻辑入口，app.json用于配置页面路径和窗口样式，app.wxss负责全局样式设置，这些都是开发中常用的文件。​

三、构建每日记账小程序页面​

            我们开发的每日记账小程序，主要有一个页面，能实现输入金额、选择收支类型和消费类别、填写备注，点击保存后展示记账记录等功能。​

 1. 创建页面文件​

在pages文件夹上右键，选择 “新建 Page”，命名为dailyAccount，系统会自动生成dailyAccount.js、dailyAccount.json、dailyAccount.wxml、dailyAccount.wxss四个文件，分别对应页面的逻辑、配置、结构和样式。​

2. 编写页面结构

<view class="container"><view class="input-item"><text class="label">金额（元）：</text><input type="number" placeholder="请输入金额" bindinput="inputAmount"></input></view><view class="input-item"><text class="label">收支类型：</text><picker mode="selector" range="{{typeList}}" bindchange="changeType"><view class="picker-view">{{selectedType}}</view></picker></view><view class="input-item"><text class="label">消费类别：</text><picker mode="selector" range="{{categoryList}}" bindchange="changeCategory"><view class="picker-view">{{selectedCategory}}</view></picker></view><view class="input-item"><text class="label">备注：</text><input placeholder="可选" bindinput="inputRemark"></input></view><button bindtap="saveAccount">保存记录</button><view class="record-title" wx:if="{{accountList.length > 0}}">记账记录</view><view class="record-item" wx:for="{{accountList}}" wx:key="index"><text class="{{item.type === '支出' ? 'expense' : 'income'}}">{{item.type}}：{{item.amount}}元</text><text>类别：{{item.category}}</text><text>备注：{{item.remark || '无'}}</text><text>时间：{{item.time}}</text></view>
</view>

 

        这段代码构建了页面基本结构。input-item包含金额输入框、收支类型选择器、消费类别选择器和备注输入框；saveAccount绑定保存按钮点击事件；下方用于展示记账记录，收支类型用不同颜色区分，有记录时才显示 “记账记录” 标题。​

3. 编写页面样式

.container {padding: 20px;
}.input-item {display: flex;align-items: center;margin-bottom: 20px;
}.label {width: 100px;font-size: 15px;
}input {flex: 1;height: 40px;border: 1px solid #eee;border-radius: 4px;padding-left: 10px;
}.picker-view {flex: 1;height: 40px;line-height: 40px;border: 1px solid #eee;border-radius: 4px;padding-left: 10px;
}button {width: 100%;height: 45px;background-color: #1677ff;color: white;border: none;border-radius: 4px;margin-bottom: 25px;
}.record-title {font-size: 17px;font-weight: bold;margin: 15px 0;color: #333;
}.record-item {border: 1px solid #f0f0f0;border-radius: 6px;padding: 12px;margin-bottom: 10px;
}.expense {color: #f5222d;
}.income {color: #52c41a;
}

这些样式让页面布局更合理美观，设置了输入区域、按钮、记录列表等元素的样式，收支类型用不同颜色区分，增强视觉效果。​

4. 编写页面逻辑

Page({data: {amount: '',typeList: ['支出', '收入'],selectedType: '支出',categoryList: ['餐饮', '交通', '购物', '工资', '其他'],selectedCategory: '餐饮',remark: '',accountList: []},onLoad: function () {// 从本地存储获取记账记录const records = wx.getStorageSync('accountRecords');if (records) {this.setData({accountList: records});}},inputAmount: function (e) {this.setData({amount: e.detail.value});},changeType: function (e) {const index = e.detail.value;this.setData({selectedType: this.data.typeList[index]});},changeCategory: function (e) {const index = e.detail.value;this.setData({selectedCategory: this.data.categoryList[index]});},inputRemark: function (e) {this.setData({remark: e.detail.value});},saveAccount: function () {if (!this.data.amount || this.data.amount <= 0) {wx.showToast({title: '请输入有效金额',icon: 'none'});return;}// 获取当前时间const date = new Date();const time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;const newRecord = {amount: this.data.amount,type: this.data.selectedType,category: this.data.selectedCategory,remark: this.data.remark,time: time};// 添加新记录到列表const newList = [newRecord, ...this.data.accountList];this.setData({accountList: newList,amount: '',remark: ''});// 保存到本地存储wx.setStorageSync('accountRecords', newList);wx.showToast({title: '记录成功',icon: 'success'});}
});

         在data中定义了金额、收支类型、消费类别等数据。onLoad方法从本地存储获取历史记录；inputAmount获取输入金额；changeType和changeCategory处理类型和类别的选择；inputRemark获取备注信息；saveAccount验证输入后保存记录，更新本地存储并显示提示。​

四、运行与调试​

        完成代码后，点击微信开发者工具的 “编译” 按钮，模拟器中就会显示这个每日记账小程序。输入金额、选择收支类型和类别、填写备注，点击 “保存记录”，就能看到记录被添加到列表中。​

         若运行出现问题，可通过右侧调试面板查看报错信息。比如在saveAccount方法中添加console.log(this.data.amount)，查看是否成功获取输入的金额，助力排查问题。​

           这个每日记账小程序涵盖了数据输入、本地存储等实用功能。你还能进一步优化，比如添加月度统计、图表展示消费占比等功能。快来动手试试，让自己记账更轻松吧！也体验一下开发者的快乐，

 

http://www.dtcms.com/a/416479.html

相关文章：

  • 梧州seo排名成都网站优化最低价
  • 手工做女宝宝衣服的网站百度竞价项目
  • 国外客户推广网站wordpress添加价格
  • 行知智网站建设基于云平台网站群建设
  • R2U：通过过程监督优化文档改写，弥合 RAG 系统中检索相关性与生成效用差距
  • 515.在每个树行中找最大值（二叉树算法题）
  • 云南高端网站建设wordpress评论头像问题
  • flash网站下载长沙 网站优化
  • 温州营销网站制作费用王占郡
  • Vala编程语言高级特性-错误处理
  • 建设网站公司建网页商城网站数据库表关系设计
  • 网站源码上传图片出错WordPress中英文旅游模板
  • 网站开发 价格差异想招聘员工去哪个网站
  • 外贸做的社交网站有哪些网站系统开发毕业设计
  • 响应式设计 手机网站wordpress个性首页
  • 网站制作怎么做语音搜索框wordpress更改生成小图大小
  • 文登建设局网站wordpress 主题开发环境
  • 网站开发公司建站源码网页开发需求定制
  • 湘潭网站建设 皆来磐石网络免费中文网站模板
  • 花都网站 建设信科网络templatemonster wordpress
  • 网站积分方案虹桥门户网
  • ESP32-S3入门第七天：UART串口通信与设备交互
  • 营销软件网站建设网站优化效果怎么样
  • 解码编程语言：穿越技术迷宫的指南【2】
  • 网站编程语言网站开发语言有哪几种
  • 狮山网站制作做设计比较好的网站
  • 简单美食网站模板免费下载开源手机网站建站系统
  • 网站公司 模板网站设计与网页制作公司
  • 一个网站备案多个域名吗建设通好用吗
  • wordpress手机站如何做网页的制作