學習目標
1.使用內置的控件搭建界面
2.會布局代碼的書寫
先去其他網站學點html,css,js的東西,再來玩微信小程序。
第一步 創建工程 不說了 上篇文章演示過了
第二步 創建一個文件夾 在創建必備的四個文件xx.js/xx.wxml/xx.wxss/xx.json,如下圖
讓學習成為一種習慣
- 第三步 先進入app.json 文件把啟動后進入的頁面設置成我們創建的頁面
45C6E90C-8BBF-4B82-A8B9-3E64B0CBFBBE.png
這個時候運行一些 應該會報錯,因為在myPage.js 里面沒有寫任何東西,程序找不到執行的函數
- 第四步 進入myPage.js 文件 輸入page 會有自動補全,回車一下
我們只留下下面的代碼就行,我們把其他的
Page({
// 在data 里面定義變量,系統會自動找到
data:{
// 定義一個變量,把這個值顯示在頁面上去
name:"這里會顯示你輸入的名字"
},
// 生命周期函數--監聽頁面加載
onLoad:function(options){
}
})
- 第五步 進入myPage.wxml 文件中 放幾個控件
<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>
- 第七步 在myPage.wxss文件寫樣式,美化一下頁面
.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
簡單的空間和布局就介紹完畢,下一篇介紹一下 事件和數據交互的過程。
