小程序 基础知识（二）

小程序 1、语法入门

动态绑定数据、三元运算、算数运算、事件绑定

数据绑定

<!-- 对比和 Vue 的差异 -->
<image src="{{ imgSrc }}" mode="widthFix"></image>

1.1 事件绑定

事件绑定

e.target：点击谁就是谁

e.currentTarget：谁绑定就是谁

1.2 setData 的注意点

1.2.1 bindtap

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步），可以配合事件绑定的参数传递来证明

page

<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

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)
        }
    });
}

API Promise 化

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%;
}