├── LICENSE ├── README.md ├── app.js ├── app.json ├── app.wxss ├── assets ├── common │ ├── arrow-right.png │ ├── favor.png │ └── top.png ├── detail │ ├── collect.png │ ├── service.png │ └── shop.png ├── home │ └── popular_bg.jpg └── tabbar │ ├── cart.png │ ├── cart_active.png │ ├── category.png │ ├── category_active.png │ ├── home.png │ ├── home_active.png │ ├── profile.png │ └── profile_active.png ├── components ├── w-back-top │ ├── w-back-top.js │ ├── w-back-top.json │ ├── w-back-top.wxml │ └── w-back-top.wxss ├── w-goods-item │ ├── w-goods-item.js │ ├── w-goods-item.json │ ├── w-goods-item.wxml │ └── w-goods-item.wxss ├── w-goods │ ├── w-goods.js │ ├── w-goods.json │ ├── w-goods.wxml │ └── w-goods.wxss ├── w-swiper │ ├── w-swiper.js │ ├── w-swiper.json │ ├── w-swiper.wxml │ └── w-swiper.wxss └── w-tab-control │ ├── w-tab-control.js │ ├── w-tab-control.json │ ├── w-tab-control.wxml │ └── w-tab-control.wxss ├── pages ├── cart │ ├── cart.js │ ├── cart.json │ ├── cart.wxml │ └── cart.wxss ├── category │ ├── category.js │ ├── category.json │ ├── category.wxml │ └── category.wxss ├── home │ ├── childCpns │ │ ├── w-popular │ │ │ ├── w-popular.js │ │ │ ├── w-popular.json │ │ │ ├── w-popular.wxml │ │ │ └── w-popular.wxss │ │ └── w-recommend │ │ │ ├── w-recommend.js │ │ │ ├── w-recommend.json │ │ │ ├── w-recommend.wxml │ │ │ └── w-recommend.wxss │ ├── home.js │ ├── home.json │ ├── home.wxml │ └── home.wxss └── profile │ ├── profile.js │ ├── profile.json │ ├── profile.wxml │ └── profile.wxss ├── project.config.json ├── service ├── config.js ├── home.js └── network.js └── sitemap.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 coderwhy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 小程序课程 2 | ### 小程序学习 3 | 4 | > 本项目是学习小程序开发的练习项目，课程完全免费，如果对您有帮助，欢迎star 5 | 6 | 讲解视频：链接: https://pan.baidu.com/s/1O2vkYTs2wAzXhniZz79Rfg 提取码: tbgw 7 | 8 | 课程代码：https://github.com/coderwhy/LearnMiniProgram 9 | 10 | 课程大纲： 11 | 12 | 13 | 14 | 15 | 16 | ### 代码如何运行 17 | 18 | > 课程中的每个知识点使用tag进行管理，所以查看对应的知识点需要切换tag 19 | 20 | 1.将代码clone到本地（注意这里不能直接download） 21 | 22 | ```shell 23 | git clone https://github.com/coderwhy/LearnMiniProgram 24 | ``` 25 | 26 | 2.进入目录，查看某个知识点，切换到对应的tag 27 | 28 | ```shell 29 | git checkout 12_登录流程和演练 30 | ``` 31 | 32 | 33 | 34 | ### 项目展示 35 | 36 | 项目代码：https://github.com/coderwhy/HYMiniMall 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/app.js -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/home/home", 4 | "pages/category/category", 5 | "pages/cart/cart", 6 | "pages/profile/profile" 7 | ], 8 | "window": { 9 | "navigationBarBackgroundColor": "#ff5777", 10 | "navigationBarTextStyle": "white" 11 | }, 12 | "tabBar": { 13 | "selectedColor": "#ff5777", 14 | "list": [ 15 | { 16 | "pagePath": "pages/home/home", 17 | "text": "首页", 18 | "iconPath": "/assets/tabbar/home.png", 19 | "selectedIconPath": "/assets/tabbar/home_active.png" 20 | }, 21 | { 22 | "pagePath": "pages/category/category", 23 | "text": "分类", 24 | "iconPath": "/assets/tabbar/category.png", 25 | "selectedIconPath": "/assets/tabbar/category_active.png" 26 | }, 27 | { 28 | "pagePath": "pages/cart/cart", 29 | "text": "购物车", 30 | "iconPath": "/assets/tabbar/cart.png", 31 | "selectedIconPath": "/assets/tabbar/cart_active.png" 32 | }, 33 | { 34 | "pagePath": "pages/profile/profile", 35 | "text": "我的", 36 | "iconPath": "/assets/tabbar/profile.png", 37 | "selectedIconPath": "/assets/tabbar/profile_active.png" 38 | } 39 | ] 40 | }, 41 | "sitemapLocation": "sitemap.json" 42 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/app.wxss -------------------------------------------------------------------------------- /assets/common/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/common/arrow-right.png -------------------------------------------------------------------------------- /assets/common/favor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/common/favor.png -------------------------------------------------------------------------------- /assets/common/top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/common/top.png -------------------------------------------------------------------------------- /assets/detail/collect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/detail/collect.png -------------------------------------------------------------------------------- /assets/detail/service.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/detail/service.png -------------------------------------------------------------------------------- /assets/detail/shop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/detail/shop.png -------------------------------------------------------------------------------- /assets/home/popular_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/home/popular_bg.jpg -------------------------------------------------------------------------------- /assets/tabbar/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/cart.png -------------------------------------------------------------------------------- /assets/tabbar/cart_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/cart_active.png -------------------------------------------------------------------------------- /assets/tabbar/category.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/category.png -------------------------------------------------------------------------------- /assets/tabbar/category_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/category_active.png -------------------------------------------------------------------------------- /assets/tabbar/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/home.png -------------------------------------------------------------------------------- /assets/tabbar/home_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/home_active.png -------------------------------------------------------------------------------- /assets/tabbar/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/profile.png -------------------------------------------------------------------------------- /assets/tabbar/profile_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderwhy/LearnMiniProgram/de1f867d68e4ab8d8f5773cd546ee3bff7d63d8e/assets/tabbar/profile_active.png -------------------------------------------------------------------------------- /components/w-back-top/w-back-top.js: -------------------------------------------------------------------------------- 1 | // components/w-back-top/w-back-top.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | 8 | }, 9 | 10 | /** 11 | * 组件的初始数据 12 | */ 13 | data: { 14 | 15 | }, 16 | 17 | /** 18 | * 组件的方法列表 19 | */ 20 | methods: { 21 | handleBackTop() { 22 | wx.pageScrollTo({ 23 | scrollTop: 0, 24 | }) 25 | } 26 | } 27 | }) 28 | -------------------------------------------------------------------------------- /components/w-back-top/w-back-top.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/w-back-top/w-back-top.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /components/w-back-top/w-back-top.wxss: -------------------------------------------------------------------------------- 1 | /* components/w-back-top/w-back-top.wxss */ 2 | .back-top { 3 | position: fixed; 4 | right: 10rpx; 5 | bottom: 10rpx; 6 | } 7 | 8 | .back-top image { 9 | width: 100rpx; 10 | height: 100rpx; 11 | } 12 | -------------------------------------------------------------------------------- /components/w-goods-item/w-goods-item.js: -------------------------------------------------------------------------------- 1 | // components/w-goods-item/w-goods-item.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | item: { 8 | type: Object, 9 | value: {} 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | 18 | }, 19 | 20 | /** 21 | * 组件的方法列表 22 | */ 23 | methods: { 24 | 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /components/w-goods-item/w-goods-item.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/w-goods-item/w-goods-item.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.title}} 6 | 7 | ¥{{item.price}} 8 | 9 | {{item.cfav}} 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/w-goods-item/w-goods-item.wxss: -------------------------------------------------------------------------------- 1 | /* components/w-goods-item/w-goods-item.wxss */ 2 | .goods-item { 3 | text-align: center; 4 | color: #333; 5 | padding-bottom: 85rpx; 6 | } 7 | 8 | .image { 9 | width: 100%; 10 | border-radius: 10rpx; 11 | } 12 | 13 | .desc-info { 14 | position: absolute; 15 | left: 0; 16 | right: 0; 17 | bottom: 5rpx; 18 | } 19 | 20 | .title { 21 | white-space: nowrap; 22 | overflow: hidden; 23 | text-overflow: ellipsis; 24 | font-size: 28rpx; 25 | } 26 | 27 | .info { 28 | font-size: 26rpx; 29 | } 30 | 31 | .info .price { 32 | color: #ff5777; 33 | /* padding-right: 10rpx; */ 34 | } 35 | 36 | .info .icon { 37 | width: 30rpx; 38 | height: 30rpx; 39 | padding: 0 6rpx 0 10rpx; 40 | position: relative; 41 | top: 5rpx; 42 | } 43 | 44 | .cfav { 45 | /* padding-left: 10rpx; */ 46 | position: relative; 47 | } 48 | 49 | /* 注意事项: 在wxss中不能引用本地图片,只能引用网络图片 */ 50 | /* .cfav::before { 51 | content: ''; 52 | position: absolute; 53 | left: -15px; 54 | top: -1px; 55 | width: 14px; 56 | height: 14px; 57 | background: url("/assets/common/favor.png") 0 0/14px 14px; 58 | } */ 59 | -------------------------------------------------------------------------------- /components/w-goods/w-goods.js: -------------------------------------------------------------------------------- 1 | // components/w-goods/w-goods.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | goods: { 8 | type: Array, 9 | value: [] 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | 18 | }, 19 | 20 | /** 21 | * 组件的方法列表 22 | */ 23 | methods: { 24 | 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /components/w-goods/w-goods.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "w-goods-item": "/components/w-goods-item/w-goods-item" 5 | } 6 | } -------------------------------------------------------------------------------- /components/w-goods/w-goods.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /components/w-goods/w-goods.wxss: -------------------------------------------------------------------------------- 1 | /* components/w-goods/w-goods.wxss */ 2 | .goods { 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-evenly; 6 | } 7 | 8 | .goods > .item { 9 | width: 48%; 10 | position: relative; 11 | margin-top: 16rpx; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /components/w-swiper/w-swiper.js: -------------------------------------------------------------------------------- 1 | // components/w-swiper/w-swiper.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | list: { 8 | type: Array, 9 | value: [] 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | 18 | }, 19 | 20 | /** 21 | * 组件的方法列表 22 | */ 23 | methods: { 24 | 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /components/w-swiper/w-swiper.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/w-swiper/w-swiper.wxml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /components/w-swiper/w-swiper.wxss: -------------------------------------------------------------------------------- 1 | /* components/w-swiper/w-swiper.wxss */ 2 | .swiper-item image { 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /components/w-tab-control/w-tab-control.js: -------------------------------------------------------------------------------- 1 | // components/w-tab-control/w-tab-control.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | titles: { 8 | type: Array, 9 | value: [] 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | currentIndex: 0 18 | }, 19 | 20 | /** 21 | * 组件的方法列表 22 | */ 23 | methods: { 24 | itemClick(e) { 25 | // 1.设置最新的index 26 | this.setData({ 27 | currentIndex: e.currentTarget.dataset.index 28 | }) 29 | 30 | // 2.发出时间 31 | const data = {index: this.data.currentIndex} 32 | this.triggerEvent("tabclick", data, {}) 33 | } 34 | } 35 | }) 36 | -------------------------------------------------------------------------------- /components/w-tab-control/w-tab-control.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/w-tab-control/w-tab-control.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | {{item}} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /components/w-tab-control/w-tab-control.wxss: -------------------------------------------------------------------------------- 1 | /* components/w-tab-control/w-tab-control.wxss */ 2 | .tab-control { 3 | display: flex; 4 | margin-bottom: 16rpx; 5 | background: #fff; 6 | padding-bottom: 10rpx; 7 | } 8 | 9 | .tab-item { 10 | flex: 1; 11 | text-align: center; 12 | height: 80rpx; 13 | line-height: 80rpx; 14 | font-size: 32rpx; 15 | } 16 | 17 | .active { 18 | color: #ff5777; 19 | } 20 | 21 | .tab-item.active text { 22 | padding: 16rpx 10rpx; 23 | border-bottom: 6rpx solid #ff5777; 24 | } 25 | -------------------------------------------------------------------------------- /pages/cart/cart.js: -------------------------------------------------------------------------------- 1 | // pages/cart/cart.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/cart/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/cart/cart.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/cart/cart.wxml 3 | -------------------------------------------------------------------------------- /pages/cart/cart.wxss: -------------------------------------------------------------------------------- 1 | /* pages/cart/cart.wxss */ -------------------------------------------------------------------------------- /pages/category/category.js: -------------------------------------------------------------------------------- 1 | // pages/category/category.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/category/category.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/category/category.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/category/category.wxml 3 | -------------------------------------------------------------------------------- /pages/category/category.wxss: -------------------------------------------------------------------------------- 1 | /* pages/category/category.wxss */ -------------------------------------------------------------------------------- /pages/home/childCpns/w-popular/w-popular.js: -------------------------------------------------------------------------------- 1 | // pages/home/childCpns/w-popular/w-polular.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | 8 | }, 9 | 10 | /** 11 | * 组件的初始数据 12 | */ 13 | data: { 14 | 15 | }, 16 | 17 | /** 18 | * 组件的方法列表 19 | */ 20 | methods: { 21 | 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /pages/home/childCpns/w-popular/w-popular.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /pages/home/childCpns/w-popular/w-popular.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /pages/home/childCpns/w-popular/w-popular.wxss: -------------------------------------------------------------------------------- 1 | /* pages/home/childCpns/w-popular/w-polular.wxss */ 2 | .popular image { 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /pages/home/childCpns/w-recommend/w-recommend.js: -------------------------------------------------------------------------------- 1 | // pages/home/childCpns/w-recommend/w-recommend.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | recommends: { 8 | type: Array, 9 | value: [] 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | isLoad: false 18 | }, 19 | 20 | /** 21 | * 组件的方法列表 22 | */ 23 | methods: { 24 | handleImageLoad() { 25 | if (!this.data.isLoad) { 26 | this.triggerEvent('imageload') 27 | this.data.isLoad = true 28 | } 29 | } 30 | } 31 | }) 32 | -------------------------------------------------------------------------------- /pages/home/childCpns/w-recommend/w-recommend.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /pages/home/childCpns/w-recommend/w-recommend.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.title}} 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /pages/home/childCpns/w-recommend/w-recommend.wxss: -------------------------------------------------------------------------------- 1 | /* pages/home/childCpns/w-recommend/w-recommend.wxss */ 2 | .recommend { 3 | display: flex; 4 | margin-top: 40rpx; 5 | padding-bottom: 40rpx; 6 | border-bottom: 16rpx solid #eee; 7 | } 8 | 9 | .recommend-item { 10 | flex: 1; 11 | text-align: center; 12 | } 13 | 14 | .recommend-item image { 15 | width: 160rpx; 16 | height: 160rpx; 17 | } 18 | 19 | .recommend-item view { 20 | font-size: 30rpx; 21 | color: #555; 22 | margin-top: 10rpx; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /pages/home/home.js: -------------------------------------------------------------------------------- 1 | // pages/home/home.js 2 | import { 3 | getMultiData, 4 | getGoodsData 5 | } from '../../service/home.js' 6 | 7 | const TOP_DISTANCE = 1000; 8 | const types = ['pop', 'new', 'sell'] 9 | 10 | Page({ 11 | data: { 12 | banners: [], 13 | recommends: [], 14 | titles: ['流行', '新款', '精选'], 15 | goods: { 16 | pop: {page: 0, list: []}, 17 | new: {page: 0, list: []}, 18 | sell: {page: 0, list: []} 19 | }, 20 | currentType: 'pop', 21 | showBackTop: false, 22 | isTabFixed: false, 23 | tabScrollTop: 0 24 | }, 25 | onLoad: function (options) { 26 | // 1.请求轮播图以及推荐数据 27 | this._getMultidata() 28 | 29 | // 2.请求商品数据 30 | this._getGoodsData('pop') 31 | this._getGoodsData('new') 32 | this._getGoodsData('sell') 33 | }, 34 | // onShow: 页面显示出来的时回调的函数 35 | // 页面显示是否意味着所有的图片都加载完成 36 | onShow() { 37 | }, 38 | 39 | // ------------------- 网络请求函数 ------------------------- 40 | _getMultidata() { 41 | getMultiData().then(res => { 42 | // 取出轮播图和推荐的数据 43 | const banners = res.data.data.banner.list; 44 | const recommends = res.data.data.recommend.list; 45 | 46 | // 将banners和recommends放到data中 47 | this.setData({ 48 | banners, 49 | recommends 50 | }) 51 | }) 52 | }, 53 | _getGoodsData(type) { 54 | // 1.获取页码 55 | const page = this.data.goods[type].page + 1; 56 | 57 | // 2.发送网络请求 58 | getGoodsData(type, page).then(res => { 59 | // console.log(res) 60 | // 2.1.取出数据 61 | const list = res.data.data.list; 62 | 63 | // 2.2.将数据设置到对应type的list中 64 | const oldList = this.data.goods[type].list; 65 | oldList.push(...list) 66 | 67 | // 2.3.将数据设置到data中的goods中 68 | const typeKey = `goods.${type}.list`; 69 | const pageKey = `goods.${type}.page`; 70 | this.setData({ 71 | [typeKey]: oldList, 72 | [pageKey]: page 73 | }) 74 | }) 75 | }, 76 | 77 | // ------------------- 事件监听函数 ------------------------- 78 | handleTabClick(event) { 79 | // 取出index 80 | const index = event.detail.index; 81 | 82 | // 设置currentType 83 | this.setData({ 84 | currentType: types[index] 85 | }) 86 | }, 87 | handleImageLoad() { 88 | wx.createSelectorQuery().select('#tab-control').boundingClientRect(rect => { 89 | this.data.tabScrollTop = rect.top 90 | }).exec() 91 | }, 92 | 93 | onReachBottom() { 94 | // 上拉加载更多 -> 请求新的数据 95 | this._getGoodsData(this.data.currentType) 96 | }, 97 | 98 | onPageScroll(options) { 99 | // 1.取出scrollTop 100 | const scrollTop = options.scrollTop; 101 | // console.log(scrollTop) 102 | 103 | // 2.修改showBackTop属性 104 | // 官方: 不要再滚动的函数回调中频繁的调用this.setData 105 | const flag1 = scrollTop >= TOP_DISTANCE; 106 | if (flag1 != this.data.showBackTop) { 107 | this.setData({ 108 | showBackTop: flag1 109 | }) 110 | } 111 | 112 | // 3.修改isTabFixed属性 113 | const flag2 = scrollTop >= this.data.tabScrollTop; 114 | if (flag2 != this.data.isTabFixed) { 115 | this.setData({ 116 | isTabFixed: flag2 117 | }) 118 | } 119 | } 120 | }) -------------------------------------------------------------------------------- /pages/home/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "w-swiper": "/components/w-swiper/w-swiper", 4 | "w-tab-control": "/components/w-tab-control/w-tab-control", 5 | "w-goods": "/components/w-goods/w-goods", 6 | "w-back-top": "/components/w-back-top/w-back-top", 7 | "w-recommend": "./childCpns/w-recommend/w-recommend", 8 | "w-popular": "./childCpns/w-popular/w-popular" 9 | }, 10 | "navigationBarTitleText": "购物街" 11 | } -------------------------------------------------------------------------------- /pages/home/home.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /pages/home/home.wxss: -------------------------------------------------------------------------------- 1 | /* pages/home/home.wxss */ 2 | .fixed { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | right: 0; 7 | z-index: 1; 8 | } 9 | -------------------------------------------------------------------------------- /pages/profile/profile.js: -------------------------------------------------------------------------------- 1 | // pages/profile/profile.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/profile/profile.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/profile/profile.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/profile/profile.wxml 3 | -------------------------------------------------------------------------------- /pages/profile/profile.wxss: -------------------------------------------------------------------------------- 1 | /* pages/profile/profile.wxss */ -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": false, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false, 13 | "checkInvalidKey": true 14 | }, 15 | "compileType": "miniprogram", 16 | "libVersion": "2.7.1", 17 | "appid": "wx44a8878d2bb8c7d8", 18 | "projectname": "MiniProgram", 19 | "debugOptions": { 20 | "hidedInDevtools": [] 21 | }, 22 | "isGameTourist": false, 23 | "simulatorType": "wechat", 24 | "simulatorPluginLibVersion": {}, 25 | "condition": { 26 | "search": { 27 | "current": -1, 28 | "list": [] 29 | }, 30 | "conversation": { 31 | "current": -1, 32 | "list": [] 33 | }, 34 | "game": { 35 | "currentL": -1, 36 | "list": [] 37 | }, 38 | "miniprogram": { 39 | "current": -1, 40 | "list": [] 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /service/config.js: -------------------------------------------------------------------------------- 1 | const baseURL = 'http://123.207.32.32:8000'; 2 | 3 | export { 4 | baseURL 5 | } 6 | -------------------------------------------------------------------------------- /service/home.js: -------------------------------------------------------------------------------- 1 | import request from './network.js' 2 | 3 | export function getMultiData() { 4 | return request({ 5 | url: '/home/multidata' 6 | }) 7 | } 8 | 9 | export function getGoodsData(type, page) { 10 | return request({ 11 | url: '/home/data', 12 | data: { 13 | type, 14 | page 15 | } 16 | }) 17 | } -------------------------------------------------------------------------------- /service/network.js: -------------------------------------------------------------------------------- 1 | import { 2 | baseURL 3 | } from './config.js' 4 | 5 | export default function(options) { 6 | return new Promise((resolve, reject) => { 7 | wx.request({ 8 | url: baseURL + options.url, 9 | method: options.method || 'get', 10 | data: options.data || {}, 11 | success: resolve, 12 | fail: reject 13 | }) 14 | }) 15 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } --------------------------------------------------------------------------------