小程式 基礎知識（二）

小程式 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: [],
    },
    onl oad: 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: [],
    },
    onl oad: 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%;
}