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

冷不防 2022-11-15 14:28 203阅读 0赞

#  介绍 #

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

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

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

## 目录 ##

1.  微信小程序的注册
2.  微信开发工具的介绍
3.  创建微信小程序项目
4.  注意业务逻辑，写代码模块
5.  上传发布小程序

## 详细步骤 ##

1、微信小程序的注册

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 4][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 5][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 6][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 7][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 8][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 9][]

代码部分：

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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 10][]

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;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 11][]

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 () {
    
      }
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 12][]

编译后效果展示：

![20210402172309306.gif][]

5.上传发布小程序

小程序几个模块写完以后，测试功能满足需求后，直接可以上传到微信小程序后台，在小程序后台进行上线审核发布，这时候腾讯小程序人员来审核，符合条件后就可以进行通过审核，发布到互联网中，微信就可以搜索到。

点击【上传】，给这个版本增加版本号和描述。接着下一步下一步。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 13][]

上传结束后，在小程序后台可以发现上传的小程序版本，接下来一步一步按照微信小程序要求，填写资料审核发布即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 14][]

**总结：**

1、小程序的注册和后台功能的使用，这个需要知道，后期如何维护和如何上传都需要通过微信小程序开发工具和后台来实现。

2、亲手实践一下代码部分，会比看更好，哪怕是抄，我代码也是从许多大师手上学习下来，形成自己的代码，关于JS逻辑部分数据的调用也是想了许久才有方案。虽然很简单。

3、多看小程序开发文档，结合百度，有时候官方文档看不懂就问度娘。我就是这样学习的了，因为中途参加计算机三级网络技术的考试，停留一段时间后，许多语法和数据调用都忘记了。做事情还是不要三天打鱼，两天晒网。

**我是业里村牛欢喜，欢迎点赞交流。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70]: /images/20221022/5f4b602f75904087846ad21a64292bcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210402094328743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210402094351164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021040209471157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210402095031276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_component_input.html]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210402095243314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210402095612860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/202104020956578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210402164356315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210402170058924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2021040217081850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210402170745962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210402171011983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[20210402172309306.gif]: https://img-blog.csdnimg.cn/20210402172309306.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210402172957296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210402173223999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpMjQ3NjMwNjc2,size_16,color_FFFFFF,t_70