小程序 1、语法入门
动态绑定数据、三元运算、算数运算、事件绑定
<!-- 对比和 Vue 的差异 -->
<image src="{{ imgSrc }}" mode="widthFix"></image>
1.1 事件绑定
e.target:点击谁就是谁
e.currentTarget:谁绑定就是谁
1.2 setData 的注意点
1.2.1 bindtap
setData
函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data
的值(同步),可以配合事件绑定的参数传递来证明
<view>
<view> {{count}} </view>
<button type="primary" bindtap="btnTapHandler" data-info="{{count}}">按钮</button>
</view>
btnTapHandler(e) {
this.setData({
count: this.data.count + 1
})
console.log(this.data.count) // 同步
console.log(e.target.dataset.info) // 异步
}
1.2.2 bindinput
实现双向数据绑定
<!-- 注意结束标签 -->
<view> {{msg}} </view>
<input value="{{msg}}" type="text" bindinput="handleInput" />
handleInput(e) {
this.setData({
msg: e.detail.value
})
}
1.2.3 wx:if 和 hidden 的差异
创建和销毁,显示与隐藏
1.2.4 wx:for
<!-- 默认是 index 和 item -->
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx"> {{idx}}: {{itemName}} </view>
1.3 wxss
不同设备屏幕统一等分为 750 份, 1 份就是 1 rpx, 在较小的设备上,1 rpx 所代表的宽度较小,在较大的设备上,1 rpx 所代表的宽度较大,小程序会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配!
1.4 全局配置
"window":{
// 标题文字
"navigationBarTitleText": "黑马程序员",
// 标题背景色,只支持 16 进制
"navigationBarBackgroundColor": "#2b4b6b",
// 标题文字颜色,只支持 black 和 white
"navigationBarTextStyle":"white",
// 开启下拉刷新时 loading 的颜色,支持 dark 和 light
"backgroundTextStyle":"dark",
// 开启下拉刷新
"enablePullDownRefresh": true,
// 下拉刷新后看到的背景色
"backgroundColor": "#efefef",
// 上滑触底的距离,默认 50px
"onReachBottomDistance": 50
}
1.5 tabBar
backgroundColor: tabBar 的背景色
iconPath: 未选中的图片路径
selectedIconPath: 选中的图片路径
borderStyle: tabBar 上边框的颜色
color: 文字颜色
selectedColor: 选中时的文字颜色
"tabBar": {
"list": [
{
// 页面路径,必须在 pages 中预先定义
"pagePath": "pages/index/index",
// tab 上显示的文字
"text": "首页",
// 未选中时的图标路径,当 postion 为 top 时,不显示 icon
"iconPath": "",
// 选中时的图标路径,当 postion 为 top 时,不显示 icon
"selectedIconPath": ""
},
{
"pagePath": "pages/test/test",
"text": "测试",
"iconPath": "",
"selectedIconPath": ""
}
]
}
1.6 页面配置中常用的配置项
navigationBarBackgroundColor: 导航背景颜色
navigationBarTextStyle: 标题颜色
navigationBarTitleText: 标题内容
backgroundColor: 背景色,即下拉刷新时期望看到的背景色
backgroundTextStyle: 下拉 loading 的样式
enablePullDownRefresh: 是否开启下拉刷新
onReachBottomDistance: 上滑加载距离
1.7 网络请求
两个限制:安全考虑,只能请求 HTTPS 类型的接口;必须将接口的域名添加到信任列表中,域名只支持 https 协议,不能使用 IP 地址或 localhost,ICP 备案,一个月内最多可申请 5 次修改!
onLoad: function (options) {
wx.request({
url: 'https://www.escook.cn/api/get',
method: 'GET',
data: {
name: 'zs',
age: 22
},
success: (res) => {
console.log(res)
}
});
}
a. 安装
npm init -y
npm install --save miniprogram-api-promise
b. 配置
app.js
import { promisifyAll } from 'miniprogram-api-promise';
wx.p = {};
promisifyAll(wx, wx.p);
c. 使用
test.js
wx.p.request({
url: 'https://www.escook.cn/api/get',
method: 'GET',
data: {
name: 'zs',
age: 22,
},
})
.then((r) => {
console.log(r);
});
2. 本地生活
2.1 初始化项目结构
2.2 配置导航栏效果
{
"window":{
// 开启下拉刷新时 enablePullDownRefresh,loading 的颜色
"backgroundTextStyle":"light",
// 导航的背景色
"navigationBarBackgroundColor": "#2b4b6b",
// 导航的文本
"navigationBarTitleText": "本地生活",
// 导航的文本颜色
"navigationBarTextStyle":"white"
},
}
2.3 配置 TabBar 效果
{
"tabBar": {
"list": [{
// TabBar 对应的页面路径
"pagePath": "pages/home/home",
// TabBar 文本
"text": "首页",
// TabBar 图标
"iconPath": "/images/tabs/home.png",
// TabBar 选中的图标
"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"
}]
},
}
2.4 获取轮播图的数据
Page({
data: {
swiperList: [],
},
onLoad: function (options) {
this.getSwiperList();
},
getSwiperList() {
wx.request({
url: 'https://www.escook.cn/slides',
success: (res) => {
this.setData({
swiperList: res.data,
});
},
});
},
});
2.5 渲染轮播图的效果
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
swiper {
height: 350rpx;
}
swiper image {
width: 100%;
height: 100%;
}
2.6 获取九宫格的数据
Page({
data: {
gridList: [],
},
onLoad: function (options) {
this.getGridList();
},
getGridList() {
wx.request({
url: 'https://www.escook.cn/categories',
success: (res) => {
this.setData({
gridList: res.data,
});
},
});
},
});
2.7 渲染九宫格的效果
<view class="grid-list">
<view class="grid-item" wx:for="{{gridList}}" wx:key="id">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
.grid-list {
display: flex;
flex-wrap: wrap;
border-top: 1rpx solid #efefef;
border-left: 1rpx solid #efefef;
}
.grid-item {
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
/* 小技巧 */
.grid-item:not(:nth-child(3n)) {
border-right: 1rpx solid #efefef;
}
.grid-item image {
width: 60rpx;
height: 60rpx;
}
.grid-item text {
margin-top: 10rpx;
font-size: 24rpx;
}
2.8 首页底部图片效果
<view class="img-box">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
.img-box {
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image {
width: 45%;
}