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：现在可以运行了，计算的结果图
运行结果
以上就是我们今天了解的各种文件名，辛苦了同志们！！！
浏览结束 喜欢就点个赞呗
版权任意
网友评论