目标：
能够使用 WXML 模板语法渲染页面结构
能够使用 WXSS 样式美化页面结构
能够使用 app.json 对小程序进行全局性配置
能够使用 page.json 对小程序页面进行个性化配置
能够知道如何发起网络数据请求
<view>{{randomNum1 >=5 ? '数字大于或等于5' : '数字小于5'}}</view>
事件绑定
bindtap绑定在了view上，它是currentTarget
button触发了事件，它是target.
wxml--
<button type="primary" bindtap="btnTapHandler">按钮</button>
js--
// 定义按钮的事件处理函数
btnTapHandler(e) {
console.log(e)
},
举例如下，通过setData改变data中的值
// +1 按钮的点击事件处理函数
CountChange() {
this.setData({
count: this.data.count + 1
})
},
举例如下——
<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
js如下，通过e.target.dataset.info取得了参数info,值为2
btnTap2(e) {
this.setData({
count: this.data.count + e.target.dataset.info
})
},
举例如下
<input value="{{msg}}" bindinput="inputHandler"></input>
js如下
// input 输入框的事件处理函数
inputHandler(e) {
// console.log(e.detail.value)
this.setData({
msg: e.detail.value
})
},
条件渲染
<!-- 条件渲染 -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
<block wx:if="{{false}}">
<view>view1</view>
<view>view2</view>
</block>
<view hidden="{{!flag}}">条件为 true 的时候隐藏元素，否则显示</view>
<view wx:if="{{flag}}">这是使用 wx:if 控制的元素</view>
<block wx:if="{{ !flag}}">
<view>view1</view>
<view>view2</view>
</block>
其中!叹号可以用来取反。
第一种遍历
<view wx:for="{{arr1}}" wx:key="index">
索引是：{{index}}，item 项是：{{item}}
</view>
效果如下
第二种遍历
效果如下
第三种遍历
效果如下
WXSS模版样式
举例如下
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
举例如下
@import "/common/common.wxss";
全局样式
如果所示
局部样式
全局配置
window节点配置项
设置导航栏标题
设置导航栏背景色
设置导航栏标题颜色
全局开启下拉刷新功能
设置下拉刷新时窗口的背景色
设置下拉刷新时loading的样式
设置上拉触底的距离
tabBar
tarBar中的pagePath必须也在pages中。
效果如下
页面配置
如图所示，页面的配置覆盖了全局的
"enablePullDownRefresh": true一般用在页面，而不是全局。
网络数据请求
配置requests合法域名
可以点+号设置多个域名
发起get请求
举例如下
<!--pages/home/home.wxml-->
<button bindtap="getInfo">发起GET请求</button>
js如下
// 发起GET数据请求
getInfo() {
wx.request({
url: 'https://www.escook.cn/api/get',
method: 'GET',
data: {
name: 'zs',
age: 20
},
success: (res) => {
console.log(res.data)
}
})
},
//发起post请求
举例如下
<button bindtap="postInfo">发起POST请求</button>
js如下
// 发起POST请求
postInfo() {
wx.request({
url: 'https://www.escook.cn/api/post',
method: "POST",
data: {
name: 'ls',
age: 33
},
success: (res) => {
console.log(res.data)
}
})
},
监听页面加载
案例-本地生活首页
1.项目-关闭当前项目
回到了首页
2.点击+号，新建一个空项目
目录为本地文件夹
点击确定后新建成功
创建页面如下
将多余页面右键删除
配置导航栏效果
在app.json的window节点
配置tabBar效果
准备了图标，放入images文件夹
app.json中添加tabBar
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
}
,{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
}
,{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
实现轮播图效果
首页要实现轮播图效果，到home.js中定义data
/**
* 页面的初始数据
*/
data: {
// 存放轮播图数据的列表
swiperList: [],
// 存放九宫格数据的列表
gridList: []
},
在onLoad方法后面定义获取轮播图的方法、
// 获取轮播图数据的方法
getSwiperList() {
wx.request({
url: 'https://www.escook.cn/slides',
method: 'GET',
success: (res) => {
this.setData({
swiperList: res.data
})
}
})
},
轮播图代码
<!-- 轮播图区域 -->
<swiper indicator-dots circular autoplay="true" interval="3000">
<swiper-item wx:for="{{swiperList}}" wx:key="id" >
<image src="{{item.image}}" mode="aspectFill"></image>
</swiper-item>
</swiper>
样式如下
获取九宫格
// 获取九宫格数据的方法
getGridList() {
wx.request({
url: 'https://www.escook.cn/categories',
method: 'GET',
success: (res) => {
this.setData({
gridList: res.data
})
}
})
},
display: flex;
flex-direction: column;进行了纵向布局，使得两个并列的元素变成上下排列。
align-items: center;进行了竖向的居中
justify-content: center;进行了水平的居中
两者结合实现了水平垂直居中
在iphone6模式下，1rpx等于2px,如果希望字体是12px,那么宽高设置为24rpx.
需要每一排并列三个，那么子级使用width:33.33%，同时父级采用flex-wrap:wrap
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
每一项添加了分割线。
box-sizing: border-box; 使得能够挤满3个元素。
父级添加一些border,使得边框都有了。
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
图片区
<!-- 图片区域 -->
<view class="img-box">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
wxss
.img-box {
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image {
width: 45%;
}
效果如下