之前两天研究了一下小程序和页面的框架问题。理论居多吧，今天我们来实战一波，自己动手做一个页面出来。
第一步 整理环境
首先新建一个项目（或者用之前那个也可以）然后应该是这样的一个场景。
删除本身模板自带的页面，我们重头来写
新项目进入的页面
删完后的文件目录应该是这样的
目录结构
同时可能会出现这样一个报错
报错
有没有同学想起来，之前我们提到过，每新增一个页面，就需要到app.json里面进行一次注册（最新版本的开发环境会自动帮我们注册），所以删除页面时也需要去那边把之前注册好的页面删掉。打开app.json，删除这两行。
删除注册页面
删除完仍然会有报错，不过没事，我们马上就要新建一个页面了
清空页面注册后找不到页面会进行报错
第二步 创建页面
右键单击pages，新建一个目录，然后命名helloworld（可以随便起），然后点击新建好的helloworld目录，新建页面，推荐命名与文件夹名相同，也是helloworld。
目录结构
这时我们开始写我们的第一个页面。做一个最简单登录页面吧
首先打开helloworld.wxml文件
写下这样的代码
<!--pages/helloworld/helloworld.wxml-->
用户名：<input />
密码：<input />
<button>登录</button>
编译后画面
这时我们的第一个页面的展示部分就做出来了。尽管他不是那么的标准，不过为了最快的上手，先抛开不是非常标准的细节部分。对于使用到的标签简单解释一下，<input>是输入框标签，使用这个标签可以创建一个输入框，<button>是按钮标签，使用和这个标签可以创建一个按钮，这里不做过多的讲解，可以戳这里进行详细学习官方文档
这时我们可以点击用户名和密码下方的输入框区域随意输入些数据尝试一下。还可以点击登录按钮（虽然只会闪一下，没有其他任何动作）。
（这里可能会碰到一个bug，是电脑模拟器的bug，有时候点击输入框会出现点不上的情况，这是因为电脑无法聚焦，可以通过鼠标长按来解决）
之前有提到过，wxml和wxss只负责页面的内容和布局问题，那页面的动作谁来负责呢，我们发生跳转，显示等等一系列动作是在哪里处理的呢？回顾一下！实在js文件里面进行处理的。
这时我们来写页面逻辑，打开js文件
// pages/helloworld/helloworld.js
Page({
/**
* 页面的初始数据
*/
data: {
username:null,
userpassword:null
},
//输入框信息获取
usernameInput: function(e){
this.setData({
username : e.detail.value
})
},
userpasswordInput: function (e) {
this.setData({
userpassword: e.detail.value
})
},
//登录事件
loginBtn :function(){
console.log("登陆成功");
console.log('username:'+this.data.username);
console.log('userpassword:' +this.data.userpassword);
}
})
同时wxml文件也要发生一点小改动
<!--pages/helloworld/helloworld.wxml-->
用户名：<input bindinput='usernameInput'/>
密码：<input bindinput='userpasswordInput'/>
<button bindtap='loginBtn'>登录</button>
简单解释一下，wxml的改动，bindinput是input标签的一个属性值，可以设置一个函数，通过这个函数来调用输入框内的值，这一点在js文件中的 this.setData({username : e.detail.value}) 有体现到。e就是这个输入事件。
而bindtap的意思就是点击事件的意思，当你点击这个按钮，就会执行里面的函数，然后看看我们js文件里的loginBtn函数里面写了什么，从console.log输出了登录成功和用户名以及密码。
注：console.log是用于在控制台输出的一条语句
第三步 运行
然后看一下运行效果
输入数据
运行结果
至此，我们的第一个页面就成功了！
上一篇：微信开发之旅———Day3（小程序框架——下）
下一篇：
网友评论