小程序开发房租计算器，妈妈再也不担心我的收租问题

本文链接：https://blog.csdn.net/yi247630676/article/details/115390523

介绍

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

按照我的理解小程序是微信版的网页，相当于PC端的网页应用移植到微信端内。如果学习网页的开发指导html,css.javascript等网页开发工具和代码知识后。

开发小程序应该不是太难的问题，剩下的就是走微信流程的问题，和按照微信的规则来制作小程序。闲话不多说，马上来搞起来。

详细步骤

1、微信小程序的注册

打开微信公众号界面，点击立即注册，按照指示一步步来，操作简单。

信息登记注意选择个人信息，如果企业信息，需要营业执照还要税号什么的，看自身业务发展情况而决定，我单纯是自己玩都是用个人信息注册。

注册完毕后，进入小程序后台界面，功能在看下小程序的说明文档，操作很简单。

记下开发者ID，因为后续下载微信开发工具，需要ID来创建小程序项目，项目后期完成代码部分和模块后，需要通过这个ID上传到微信小程序服务器，进行发布。

2、微信开发工具介绍和创建小程序项目

https://developers.weixin.qq.com/miniprogram/dev/component/input.html（记住这个微信开发文档，微信小程序的发布还有版本更新，代码替换，开发工具都在这里查找了。）

我这里选择稳定版，每个人因为自己喜欢的方式选择不同版本的开发工具了。

下载完默认下一步下一步安装了。下面是项目的创建。

3、创建小程序项目文件。

打开微信开发者工具，目前里面有我创建的三个小程序项目，属于本地计算机内。

点击中间加号创建小程序，将上面我说的开发者中心小程序ID输入到APPID中，记住这个理解成绑定吧，微信小程序服务器通过这个ID找到我们的项目文件，我们也通过这个ID发布我们的小程序。

云开发可以选择，当使用云函数和云数据库就需要把云开发打开，目前来说是有一定免费的了。本期我不涉及云开发，下一期在介绍云开发的小程序。

4、小程序的代码和业务逻辑图

我写这个代码比较简单，入手很快，不涉及到数据库的写入和其他复杂模块，业务逻辑是分别取用户输入的房租、停车费、水费、电费加起来，算出来总的房租。

代码部分：[关于app.json,js,xml,css各个模块的使用，参考小程序的官网开发文档，这里不多解释了。]

先把page自带的页面全部删除【点击右键找到计算机本地资源中的文件全部删除掉】，在app.json中pages添加两个pages路径，保存后，pages自动生成两个页面路径。我这里写了两个pages页面路径，但是用到比较多少是zufang这个页面，另外一个做云开发。

代码部分：

zufang.wxml

<image class="itemimg" src="{{img}}"></image>
<input placeholder="请输入租户房号" />
----------------------------------------------------
<view class="itemView">租金(元)：</view>
        <input name="ZJName" placeholder="请输入租金" bindinput="ZJNameInput" />
      
<view class="itemView">停车费(元)：</view>
        <input name="TCName" placeholder="请输入停车费" bindinput="TCNameInput" />      
----------------------------------------------------
<view class="itemView">上个月水表读数(度)： </view>
        <input name="SB1Name" placeholder="示例：100" bindinput="SB1NameInput" />
     
<view class="itemView">本月水表读数(度)：</view>
        <input name="SB2Name" placeholder="示例：200" bindinput="SB2NameInput" />
      
<view class="itemView">每吨水费标准(元/度)： </view>  
        <input name="SB3Name" placeholder="示例：2.5" bindinput="SB3NameInput" />
       
----------------------------------------------------
<view class="itemView">上个月电表读数(度)：</view> 
        <input name="DB1Name" placeholder="示例：100" bindinput="DB1NameInput" />
      
<view class="itemView">本月电表读数(度)：</view>   
        <input name="DB2Name" placeholder="示例：200" bindinput="DB2NameInput" />
       
<view class="itemView">每度电费标准(元/度)： </view>
        <input name="DB3Name" placeholder="示例：1.5" bindinput="DB3NameInput" />
     
----------------------------------------------------                    
<button size='mini' bindtap="onTapHandler">点击计算</button>
<view class="itemView"> 总房租费：{{count}} 元</view>
     
----------------------------------------------------  
<view class="itemView1">著作者：业里村牛欢喜-严标毅</view>

zufang.wxss

/* pages/zufang/zufang.wxss */

.itemView{
  color: brown;
  font-weight: 700;
  
}
.itemView1{
  color: black;
  font-weight: 700;
}
.itemimg{
  width: 800rpx;
  height: 100rpx;
  border: 1px solid #cccc;
}

zufang.js

Page({

  /**
   * 页面的初始数据
   */
  data: { 
    img:'/images/ylc.jpg',
    ZJName: '',
    TCName: '',
    SB1Name:'',
    SB2Name:'',
    SB3Name:'',
    DB1Name:'',
    DB2Name:'',
    DB3Name:'',
    count:''

  },

  ZJNameInput: function (e) {
    this.setData({
      FZmoney: e.detail.value
    })
  },
  TCNameInput: function (e) {
    this.setData({
      TCmoney: e.detail.value
    })
  },
  SB1NameInput: function (e) {
    this.setData({
      SBSYnum: e.detail.value
    })
  },
  SB2NameInput: function (e) {
    this.setData({
      SBBYnum: e.detail.value
    })
  },
  SB3NameInput: function (e) {
    this.setData({
      SBmoney: e.detail.value
    })
  },
  DB1NameInput: function (e) {
    this.setData({
      DBSYnum: e.detail.value
    })
  },
  DB2NameInput: function (e) {
    this.setData({
      DBBYnum: e.detail.value
    })
  },
  DB3NameInput: function (e) {
    this.setData({
      DBmoney: e.detail.value
    })
  },
  onTapHandler:function(){
    this.setData({
      count:Number(this.data.FZmoney)+Number(this.data.TCmoney)+(Number(this.data.SBmoney)*(Number(this.data.SBBYnum)-Number(this.data.SBSYnum)))+(Number(this.data.DBmoney)*(Number(this.data.DBBYnum)-Number(this.data.DBSYnum)))
    })
  },
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})