技术：小程序
 

概述

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

详细

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

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

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

一、项目目录

二、演示效果

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

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

三、程序实现具体步骤

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

<!--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>
轮播图+导航切换index.wxss
/**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;

}
轮播图+导航切换index.js
//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的介绍，如果看着不舒服，可以直接删除。不会影响程序的运行。

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

小程序入门学习Demo的更多相关文章

  1. 微信小程序入门学习-- 简易Demo：计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

  2. 微信小程序入门学习

    前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...

  3. 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件（1）

    这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...

  4. 天河微信小程序入门《三》：打通任督二脉，前后台互通

    原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...

  5. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  6. 微信小程序入门篇

    微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...

  7. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 【小程序入门集锦】19，微信小程序个人帐号申请

    个人账号与企业帐号相比,缺少支付等功能,与个人订阅号类似.   小程序开放个人开发者申请注册,个人用户可访问微信公众平台,扫码验证个人身份后即可完成小程序帐号申请并进行代码开发.   下面我们就来说说 ...

  9. 天河微信小程序入门《四》：融会贯通，form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

随机推荐

  1. day 52 dom 事件

    本文转载自cnblog.liwenzhou.com 官网资料: http://www.w3school.com.cn/htmldom/dom_methods.asp 事件的内容很重要的,基本概念有点类 ...

  2. thinkphp5 行为（钩子）扩展

    行为整理链接 浅谈PHP中的钩子 钩子相当于一个插件,在某些执行顺序上插入进去. 行为可以在写app接口中对所有请求执行到控制器前 执行用户权限判断,sign验证等,这样就不用在每个接口中判断了 注意 ...

  3. poj 1966(求点连通度，边连通度的一类方法)

    题目链接:http://poj.org/problem?id=1966 思路:从网上找了一下大牛对于这类问题的总结:图的连通度问题是指:在图中删去部分元素(点或边),使得图中指定的两个点s和t不连通  ...

  4. Nowcoder contest 370F Rinne Loves Edges （简单树形DP) || 【最大流】(模板)

    <题目链接> 题目大意: 一个 $n$ 个节点 $m$ 条边的无向连通图,每条边有一个边权 $w_i$.现在她想玩一个游戏:选取一个 “重要点” S,然后选择性删除一些边,使得原图中所有除 ...

  5. typescript精简版1：用ts表示常见数据类型

    一:工程准备: 1.全局安装typescript npm i typescript -g // 或 yarn global add typescript vscode 配置 在命令行执行 tsc -- ...

  6. am335x uboot2016.05 （MLO u-boot.img）执行流程（转）

    am335x的cpu上电后,执行流程:ROM->MLO(SPL)->u-boot.img 第一级bootloader:引导加载程序,板子上电后会自动执行这些代码,如启动方式(SDcard. ...

  7. Fruit HDU - 2152 -上下界生成函数

    HDU - 2152 思路 :有上下界的生成函数 .生成函数即母函数,是组合数学中尤其是计数方面的一个重要理论和工具.生成函数有普通型生成函数和指数型生成函数两种, 其中普通型用的比较多.形式上说,普 ...

  8. asp.net core选项Options模块的笔记

    这篇博客是写给自己看的.已经不止一次看到AddOptions的出现,不管是在.net core源码还是别人的框架里面,都充斥着AddOptions.于是自己大概研究了下,没有深入,因为,我的功力还是不 ...

  9. 在UnrealEngine中用Custom节点实现径向模糊

    //input NotUse 为了开启SceneTextureLookup函数而连接的节点,但是不参与逻辑 //input UV 屏幕缓存的坐标坐标 //input Strength 力度 //inp ...

  10. [Python]Marshmallow 代码

    schema.dump和schema.load schema.dump()方法返回一个MarshResult的对象,marshmallow官方API说dump和load方法返回的都是dict对象,但查 ...