小程序学习第二天模版与配置 小程序后期

目标：

能够使用 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%;

}

效果如下