微信小程序之文件（含源码）

Hello,又见面了，本次我们用一个加法计算器的例子，来让你分分钟了解各种文件的含义，界面很丑，没关系，我们是来了解文件名的，顺便了解一下各种文件直接的关系。嘻嘻

一、教科书式的文章（来源：微信开发者平台--结构）

平台截图

解释一下：（这是考点）

1. js里面我们写各种函数(事件)，有一丁点类似Java的后台
2. wxml里面写界面，又有一丁点类似Java的前台（其实整个就是一个前端的东西）
其次 json是页面配置（我用的比较少，可能是刚开始接触)
4. wxss最简单，就是放样式的地方，像H5的样式表css,只不过名字不同

二、实例（加法计算器）

其实我也很讨厌看各种文档，但是菜啊，没办法，还好你有我，咱们可以一起来研究（我先行一步）

步骤1：建项目，项目的话，可以自己新建一个，也可以用你发给老师的那个（无所谓，一切为了学习[加油]）
步骤2：新建一个页面（在app.json里面添加“pages/Calculation/Calculation”）

注意：在我们整个pages这样一个json类型的数据中，在编译时会显示第一个位置的页面。所以我们可以把这个页面放在第一个位置，不然可能待会不知道这么看自己写了什么。如图

app.json里面的
步骤3：我们在 Calculation.wxml 文件中编写界面，

<text>加法计算器</text>
<view class="container">
  <input placeholder="  被加数" bindinput="bindInput1"></input>
  <input placeholder="  加数" bindinput="bindInput2"></input>
  <button type="primary" bindtap="bindAdd">计算</button>
  <input placeholder="  结果" value="{{result}}" disabled></input>
</view>

注解（很重要）：

1、我们知道在H5里面使用的<div>来标记一个模块，在这里我们使用<view>来标记一个模块，是容器组件
2、<input></input>都很熟悉，如果不知道也没事（随便找棵树撞），是输入框，里面有两个属性，一个是placeholder，用来在输入框添加提示消息，当我们点击的时候就自动消失了，删除输入框的内容又出来了。第二个是bindinput,是为了获取input组件输入的内容，当有键盘输入时，就会触发该事件bindInput1,2，从而获取到输入的值，并保存到JavaScript里面.
3、<button>这个是按钮，bindtap属性是当按钮被点击时就会触发里面的bindAdd事件（什么是事件an？？不着急，下面有）
4、value="{{result}}" 用来存放结果，带有{{ }}标记的都是变量（可变的数据）disabled 是输入框的禁用，默认是true,所以我们不够在结果那个框里输入
如图

编译效果图
步骤4：先把Calculation.wxss样式表给你

.container{
 justify-content: flex-start;
 padding: 30rpx 0;
}

.container input{
 background-color: #eee;
 border-radius: 3px;
 text-align:left;
 width: 720rpx;
 height: 100rpx;
 line-height: 100rpx;
 margin: 20rpx;
}

.container button{
 width: 80%;
}

关于样式表咱们以后在研究

步骤5：理解Calculation.js 的作用

/**
   * 页面的初始数据
   */
  data: {
    num1: "",
    num2: "",
    result: ""
  },
  /**
   * 被加数输入事件处理函数
   */
  bindInput1: function (e) {
    var n = e.detail.value;
    if (!isNaN(n)) {
      this.setData({
        num1: n  //更新被加数
      })
    }
  },

  /**
   * 加数输入事件处理函数
   */
  bindInput2: function (e) {
    var n = e.detail.value;
    if (!isNaN(n)) {
      this.setData({
        num2: n //更新加数
      })
    }
  },

 /**
   * "计算"按钮触按事件的处理函数
   */
  bindAdd: function (e) {
    var r = this.data.num1 * 1 + this.data.num2 * 1;
    this.setData({
      result: r
    })
  },

注解:

1、data 是我们定义变量的地方，我们在这里定义了num1,num2,result
2、接着，我们写了三个函数，也可以叫做事件，和我们刚才在页面wxml里面所写的函数名称要对应，可以自行观察一下（关于函数的讲解，什么是var， 为什么要this ，e.detail.value 又是什么鬼，详见下回分解）
3、关于其他的函数，上面有注释，可以先了解一下，如果有不懂的，咱们私聊

步骤6：现在可以运行了，计算的结果图

运行结果

以上就是我们今天了解的各种文件名，辛苦了同志们！！！

浏览结束 喜欢就点个赞呗

---

版权任意