学习目标
1.使用内置的控件搭建界面 2.会布局代码的书写
先去其他网站学点html,css,js的东西,再来玩微信小程序。
让学习成为一种习惯
45C6E90C-8BBF-4B82-A8B9-3E64B0CBFBBE.png
这个时候运行一些 应该会报错,因为在myPage.js 里面没有写任何东西,程序找不到执行的函数
Page({
// 在data 里面定义变量,系统会自动找到
data:{
// 定义一个变量,把这个值显示在页面上去
name:"这里会显示你输入的名字"
},
// 生命周期函数--监听页面加载
onLoad:function(options){
}
})
<view >
<view >
// 把刚才定义的变量直接写在这个地方,会自动和标签进行绑定
<text > {{name}}</text>
</view>
<view >
<input placeholder="�请输入你的姓名" />
</view>
<view>
<button >提交</button>
</view>
</view>
运行一下
08B63868-E9E8-435A-ABFC-CEA0B6438720.png
<view class = "container">
<view class = "text-section">
<text > {{name}}</text>
</view>
<view class ="input-section">
<input placeholder="请输入您的姓名" />
</view>
<view class = "submit_section">
<button class = "submit">提交</button>
</view>
</view>
.container{
margin-top: 30px;
width: 100%;
height: 200px;
background-color: #fff;
padding: 0 0;
}
.text-section{
margin-top: 20px;
height: 30px;
text-align: center;
font: 16px;
border-bottom-width: 1px;
border-bottom-color: black;
border-bottom-style: solid;
color: #000;
}
.input-section{
margin-top: 10px;
border-bottom-width: 1px;
border-bottom-color: black;
border-bottom-style: solid;
text-align: center;
}
.submit_section{
margin-top: 10px;
color: black;
margin-bottom: 20px;
}
.submit{
background: black;
color: white;
}
此时运行一下
83F07AE4-6917-4630-B53F-56D9C7CE4C8D.png
简单的空间和布局就介绍完毕,下一篇介绍一下 事件和数据交互的过程。