前言
上一章大体介绍了微信小程序的配置页面，这篇文章主要讲下怎么绘制一个页面，以及数据的交互
正式开始
首先新建一个包main，然后在main包里创建page-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
导航栏背景色，作用如下图
image.png
navigationBarTextStyle
导航栏标题颜色，仅支持 black/white
image.png
image.png
navigationBarTitleText
导航栏标题文字内容,就是当前页面的标题
image.png
backgroundColor
页面背景色，但是没什么卵用
image.png
所以想改背景色的，可以通过app或者当前页的wxss文件修改，附上代码
Page{
background: #ff0000;
width: 100%;
height: 100%;
}
image.png
backgroundTextStyle
下拉背景字体、loading 图的样式，仅支持 dark/light
这个只能在enablePullDownRefresh为true时使用，效果如下
由于白色背景看不到light效果，我设置成了红色背景
image.png
image.png
enablePullDownRefresh
是否开启下拉刷新，不开启无下拉效果，开启则会回调js里的enablePullDownRefresh方法
onReachBottomDistance
是否开启加载更多，参数为滑动值，滑动值越大，滑到底部用户上拉的距离越大，推荐小一些
disableScroll
当前页是否可以滑动，只限制在本页面。app设置无用
image.png
image.png
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>
效果
image.png
也就是说，在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;
}
效果如下
image.png
现在就可以写一些简单的静态界面了~
结尾
其实小程序的界面绘制和数据绑定很简单，就是将数据定义在data里，然后通过{{}}的形式展示在界面上，还有很多种类的赋值没有说到，可以看官方的文档数据绑定
网友评论