微信小程序：基础复习

设置底部导航栏

设置图标Icon属性

"iconPath":"icon/shouye.png",
"selectedIconPath":"icon/shouye.png"

基础组件

轮播图组件

components/swiper/swiper.wxml

<!--components/swiper/swiper.wxml-->
<text>{{text}}</text>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <view wx:for="{{list}}" wx:key="*this">
        <swiper-item>
            <image style="width: 100%; height: 200px;"  src="{{item}}" alt="img" />
        </swiper-item>
    </view>
</swiper>

components/swiper/swiper.ts

// components/swiper/swiper.ts

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        text: {
            type: String,
            value: '轮播组件'
        },
        list: {
            type: Array,
            value: [],
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        indicatorDots: true,
        vertical: false,
        autoplay: false,
        interval: 2000,
        duration: 500
    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

在页面中使用

pages/travel/travel.wxml

<!--pages/travel/travel.wxml-->
<text>pages/travel/travel.wxml</text>
<Swiper text="旅途攻略" list="{{list}}" />

pages/travel/travel.ts

// pages/travel/travel.ts


Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: ['https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021352061916-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=f39466d70208ceb27fa6f8bebe645913', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=88bc83e0116ca3a90b1e1a4cc582c6cd', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021221064F5-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656317158&t=b733f1d81f31d7a487b5c3c46bfe0b46'],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

{
  "usingComponents": {
    "Swiper": "../../components/swiper/swiper"
  }
}

子组件（自定义组件component)给父组件传递参数

components

<!--components/search/index.wxml-->
<text>components/search/index.wxml</text>
<input class="search" type="{{type}}" bindblur="getChangeValue" />

// components/search/index.ts
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        type: {
            type: String,
            value: 'text'
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
        getChangeValue (v) {
            console.log('v', v?.detail);
            this.triggerEvent('getSearchValue',v)
        }
    }
})

父组件

<!--pages/travel/travel.wxml-->
<text>pages/travel/travel.wxml</text>
<Swiper text="旅途攻略" list="{{list}}" />
<view></view>
<!-- 搜索栏 -->
<Search bind:getSearchValue="getSearhName" />

// pages/travel/travel.ts


Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: ['https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021352061916-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=f39466d70208ceb27fa6f8bebe645913', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=88bc83e0116ca3a90b1e1a4cc582c6cd', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021221064F5-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656317158&t=b733f1d81f31d7a487b5c3c46bfe0b46'],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
       
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
    getSearhName(e){
        console.log('bbb',e);
    }
})