前言
上一章大體介紹了微信小程序的配置頁面，這篇文章主要講下怎么繪制一個頁面，以及數據的交互
正式開始
首先新建一個包main，然后在main包里創建page-main，如下圖所示
創建后會生成4個文件
main.js
這個文件主要是實現頁面的邏輯文件，日后把網絡請求，數據交互，等等的業務邏輯或代碼邏輯可以放在這個文件里，文件語法同js相似,微信美名其曰：WeiXin Script
打開該文件會發現系統已經幫忙創建好幾個方法
// pages/main/main.js
Page({
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
其中Page（{}）字段代表頁面，同android的Activity，ios的UIViewController類似，該方法包含onLoad、onReady、onShow、onHide、onUnload五個生命周期
onPullDownRefresh，onReachBottom是整個頁面下拉刷新，上拉加載更多的接口回調，需要在json里配置 enablePullDownRefresh和onReachBottomDistance屬性。下面的json文件會講到。
data{}可以理解成微信官方提供的一個object，也可以理解成這個地方是初始化一些同頁面相關的全局變量。
wxjs變量和語法和js差不多，但是方法申明是方法名在前，function在后例如
onButtonClick :function(){
//do button onclick
},
doGetData(){
//do net work
}
這里需要注意，由于page是個數組，所以方法和方法直接需要用逗號分隔，否則會報編譯錯誤。
main.json
這個是同包名同名文件的page下的頁面設置，比如我們這個頁面叫page.mian.main，page.main.main.json只作用在當前頁面下面，這個json文件和app的json比起來少了很多東西，只有幾個屬性
navigationBarBackgroundColor
導航欄背景色，作用如下圖
navigationBarTextStyle
導航欄標題顏色，僅支持 black/white
navigationBarTitleText
導航欄標題文字內容,就是當前頁面的標題
backgroundColor
頁面背景色，但是沒什么卵用
所以想改背景色的，可以通過app或者當前頁的wxss文件修改，附上代碼
Page{
background: #ff0000;
width: 100%;
height: 100%;
}
backgroundTextStyle
下拉背景字體、loading 圖的樣式，僅支持 dark/light
這個只能在enablePullDownRefresh為true時使用，效果如下
由于白色背景看不到light效果，我設置成了紅色背景
enablePullDownRefresh
是否開啟下拉刷新，不開啟無下拉效果，開啟則會回調js里的enablePullDownRefresh方法
onReachBottomDistance
是否開啟加載更多，參數為滑動值，滑動值越大，滑到底部用戶上拉的距離越大，推薦小一些
disableScroll
當前頁是否可以滑動，只限制在本頁面。app設置無用
main.wxml
ui頁面，同html語言，沒有div，但是可以通過view來控制，默認從上而下，從左往右。
詳細就不講了，可以參考文檔
main.wxss
同css
數據綁定
如果js有數據，想在頁面上展示怎么辦呢？下面開始介紹數據的綁定，這種使用方法有點類似jsp的方式，首先附上代碼
main.js
Page({
/**
* 頁面的初始數據
*/
data: {
datas:"我就是個跑堂的"
},
/**
*
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
}
})
main.wxml
<!--pages/main/main.wxml-->
<view >
{{datas}}
</view>
效果
也就是說，在data{}里面的值，直接可以通過 Mustache 語法，通過雙括號的形式，直接賦值到頁面上，下面介紹列表賦值方法
附上代碼
main.js
Page({
/**
* 頁面的初始數據
*/
data: {
datas: ["我就是個跑堂的1", "我就是個跑堂的2", "我就是個跑堂的3"]
},
/**
*
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
}
})
main.wxml
<!--pages/main/main.wxml-->
<view wx:for="{{datas}}">
{{item}}
</view>
數組在wxml里的使用有點像html里的foreach
但需要注意的是item，在wxml語言里，通過wx:for指定的數組，會默認指定這個變量的名字為item，當然也可以手動修改，代碼如下
<view wx:for="{{datas}}" wx:for-item="me">
{{me}}
</view>
若數據為對象呢？同html使用一樣，使用變量名+“.”的形式
代碼如下
main.js
Page({
/**
* 頁面的初始數據
*/
data: {
datas: {
avatar: "https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=8cedf19b252eb938f86072a0b40bee50/b2de9c82d158ccbfb48b474013d8bc3eb1354191.jpg",
name: "李逍遙",
sex: "男",
info: "李逍遙，后取道號“一貧”，系列單機游戲《仙劍奇俠傳》重要角色之一，是《仙劍奇俠傳》男主角，亦登場于《仙劍奇俠傳二》和《仙劍奇俠傳五》，在《仙劍奇俠傳五前傳》有所提及。原是一鄉下客棧店小二，天資聰穎，因一壺酒被酒劍仙傳授了蜀山仙劍派劍術，在仙靈島與趙靈兒相遇，自此經歷重重磨難成長為一代曠世奇俠。后出任蜀山掌門，取道號一貧，御劍行遍天下，行俠仗義、斬妖除魔。多年后因魔教之亂，故引咎卸職，成為蜀山七圣之一。而后雖心力交瘁，但仍竭力保護天下蒼生。"
}
},
/**
*
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
}
})
main.xml
<!--pages/main/main.wxml-->
<view>
<view class='top'>
<image class='avatar' src="{{datas.avatar}}" />
<view class='top_right'>
<view>
姓名：{{datas.name}}
</view>
<view>
性別：{{datas.sex}}
</view>
</view>
</view>
<view class='line'></view>
<view class='info'>
簡介：{{datas.info}}
</view>
</view>
由于寫了一些樣式，附上樣式代碼
main.wxss
/* pages/main/main.wxss */
Page {
padding: 20rpx;
width: 100%;
height: 100%;
}
.viewH {
height: 400rpx;
}
.avatar {
margin: 20rpx;
height: 200rpx;
width: 200rpx;
border-radius: 150px;
border: 1rpx solid #333;
}
.top {
height: 240rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.top_right {
margin-left: 50rpx;
}
.line {
height: 2rpx;
margin-top: 5rpx;
margin-bottom: 5rpx;
margin-left: 10rpx;
margin-right: 10rpx;
background: #ddd;
}
.info {
padding: 20rpx;
flex-wrap: wrap;
}
效果如下
現在就可以寫一些簡單的靜態界面了~
結尾
其實小程序的界面繪制和數據綁定很簡單，就是將數據定義在data里，然后通過{{}}的形式展示在界面上，還有很多種類的賦值沒有說到，可以看官方的文檔數據綁定
