小程序入门学习Demo

技术：小程序
 

概述

适合学习小程序的初级开发人员，入门教程

详细

代码下载：http://www.demodashi.com/demo/14956.html

小程序周边美甲美发预约Demo

代码主要写了轮播+导航切换+返回顶部+滑动切换+下拉菜单选择+用户信息获取。页面布局运用flex布局。

看代码时建议打开小程序文档，更好的了解组件或者Api。附上小程序文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

一、项目目录

 

QQ20190220-175535@2x_meitu_1.jpg

二、演示效果

 

代码比较简单，适合想学习小程序而不知道如何下手的同学们，里面没有接口都是直接在data中模拟的数据。

在微信开发者工具中可以直接跑起来。

三、程序实现具体步骤

轮播图+导航切换+返回顶部 index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" style='width:100%;height:100%'/>
</swiper-item>
</block>
</swiper>
<!-- <scroll-view> -->
<view class="item-view">
<view class="item-view1 {{currentTab == index ? 'item-active' : ''}}" wx:for="{{navLists}}" wx:key="index" style='width:{{100/navLists.length}}%' bindtap='swichNav' data-current="{{index}}">
<image class='item-img' src='{{item.imgUrl}}'></image>
<text class='item-text'>{{item.title}}</text>
</view> 
</view>
<!-- </scroll-view> -->
<swiper current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{cliHeight}}px" class='item-view0'>
<swiper-item>
<view class='item-view2' wx:for="{{contentList}}" wx:key="index" data-id="{{item.id}}" bindtap='goDetail'>
<view class='item-view3'>
<image src="{{item.imgUrl}}"></image>
</view>
<view class='item-view4'>
<view class='item-text1'>{{item.title}}</view>
<view class='item-text2'>价格:¥{{item.price}}</view>
<view class='item-text3'>{{item.langer}}</view>
</view>
<view class='item-view5'>
<text>预约</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class='item-view2' wx:for="{{contentList}}" wx:key="index">
<view class='item-view3'>
<image src="{{item.imgUrl}}"></image>
</view>
<view class='item-view4'>
<view class='item-text1'>{{item.title}}</view>
<view class='item-text2'>价格:¥{{item.price}}</view>
<view class='item-text3'>{{item.langer}}</view>
</view>
<view class='item-view5'>
<text>预约</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class='item-view2' wx:for="{{contentList}}" wx:key="index">
<view class='item-view3'>
<image src="{{item.imgUrl}}"></image>
</view>
<view class='item-view4'>
<view class='item-text1'>{{item.title}}</view>
<view class='item-text2'>价格:¥{{item.price}}</view>
<view class='item-text3'>{{item.langer}}</view>
</view>
<view class='item-view5'>
<text>预约</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class='item-view2' wx:for="{{contentList}}" wx:key="index">
<view class='item-view3'>
<image src="{{item.imgUrl}}"></image>
</view>
<view class='item-view4'>
<view class='item-text1'>{{item.title}}</view>
<view class='item-text2'>价格:¥{{item.price}}</view>
<view class='item-text3'>{{item.langer}}</view>
</view>
<view class='item-view5'>
<text>预约</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class='item-view2' wx:for="{{contentList}}" wx:key="index">
<view class='item-view3'>
<image src="{{item.imgUrl}}"></image>
</view>
<view class='item-view4'>
<view class='item-text1'>{{item.title}}</view>
<view class='item-text2'>价格:¥{{item.price}}</view>
<view class='item-text3'>{{item.langer}}</view>
</view>
<view class='item-view5'>
<text>预约</text>
</view>
</view>
</swiper-item>
</swiper>
<view class='item-flxed' bindtap='onTop' wx:if="{{isDisplay}}">
<text>top</text>
</view>
?
1
轮播图+导航切换index.wxss
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/**index.wxss**/
.item-view{
height: 80px;
background:rgba(0, 0, 0, .1);
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.item-view1{
text-align: center;
}
.item-img{
width: 45px;
height: 45px;
border-radius: 50%;
display: block;
margin:0 auto;
}
.item-text{
color: #FFF;
display: block;
margin-top: 5px;
font-size: 13px;
}
.item-active .item-text{
color: red;
}
.item-view0{
padding-left: 10px;
padding-right: 10px;
}
.item-view2{
display: flex;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #808080;
}
 
.item-view3{
width: 28%;
overflow: hidden;
}
.item-view3 image{
width: 100%;
height: 100%;
border-radius: 6px;
}
.item-view4{
margin-left: 13px;
width: 50%;
}
.item-text1{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 15px;
}
.item-text2{
margin-top: 10px;
color: red;
}
.item-text3{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-top: 5px;
font-size: 13px;
color: #808080;
}
.item-view5{
text-align: center;
line-height: 80px;
width: 20%;
}
.item-view5 text{
background: red;
display: inline-block;
color: #FFF;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 13px;
}
.item-flxed{
position: fixed;
bottom:10px;
right: 17px;
z-index: 100;
width: 45px;
height: 45px;
border-radius: 50%;
text-align: center;
line-height: 45px;
background: #808080;
}
.item-flxed text{
color: #FFF;
}
?
1
轮播图+导航切换index.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
//index.js
//获取应用实例
const app = getApp()
 
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
// wx.setBackgroundTextStyle({
//   textStyle: 'light' // 下拉背景字体、loading 图的样式为dark
// })
// wx.showTabBarRedDot({
//   index: 2,
//   success(res){
//     console.log(res)
//   }
// })
const logger = wx.getLogManager({ level: 0 })
logger.log({ str: 'hello world' }, 'basic log', 100, [1, 2, 3])
logger.info({ str: 'hello world' }, 'info log', 100, [1, 2, 3])
logger.debug({ str: 'hello world' }, 'debug log', 100, [1, 2, 3])
logger.warn({ str: 'hello world' }, 'warn log', 100, [1, 2, 3])
console.debug(logger)
 
Page({
data: {
imgUrls: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg'
],
indicatorDots: true,
autoplay: true,
circular:true,
interval: 3000,
duration: 500,
navLists: [
{
id:'0',
title:"推荐",
imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: '1',
title: "美甲",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: '2',
title: "美容",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: '3',
title: "美发",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: '4',
title: "美睫",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
],
contentList:[
{
id:'1',
imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg',
title:'秋季特价美甲秋季特价美甲秋季特价美甲秋季特价美甲秋季特价美甲秋季特价美甲',
price:'188',
langer:'我们追求卓美我们追求卓美我们追求卓美'
}
],
currentTab:0,
scrollTop: 0,
isDisplay:false
},
//滑动切换样式
switchTab:function(e){
this.setData({
currentTab: e.detail.current
});
},
//点击切换文字样式
swichNav:function(e){
let cur = e.currentTarget.dataset.current;
if (this.data.currentTaB == cur) {
return false;
}else{
this.setData({
currentTab: cur
})
}
},
//高度自适应
onLoad: function () {
var that = this;
let arr = [];
for(let i = 0; i< 10;i++){
arr.push(this.data.contentList[0])
}
this.setData({
contentList:arr
})
let cliHeight = arr.length * 101;
that.setData({
cliHeight: cliHeight
});
},
onPageScroll: function (e) {
if (e.scrollTop > 500){
this.setData({ isDisplay: true})
}else{
this.setData({ isDisplay: false })
}
},
//返回顶部
onTop: function (e) {
wx.pageScrollTo({
scrollTop: 0
})
},
//跳转详情页
goDetail:function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id,
})
}
})

四、其他补充

里面index中有部分注释调的代码，解开注释同样可以跑起来。

主要介绍了小程序的一些组件的使用，和一些api的介绍，如果看着不舒服，可以直接删除。不会影响程序的运行。

代码下载：http://www.demodashi.com/demo/14956.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

posted on   demo例子集  阅读(2982)  评论(0)  编辑  收藏  举报

（评论功能已被禁用）
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae