最新最全的微信小程序入门学习教程，微信小程序零基础入门到精通

最新推荐文章于 2024-01-29 23:11:34 发布

呓语煮酒

最新推荐文章于 2024-01-29 23:11:34 发布

阅读量1.4k

点赞数 3

分类专栏：微信小程序

原文链接：https://xiaoshitou.blog.csdn.net/article/details/107557972

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

写在前面

1，讲解视频

视频课我会在B站免费提供给大家，欢迎关注，欢迎三连。
https://space.bilibili.com/419474640/video

2，配套笔记

配套笔记会在csdn上免费给到大家，欢迎关注，笔记会持续更新。
https://blog.csdn.net/qiushi_1990

3，支持石头哥😊

3-1，源码和配套资源获取

目前源码和配套的一些资源暂时不免费，如果有需要的同学可以私聊石头哥，拿米来换。

3-2，笔记电子书

笔记我也有整理一套电子书，大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。

4，问题解答(●’◡’●)

另外石头哥提供配套解答服务。当然了，知识付费时代石头哥解答是要米的，毕竟石头哥精力有限，石头哥也是要吃面包的。石头哥有推出包月，包年解答服务。你在学习过程中有任何问题，或者工作中遇到任何编程问题，都可以来找石头哥
石头哥目前可以解答如下问题

小程序方面的问题
云开发方面的问题
Java，springboot，Javaweb方面的问题
毕设方面的问题
安卓app开发方面的问题
html+css+JavaScript方面的问题
前端开发的问题
后端开发的问题
面试找工作方面的问题

从今天开始就来带领大家学习微信小程序了，只要你跟着我一步步来，相信你也可以上线一款属于自己的微信小程序。

一，认识小程序

微信⼩程序，简称⼩程序，英⽂名 Mini Program Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1-1，微信小程序的优势

1.微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2.推⼴app或公众号的成本太⾼。
3.开发适配成本低。
4.容易⼩规模试错，然后快速迭代。
5.跨平台。

通过小程序和app的使用步骤，更容易看出来

可以看出小程序和app使用相比：免安装，免注册，免卸载。正如张小龙所说“随用随走”

1-2，小程序发展前景

通过腾讯2020年财报可以看出，2019年上线小程序已经超过100万个，小程序日活也已经突破4亿

2019年小程序带动就业536万个，所以我们不管是学习小程序开发，还是学习小程序运营，都有很广的就业前景。

1-3，小程序发展历史

2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」。
2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供微信小程序在云端服务器的技术方案。
2017年1月9日0点，万众瞩目的微信第一批微信小程序正式低调上线，用户可以体验到各种各样微信小程序提供的服务。
2017年12月28日，微信更新的 6.6.1 版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」，你可以通过「微信小程序」找到已经玩过的小游戏。
2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者企业可以在微信公众平台以及微信客户端入口进行投诉。
2018年1月25日，微信团队在“微信公众平台”发布公告称，“从移动应用分享至微信的小程序页面，用户访问时支持打开来源应用。同时，为提升用户使用体验，开发者可以设置小程序菜单的颜色风格，并根据业务需求，对小程序菜单外的标题栏区域进行自定义。
2018年3月，微信正式宣布微信小程序广告组件启动内测，内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基础能力，开发者可以通过微信小程序来赚取广告收入。除了公众号文中、朋友圈广告以及公众号底部的广告位都支持微信小程序落地页投放广告，微信小程序广告位也可以直达小程序。
2018年7月13日，微信小程序任务栏功能升级，新增“我的微信小程序”板块；而微信小程序原有的“星标”功能升级，可以将喜欢的小程序直接添加到“我的微信小程序”。
2018年8月10日，微信宣布，微信小程序后台数据分析及插件功能升级，开发者可查看已添加「我的微信小程序」的用户数。此外，2018年8月1日至12月31日期间，微信小程序（含小游戏）流量主的广告收入分成比例优化上调，单日广告流水10-100万区间的部分，开发者可获得的分成由原来流水的30%上调到50%，优质微信小程序流量主可获得更高收益。
2018年9月28日，微信“功能直达”正式开放，商家与用户的距离可以更“近”一步：用户微信搜一搜功能词，搜索页面将呈现相关服务的微信小程序，点击搜索结果，可直达微信小程序相关服务页面。
2019年8月9日，微信向开发者发布新能力公测与更新公告，微信 PC 版新版本中，支持打开聊天中分享的微信小程序。安装最新PC端测试版微信后，点击聊天中的微信小程序，便会弹出微信小程序浮窗。而在微信小程序右上角的操作选项中，可以进行“最小化”操作，让微信小程序像其他PC软件一样最小化，排列于Windows系统的任务栏中。

1-4，为什么学习小程序

我们上面了解完小程序的优势和历史以后，就知道我们为什么要学习小程序了

依赖微信生态
就业面广
上手快
学习完微信小程序以后，再去学习百度小程序，抖音小程序，支付宝小程序就很方便了。因为这些小程序api都很相似。
相对于Java，php，python而言，小程序更适合作为编程的入门语言
相对于传统前端开发，我们在学习小程序的同时就可以学习css，JavaScript的知识

1-5，微信小程序对创业者的优势

App开发的推广成本过高
移动互联网格局已定，用户需求被各路巨头把持，我们要想在移动互联网有一番作为，微信是不可避免的靠山
小程序能以最小的成本，最快的速度验证你的商业模式。

二，开发者工具

工欲善其事必先利其器，所以我们在开发小程序之前必须准备好一款适合自己的开发者工具，这里我给大家推荐官方开发者工具。原因有以下几点

官方的所有更新，都会第一时间在官方开发者工具同步
有任何问题，可以直接反馈给官方
官方开发者工具更新迭代最及时
我们用官方开发者工具，使用一些官方功能最稳定。
下面就来教大家如何下载官方开发工具

2-1 官方开发者工具下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
建议大家下载最新的稳定版本

然后点击自己电脑对应系统的版本下载即可。至于安装很方便，只需要双击安装包，不停的点下一步即可，安装完成以后的官方开发者工具长这样。

2-2，认识微信开发者工具

我们安装好开发者工具以后，只需要双击打开即可。

通常我们第一次打开，会出现上图所示的，只需要用微信扫描即可登录开发者工具。扫码登录以后会出现下面这样的界面。

三，创建属于自己的第一个小程序

上面第二步已经安装好开发者工具了，接下来就来教大家如何创建一个最简单的小程序

3-1，在桌面上创建一个空白文件

名字可以随便取，我这里习惯取小石头

3-2，点击 + 号，创建小程序。

3-3，小程序项目配置

配置好以后，点新建，即可创建属于自己的第一个小程序，然后创建会有一个过程，耐心等待即可。

3-4，熟悉开发者工具

3-5，开发者工具个性化的配置

主要给大家讲一些个性化的配置

我们可以配置主题颜色，模拟器位置，这些完全可以根据个人喜好进行设置。

3-6，小程序结构目录

下图是程序目录，每一个我都给大家标注出来了，大家前期不用死记硬背，后面开发学习过程中，用的多了，自然就记住目录下每个文件的作用了。

四，小程序开发三剑客

4-1小程序三剑客: wxml+wxss+js

1， wxml主要用来布局组件的（相当于大楼结构）
如：楼有几层，每层有多少房间，有什么设备
2， wxss主要决定显示样式（决定大楼的样式）
如：颜色，大小，宽高等
3， js主要用来处理逻辑（决定大楼具备哪些功能）
如：大楼具有电梯功能，空调制冷，灯光，供水，供电，主要是为了大厦的运行。

下面画个图，来说明三者的关系。

4-2，小程序文件和传统web对比

结构	小程序	传统web
结构布局	Wxml	Html
样式	Wxss	Css
逻辑	JavaScript	JavaScript
配置	Json	无

五，小程序常见组件的学习

5-1，认识view组件

view组件：相当于一个盒子，可以用来装一些别的组件
https://developers.weixin.qq.com/miniprogram/dev/component/view.html
如果大家有html的web基础，就可以把我们小程序里的view理解为html里的div标签。如果你没学过也无所谓，直接跟着我学习view即可。

5-2，认识text组件

text组件：主要用来显示文字的
https://developers.weixin.qq.com/miniprogram/dev/component/text.html

5-3，认识input组件

input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册时会用到。
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

5-4，认识button组件

button 组件：是按钮组件，自带默认的按钮效果，我们后面会经常用到
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

六，函数和事件的学习

6-1，注释的学习

我们在学习后面课程之前，先来学习下注释。注释是在代码里给予提示使用的，主要是让别人更快的熟悉你的代码，也方便后期自己看自己的代码，快速回忆起来使用的。
— 注释有快捷键的 —

window电脑：Ctrl+/
mac电脑：command+/

wxml里的注释如下

wxss里的注释

js里的注释

6-2，日志打印的学习

我们在学习点击事件之前，需要先学习日志(log)的打印，因为我们开发过程中会经常用到日志打印。日志打印的语法如下

console.log("我的打印出来的日志内容")

     
     
     
     1

6-3，函数的学习

函数的两种使用方式如下图：

6-4，点击事件的学习

我们如果想给一个组件定义点击事件，就要用到bindtap，我们给一个组件绑定点击事件的语法如下。

我们给一个组件定义点击事件，主要是给组件定义一个 bindtap=“事件名”，然后再js页面里定义和事件名一样的函数即可。视频里会作详细讲解

6-5，获取用户输入信息

我们获取用户输入会用到bindinput事件，其实我们在学习input组件时，官方有给出这个属性的。https://developers.weixin.qq.com/miniprogram/dev/component/input.html

看官方的文档，可以知道bindinput主要是为了获取用户的输入内容。
bindinput的定义如下图。

在wxml里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。

七，变量的学习

7-1，什么是变量

用大白话讲：变量就是一个装东西的盒子
再通俗些讲：变量就是用于存放数据的容器，我们通过变量名获取对应的数据。

如上图所示，我们的盒子(变量)可以装名字，布尔类型的true，还可以用来装数字。
变量的本质：就是在程序的内存中申请一块用来存放数据的空间。

7-2，变量的组成

变量由变量名和存储的值组成，语法如下

var x = 7;
var y = 8;
var z = x + y;

从上例中，您可知道x,y,z是三个不同的变量名：
x 存储值 7
y 存储值 8
z 存储值 15

变量有点类似我们的酒店房间。一个房间就可以看作是一个变量。例如我们的808号房间是情侣间。那么808这个房号就相当于我们的变量名，情侣间就是这个变量存储的值。

7-3，变量的使用

变量在使用时分两个步骤：

1，声明变量

来看下具体代码

//声明变量
var age 

 
 
 
 1
2

这段代码的意思是声明一个叫age的变量
var是一个JavaScript关键字，用来声明变量，使用该关键字声明变量以后，计算机会自动为变量分配一个内存空间，用来存储数据。
age就是我们的变量名，我们要通过变量名来访问到计算机内存里分配的空间。

2，赋值

还是拿我们的酒店房间来举例，声明变量就相当于在前台办理入住，确定要住那个房间，也就是确定房间号(变量名)，然后确定房间号对应的房型，比如单人间，双人间，情侣间。而确定房型就相当于是给变量赋值。

//给age赋值
age=10

 
 
 
 1
2

这段代码的意思，就是给age变量赋值为10
上面的 = 用来把右边的值赋给左边的变量名，也就是把我们的变量名age指向数值10，就可以用age来操作我们的数值了。赋值的目的就是为了后面使用数值。

7-4，变量的初始化

我们上面变量的使用可以直接写到一行

var age=10 

 
 
 
 1

声明变量同时给变量赋值，我们称之为变量的初始化。

7-5，变量的重新赋值

一个变量可以被重新赋值，新的赋值会覆盖掉前面的赋值，变量值将以最后一次赋的值为准。

var age=10
age=18

 
 
 
 1
2

如上面的代码，我们的变量age先被赋值10，后又被赋值18，那么最后我们的age就是18
这就好比，酒店的房间，808屋一开始住的是石头哥，后面石头哥走了，刘德华住进去了，那这个时候你再去808找人，找到的就是刘德华了。

7-6.变量的命名规范

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称对大小写敏感（y 和 Y 是不同的变量）
不能是关键字，保留字（比如 JavaScript 的关键词）
遵守驼峰命名法，首字母小写，后面的单词的首字母大写。如userName

7-7,变量的小案例

还记得我们的6-5这节学习了如何获取用户输入的信息吗？我们是不是可以用变量来存储我们获取到的用户输入信息呢。

讲解视频里会做详细讲解：《零基础入门小程序开发》

7-8，全局变量和局部变量

局部变量：变量在函数内声明，只能在函数内部访问。
全局变量：变量在函数外定义，整个代码都可以调用的变量。

如上图所示的局部变量和全局变量的定义。

八，数据类型

8-1，认识数据类型

上一节变量的学习，我们知道变量是用来装数据的盒子，可是数据有很多，有各种各样的类型。不同类型的数据占用的计算器内存也不一样。就好比胖子睡大床，瘦子睡小床就行。
在计算机中不同的数据占用的存储空间是不同的，为了便于区分，充分利用存储空间，于是就定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号，比如“张三”是个人名，18是个数字

8-2，常见的数据类型

我们的数据类型可以分成下面两大类

简单数据类型(Number String Boolean Undefined Null)
复杂数据类型(Object)

简单数据类型

简单数据类型	描述	默认值
Number	数字型，包含整数和小数，如 18，18.8	0
String	字符串型，如“小石头”。注意js里字符串都要带引号	“”
Boolean	布尔值类型，就true和false两个值，代表正确和错误	false
Undefined	Undefined 这个值表示变量不含有值,如var a;声明了变量a，但是没有赋值，就是undefined	undefined
Null	空值，如var a=null,声明了变量a为空值	null

8-3，数字型Number

js数字类型的数据，既可以是整数，也可以是小数(浮点数)

var age=21	//整数
var PI=3.1415	//小数

 
 
 
 1
2

8-4，字符串String

用引号或者双引号包起来的都是字符串类型，如 “编程小石头”，‘石头哥’都是字符串。字符串和羊肉串有点像，羊肉串是用竹签把羊肉一串串的串起来。字符串就是把字符串起来。

var name="编程小石头"	//字符串
var age1="18"		//字符串
var age2=18		//数字型

 
 
 
 1
2
3

上面代码的age1和age2是有区别的，age1的18被双引号包裹着，所以是字符串，age2就是一个数字18，所以是数字型。这也进一步说明了，只要是被单引号或者双引号包裹着的都是字符串类型。

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。
还是拿羊肉串来类比，比如你一个羊肉串上串了5块羊肉，那么这个羊肉串的长度就是5。
使用的语法如下

    var name="编程小石头"
    console.log(name.length)	//这里的输出结果是5

 
 
 
 1
2

字符串的拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+字符串=拼接之后的新字符串。
语法如下：

    var name="编程小石头"
    var weixin=2501902696
    var test=name+weixin
    console.log(test) //输出结果："编程小石头2501902696"
    console.log(12+12)//输出结果：24
    console.log("12"+12)//输出结果：1212

 
 
 
 1
2
3
4
5
6

上面的12+12=24，“12”+12=“1212” 这就告诉我们字符串加任何类型的数据，拼接后的结果都是字符串。

8-5，布尔型Boolean

布尔类型有两个值：true和false，其中true表示真，false表示假。

var flag=true

 
 
 
 1

8-6,Undefined和Null

一个声明后没有赋值的变量会有一个默认值 undefined
一个声明变量，并且赋值null，就代表这个变量是空值(学习object对象时，我们会继续研究null)
null 和 undefined 的值相等，但类型不同，下面的8-7会有代码演示

8-7，typeof 操作符

typeof 操作符用来检测变量的数据类型

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean

 
 
 
 1
2
3

打印null和undefined的数据类型如下

    var aaa=undefined
    var bbb=null
    console.log(aaa==bbb)//输出结果：true
    console.log(typeof aaa)//输出结果：undefined
    console.log(typeof bbb)//输出结果：object

 
 
 
 1
2
3
4
5

注意：这里的 == 用来判断值是否相等，后面会讲。
上面的代码可以看出：null 和 undefined 的值相等，但类型不同

8-8，数据类型的转换

就是把一种数据类型的变量转换成另外一种数据类型，比如把字符串的 “18”转换为数字类型的18
常用的数据类型转换

把其他类型转为字符串型
把其他类型转为数字型

转换为字符串

方式	说明	案例
toString()	转为字符串	var num=1 num.toString()
String()	转为字符串	var num=1 String(num)
用加号拼接字符串	转为字符串	var num=1 “”+num

转换为数字型（重点）

方式	说明	案例
Number()	将字符串转换为数字	Number(“3.14”) // 返回 3.14
parseFloat()	解析一个字符串并返回一个浮点数	parseFloat(“3.12”) //返回3.12
parseInt()	解析一个字符串并返回一个整数	parseInt(“3.12”) //返回3

转为数字的几个特殊情况

console.log(Number(""))//空字符串转换为 0
console.log(Number(true))//true转换为1
console.log(Number(false))//false转换为0
console.log(Number("编程小石头"))//其他的字符串会转换为 NaN (不是个数字)

 
 
 
 1
2
3
4

九,综合小案例~开发简单的计算器

9-1,数据绑定

在学习这个综合案例之前，我们需要先学习下小程序的动态数据绑定。数据绑定的语法如下

<!--wxml-->
<view> {
  
  {message}} </view>

// js里如下
Page({
data: {
message: ‘我是动态绑定的数据’
}
})

9-2，效果图预览

上一节和大家讲解了小程序的一些常用组件，这节就带大家写出自己的第一个简单计算器。做一个综合性的练习。由于是入门，这里先教大家简单的加法运算。效果图如下
实现起来特别简单，代码也特别少，就下面三个

index.wxml：上图的布局视图页
index.js：实现加法逻辑的页面
app.json：一些全局的配置。基本是都是默认的这里不用管
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1U75mfw-1597396869759)(https://upload-images.jianshu.io/upload_images/6273713-2b8639cf9f1fc8ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
下面就带带大家敲出属于自己的计算器小程序代码。

9-3，先看index.wxml

<!--index.wxml  -->
<input placeholder="请输入数字a" bindinput="inputa" />
<text>+</text>
<input placeholder="请输入数字b" bindinput="inputb" />
<button bindtap='sum'>计算</button>
<text>结果为：{
  
  {result}}</text>

 
 
 
 1
2
3
4
5
6

代码虽然少，但是作为刚入门的你，看起来可能很茫然，下面详细给大家讲下。

<input placeholder="请输入数字a" bindinput="inputa" /> 
<input placeholder="请输入数字b" bindinput="inputb" />

 
 
 
 1
2

就是我们输入数字a的输入框，这里input就是我们认识的第一个小程序组件。
input的官方简介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
placeholder：设置默认显示文字（当我们输入文字时，默认的就没有了）
bindinput=“inputa”：定义一个inputa方法来获取input的输入内容。在index.js中会用到

+
这里的组件是用来显示文本的这里我们只是为了显示一个 + 号

<button bindtap='sum'>计算</button>

 
 
 
 1

这里是个按钮就是我们的计算按钮
bindtap=‘sum’：定义个叫sum的方法，用来计算结果在index.js中会用到

结果为：{ {result}}
{ {result}} 这种写法，是小程序用来绑定数据用的，这里用来显示我们的计算结果用的，

上面代码和对应的显示如下：

9-4，再来看index.js，我们加法的逻辑实现

可以看到我们在index.wxml里定义的bindinput=“inputa”，bindtap='sum’在下面有用到

Page({
  /**
     * 页面的初始数据
     * 初始化两个输入值
     */
  data: {
    input1: 0,
    input2: 0
  },
  //获取用户输入的值a
  inputa: function (e) {
    this.setData({
      input1: e.detail.value
    })
  },
  //获取用户输入的值b
  inputb: function (e) {
    this.setData({
      input2: e.detail.value
    })
  },
  // 拿到两个输入值以后求和
  sum: function (e) {
    var a = parseInt(this.data.input1);
    var b = parseInt(this.data.input2);
    // 求和
    var sumResult = a + b
    this.setData({
      // 把结果赋值到sum标签上
      result: sumResult
    })
  }
})

 
 
 
 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

index.js的代码不多，大家可以先照着敲一下。学小程序前期不需要你理解，但是一定要多敲多练。
这里的逻辑用文字写出来，估计大家新入门时还是不太好理解，我会录视频来给大家讲解。

9-5，作业，自己写一个减法计算器

十，运算符

运算符也被称为操作符，是用于实现赋值，比较和运算等功能的符号。

10-1，算数运算符

运算符	描述	例子	x 运算结果
+	加法	x=5+2	7
-	减法	x=5-2	3
*	乘法	x=5*2	10
/	除法	x=5/2	2.5
%	取模（余数）	x=5%2	1

10-2，表达式和返回值

表达式：是由数字，运算符，变量等以能求得结果的有意义的操作组成的式子。
表达式最终都会有一个结果返回给我们，这个返回结果我们称之为返回值

如 let x=1+1
这里的1+1就是由数字和加号组成的表达式，然会返回结果2赋值给x，那么x的值就是2。通俗的讲就是先把右边的表达式计算完毕然后把值返回给左边的x。

10-3，比较运算符

比较运算符是两个数据进行比较时所使用的运算符，比较运算以后会返回一个布尔值的结果，就是返回对或者错(true或false)

运算符	描述	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号(大于或等于)	1>=2	false
<=	小于等于号(小于或等于)	1<=2	true
==	判等号(判断是否相等)	1==1	true
===	绝对等于（值和类型均相等）	1===‘1’	false
!=	不等于	1!=1	false

10-4，赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

=的小结

=：赋值，把右边赋值给左边如a=b
==:判断，判断两边的值是否相等如 a ==b
=== :全等，判断两边的值和数据类型是否完全相等如 a === b

10-5，逻辑运算符

用于多个条件的判断,其返回值是布尔值。

&& 逻辑与，两个条件都要满足,两侧都是true结果才为true
|| 逻辑或,两个条件只需要满足一个即可，有一侧是真结果就真
! 逻辑非 not，逻辑取反，如true的相反值是false

比如你要充话费

&& 你想用微信充：必须你有微信并且使用微信支付才可以充
|| 你去营业厅充：微信或者支付宝支付都可以
! 如果只有支付宝和微信两种方式：你不想用微信那就只能用支付宝了

10-6，递增和递减运算符

递增和递减运算符概述：如果需要反复的给数字变量加或减去1，可以使用递增(++) 和递减(–)运算符来完成。
在js里递增(++) 和递减(–)既可以放在变量前面，也可以放在变量后面，放在前面时称为前置递增或递减运算符，放在后面时称为后置递增或递减运算符。
注意：递增或者递减只能操作变量，不能直接操作数字。

10-6-1，前置递增递减运算符

注意：前置递增或递减时，是先自加或自减，然后返回值
我们之前想要一个变量加1写法如下

var num=1
num=num+1 //这里就是给num加1

 
 
 
 1
2

我们有没有方便的写法呢，上面的num=num+1，可以直接写成 ++num，这样是不是更简洁。

10-6-2，后置递增递减运算符

注意：后置递增或递减时，先返回值，然后自加或自减

10-6-3，前置和后置的区别

前置和后置如果单独使用，效果是一样的
前置是先自加或自减，然后返回值；后置先返回值，然后自加或自减

var num=10
console.log(++num  +10)//结果是21
console.log(num++  +10)//结果是20

 
 
 
 1
2
3

我们通过下面几个小例子来强化理解下

var a=10
++a
console.log(b)//这里b的结果是几

var c=10
c++
var d=c++ +2
console.log(d)//这里d的结果是几

var e=10
var f=e++ + ++e
console.log(f)//这里f的结果是几

10-6-4,前置和后置递增递减的小结

前置和后置的主要目的是为了简化代码编写
单独使用递增或递减时，前置和后置效果一样
与其他运算连用时，执行结果会不同
后置：先返回原值，后自加（先人后己）
前置：先自加，后返回值(先己后人)
可以总结为：前置自私，后置无私
开发时，大多使用后置递增/减。例如 num++或num- -

十一，条件语句和循环语句

11-1，流程控制

在学习条件语句河循环语句之前，我们要先知道什么是流程控制，
**流程控制：**流程控制就是来控制我们的代码按照什么顺序来执行的语句。
流程控制主要有三种结构

顺序结构
分支结构
循环结构

顺序结构是程序中最简单，最基础的流程控制，就是代码按照先后顺序依次执行。我们重点是讲解分支结构和循环结构。

11-2，分支结构

我们上面讲的分支结构，就是代码在从上到下的执行过程中，根据不同的条件，执行不同的代码，从而得到不同的结果。分支结构常用的语句就是条件语句.
我们常用的分支结构的语句:

if语句
switch语句

条件语句: 用于基于不同条件执行不同的动作,通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在这里插入图片描述
举个最简单的例子：你满18岁就可以去网吧，不满18岁就不允许进网吧。这里的判断条件就是你的年纪。
我们这里常用的就是if条件语句，所以接下来我们会重点讲解下if条件语句。

11-3，if条件语句

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

11-3-1，if 语句

使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

语法

if (条件) {
    如果条件为 true 时执行的代码
} 

 
 
 
 1
2
3

实例

if (age< 18) {
   console.log("未成年")
}

 
 
 
 1
2
3

如果年龄小于18岁，就输出未成年

11-3-2，if else 双分支语句

使用 else 语句来规定假如条件为 false 时的代码块。

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

 
 
 
 1
2
3
4
5

实例

if (age < 18) {
     console.log("未成年")
 } else {
    console.log("成年")
 } 

 
 
 
 1
2
3
4
5

如果年龄小于18岁，就输出未成年，否则就输出成年

11-3-3，if else if 多分支语句

使用 else if 来规定当首个条件为 false 时的新条件。

语法
if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

 
 
 
 1
2
3
4
5
6
7
8

实例

if (age < 18) {
     console.log("未成年")
 } else if(age<60) {
    console.log("成年")
 } else {
    console.log("老年")
 } 

 
 
 
 1
2
3
4
5
6
7

如果年龄小于18岁，就输出未成年，年龄大于18岁小于60岁就输出成年，年龄大于60岁就输出老年。

11-4 wxml条件渲染

在wxml中，使用 wx:if="" 来判断是否需要渲染该代码块：

<view wx:if="{
  
  {condition}}"> 我是可以显示的</view>

 
 
 
 1

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{
  
  {length > 5}}"> 1 </view>
<view wx:elif="{
  
  {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

 
 
 
 1
2
3

可以看出wxml里的条件渲染和我们上面讲的if条件语句类似，只是写法上稍微有些区别。
wxml里的条件渲染主要用来做页面展示和隐藏使用的。

11-5，for循环语句

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
比如我们想输出5编编程小石头

一般写法：
console.log(“编程小石头”)
console.log(“编程小石头”)
console.log(“编程小石头”)
console.log(“编程小石头”)
console.log(“编程小石头”)
使用for循环

for (var i=0;i<5;i++){ 
  console.log("编程小石头")
}

 
 
 
 1
2
3

for 循环的语法：

for (初始化变量; 条件表达式; 操作表达式){
    被执行的代码块
}

 
 
 
 1
2
3

初始化变量：开始前第一个执行，通常用于初始化计数器变量，只执行一次。
条件表达式：就是用来决定每一次循环是否可以继续执行，定义运行循环的终止条件
操作表达式：在大括号里的代码块已被执行之后执行，通常用于对我们的计数器变量进行递增或者递减操作。

实例

for (var i=0;i<5;i++){ 
  console.log("编程小石头")
}

 
 
 
 1
2
3

上面实例中
语句1：var i=0 是在开始执行前初始化变量i
语句2:i<5 是用来判断i是否小于5，如果小于5就继续执行循环
语句3：i++ 是在每次循环执行一遍后对i进行加1的操作

11-6，wxml列表渲染

在wxml里我们使用wx:for来显示列表数据。
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{
  
  {array}}">
  {
  
  {index}}: {
  
  {item.name}}
</view>

 
 
 
 1
2
3

在js里定义的列表数据如下

Page({
  data: {
    array: [{
      name: '编程小石头',
    }, {
      name: '邱石'
    }]
  }
})

 
 
 
 1
2
3
4
5
6
7
8
9

11-7,continue和break的学习

continue和break都是用来终止循环的，区别在于

continue：是终止循环中的某一次，继续执行后面的循环
beak: 直接终止整个循环执行，整个循环不在执行

十二，数组的学习

12-1，数组的概念

数组就是一组数据的集合，可以把更多的数据存储在单个变量下。
数组里面可以存储各种类型的数据。
如： var names=[‘编程小石头’,16,true]

12-2，创建数组的两种方式

1，使用new创建数组(不常用)

var names=new Array(); 
names[0]="编程小石头";       
names[1]="刘德华";
names[2]="周杰伦";

 
 
 
 1
2
3
4

2，利用数组字面量创建数组(常用)

var names=['编程小石头','刘德华','周杰伦']

 
 
 
 1

明显看到第二种创建数组的方式比第一种更简洁，所以以后我们创建数组就用第二种方式

12-3，获取数组元素

我们获取数组元素是通过数组下标来获取的，下标也叫做索引，数组的下标是从0开始的。如下图
数组可以通过下标来访问，设置，修改对应的元素值。我们可以通过
数组名[下标] 的方式来获取数据中的元素。
如 names[0]就可以获取names数组里的第一个元素‘编程小石头’

12-4，计算数组的和以及平均值

前面我们已经学完如何遍历数组了，如果我这里让大家去求下数组里所有元素的和以及平均值，大家知道如何去求吗。

作业
已知数组 [1,2,3,4,5,6] 如果通过代码计算这个数组的和以及平均值。

12-5，求数组中的最大值

var nums=[1,2,3,4] 这个数组我们很明显就可以看出来4是数组里的最大值，但是如果我们数组里的元素有很多，这个时候你就未必能很快的找出来最大值了，所以我们要想求数组里的最大值，要让代码去实现，而不是你肉眼去看。

思路
其实我们找数组中的最大值，有点类似于武术比赛打擂台

我们首先拿第一个和第二个比，胜出者在待定席位，然后第三个来挑战胜出者，这样又会产生新的胜出者，然后后面的元素都来逐个挑战胜出者，直到最后一个胜出者，就是我们要找的最大值。而这样一v一的对决，正好可以借助我们的循环来实现。

    var nums = [1, 2, 3, 4, 5]
    var max = nums[0]
    for (var i = 1; i < nums.length; i++) {
      if (max < nums[i]) {
        max = nums[i]
      }
    }
    console.log('最大值', max)  //可以得出最大值是5

 
 
 
 1
2
3
4
5
6
7
8

12-5，给数组添加新元素

push() 方法可向数组的末尾添加一个或多个元素，所以我们一般给数组追加元素的时候，直接使用push方法就可以了。

    var nums = [1, 2, 3, 4, 5]
    nums.push(6)
    nums.push(7, 8)
    console.log(nums) //追加新元素后的数组  [1, 2, 3, 4, 5, 6, 7, 8]

 
 
 
 1
2
3
4

12-6,删除数组中的指定元素

如我们想把数组中的指定元素删除掉，可以用一个新的数组来接受符合要求的元素，不符合要求的元素不接收，这样就可以实现删除数组元素的效果

	// 把元素5删除
    var nums = [1, 2, 3, 4, 5]
    //1,定义一个新数组
    var newNums = []
    //2，遍历旧数组
    for (var i = 0; i < nums.length; i++) {
      //3,把符合要求的元素添加到新的数组里
      if (nums[i] !== 5) {
        newNums.push(nums[i])
      }
    }
    console.log(newNums) //删除成功 [1, 2, 3, 4]

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12

十三，对象的学习

13-1，什么是对象

对象只是一种特殊的数据。对象是一组无序的相关属性和方法组成。这里重点要记住属性和方法这两个新概念

属性：事物的特征，对象里的属性就是用来表现该对象具备哪些特征
方法：事物的行为，对象里方法就是用来表示该对象具备哪些行为。

例如：
石头哥具备姓名，年龄，身高，体重等属性
石头哥具备写代码，唱歌，骑车，跑步，吃饭等行为。

手机具备下面的属性和方法

13-2，为什么需要对象

我们在保存一个数据时，可以用变量，保存多个数据时可以用数组。但是我如果想保存一个完整的立体的信息时呢。

比如保存石头哥的完整信息。
如果我们用数组来表示就是
var shitouge=[‘编程小石头’,‘男’,‘128’,‘180’]
这样我虽然把石头哥的完整信息保存到了数组里，也可以大致猜出来哪些数据代表什么意思，但是后面的128和180是什么意思呢？？？

但是我们如果用对象来保存这些信息呢

{
姓名:'编程小石头',
性别:'男'
体重:128
身高:180
}

 
 
 
 1
2
3
4
5
6

这样我们是不是就可以立体的知道每个数据代表什么意思了呢。这也是我们使用对象的原因。上面的{}里包裹的就是我们对象的一些属性。只不过我们的属性名不提倡用汉字，应该用英文或者拼音，我这里方便大家理解才这样写的。

13-3，创建对象的三种方式

利用字面量创建对象
利用new Object创建对象
利用构造函数创建对象

13-3-1，利用字面量创建对象

语法如下
var 对象名={
属性名：属性值，
属性名：属性值，
方法名：function(){}
}

示例如下：

var Person = {
 name:'编程小石头',
 age:18,
 code:function(){console.log('石头哥会写代码')}
}

 
 
 
 1
2
3
4
5

13-3-2，利用new Object创建对象

语法：
var obj = new Object();
obj.name=‘编程小石头’
obj.age=18
我们这里就是先用 new Object()创建一个空对象，然后通过.属性名给这个空对象添加属性和方法

13-3-3，利用构造函数创建对象

构造函数是一种特殊的函数，主要用来初始化对象，它总是和new运算符一起使用，我们可以把对象里的一些公共属性和方法抽取出来，然后封装到这个函数里，方便批量创建对象。

使用构造函数创建对象时要注意下面几点

1，构造函数名字的首字母习惯大写
2，构造函数里不需要return就可以返回结果
3，调用构造函数创建对象时，必须用new
4，我们的属性和方法前面必须添加this

完整实例如下：

	function Person(name, age) {//创建构造函数Person
      this.name = name;
      this.age = age;
      this.action = function (jineng) {
        console.log(name + "具备" + jineng + '的技能')
      }
    }
    //创建对象1
    var obj1 = new Person('编程小石头', 18)
    console.log(obj1.name)//编程小石头
    obj1.action('写代码')//编程小石头具备写代码的技能
     //创建对象2
    var obj2 = new Person('周杰伦', 41)
    console.log(obj2.name)//周杰伦
    obj2.action('唱歌')//周杰伦具备唱歌的技能

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

构造函数和对象

我们这里的构造函数就好比汽车的设计图纸，汽车具备哪些属性，拥有哪些方法，已经提前在图纸上设计好了，我们只需要根据图纸new出来一个对象，比如可以new出来一个宝马车，也可以new出来一辆兰博基尼。

13-3-4，new关键字执行过程

如上面我们通过构造函数new一个对象

	function Person(name, age) {//创建构造函数Person
      this.name = name;
      this.age = age;
      this.action = function (jineng) {
        console.log(name + "具备" + jineng + '的技能')
      }
    }
    //创建对象1
    var obj1 = new Person('编程小石头', 18)

 
 
 
 1
2
3
4
5
6
7
8
9

这里在new一个对象出来时会执行下面四件事

1，在电脑内存中创建一个空对象
2，让this指向这个新的对象
3，执行构造函数里的代码，给这个新对象添加属性和方法
4，返回这个新对象如上面的obj1就是我们创建的新对象

13-3-5，变量，属性，函数，方法总结

属性和变量:

相同点：
都是用来存储数据的。
不同点：
变量单独声明并赋值，使用的时候直接使用变量名就可以；
属性在对象里面的，不需要声明，使用的时候要用：对象.属性名。

var dog = {
    //属性
    name:'可可'，
    age：'12'
} 
//变量
var num = 12;

//调用变量：(直接使用变量名进行调用)
console.log(num);
//调用属性：(对象名.属性名)
console.log(dog.name);

函数和方法：

相同点：
都是实现某种功能。
不同点：
函数是单独声明并且调用的，调用方法：函数名()
方法存在于对象里面。调用方法：对象名.方法()

var dog = {
    name:'可可'，
    age：'12'，
    //方法
    skill：function(){
        console.log('汪汪汪');
    }
}

//函数
function skillDemo(){
console.log(“睡觉”);
}

//调用函数：(直接使用:函数名(),进行调用)
skillDemo();
//调用方法：(–对象名.方法名()–)
console.log(dog.skill());

13-4，对象的使用

13-4-1，访问对象的属性

对象属性的调用语法有两种

对象名.属性名
对象名[‘属性名’]

如我们对象如下

var obj = {
 name:'编程小石头',
 age:18,
 code:function(){console.log('石头哥会写代码')}
}

 
 
 
 1
2
3
4
5

调用name属性就是 obj.name
这里obj就是我们的对象，name就是我们的对象的属性，obj.name里的.就相当于的翻译过来就是obj的name
另外一种调用属性的方式就是 obj[‘name’]

13-4-2，访问对象的方法

对象中方法的调用就一种方式：对象名.方法名() 这里的这对小括号是必不可少的。
如我们对象如下

var obj = {
 name:'编程小石头',
 age:18,
 code:function(){console.log('石头哥会写代码')}
}

 
 
 
 1
2
3
4
5

obj.code() 就是直接调用obj里的code方法

十四，内置对象的学习

14-1，什么是内置对象

内置对象就是指Javascript自带的一些对象，供开发者使用，这些对象提供了一些常用的的功能。开发者可以很方便的使用这些内置对象，而不用关心这些内置对象的实现原理。
就好比我们使用手机内置的发短信，打电话功能，我们用的时候可以很方便的快速使用，而不用关心打电话的实现原理。这就是我们使用内置对象的原因，主要就是为了快速方便的使用内置对象的

常见的内置对象有Math、Array、Date等

14-2，查阅文档的学习

因为内置对象的方法太多了，我们不可能把所有的方法都记下来，所以我门就需要时不时的查阅文档，就好比我们查字典一样。
常用的学习文档有下面几个

MDN
官方地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
W3cschool
https://www.w3school.com.cn/js/index.asp
菜鸟教程
https://www.runoob.com/js/js-tutorial.html

这里建议大家使用MDN文档。因为这个文档比较全，可以快速检索

14-3，Math对象的学习

与其他内置对象不同的是，Math 不是一个构造器对象。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。也就是说我们的Math可以直接通过Math. 来调用他的属性和方法

由于Math对象的方法比较多，我这里只把开发过程中常用的一些方法做下讲解

14-3-1，Math常用的属性

Math.PI
圆周率，一个圆的周长和直径之比，约等于 3.14159

14-3-2，Math常用的方法

Math.abs(x) 返回一个数的绝对值

Math.abs('-1');     // 1
Math.abs(-2);       // 2
Math.abs(null);     // 0
Math.abs("string"); // NaN
Math.abs();         // NaN

 
 
 
 1
2
3
4
5

Math.max() 返回多个数值的最大值

    console.log(Math.max(1, 2, 3)) //3

 
 
 
 1

Math.min() 返回多个数值的最小值

  console.log(Math.min(1, 2, 3)) //1

 
 
 
 1

14-3-3，Math中取整数的三个方法

Math.ceil(x) 向上取整，往大了取

	console.log(Math.ceil(1.2))//2
    console.log(Math.ceil(1.5))//2
    console.log(Math.ceil(1.7))//2
    console.log(Math.ceil(1.9))//2

 
 
 
 1
2
3
4

Math.floor(x) 向下取整，往小了取

    console.log(Math.floor(1.2))//1
    console.log(Math.floor(1.5))//1
    console.log(Math.floor(1.7))//1
    console.log(Math.floor(1.9))//1

 
 
 
 1
2
3
4

Math.round(x) 四舍五入取整

    console.log(Math.round(1.2))//1
    console.log(Math.round(1.5))//2
    console.log(Math.round(1.7))//2
    console.log(Math.round(1.9))//2

 
 
 
 1
2
3
4

14-3-4，随机数的学习

Math.random() 得到一个大于等于0，小于1之间的随机数
使用。

使用场景：一般我们做抽奖时会用到随机数

获取两数之间的随机数（大于等于min小于max）

//这个随机数可能是整数，也可能是小数
Math.random() * (max - min) + min

 
 
 
 1
2

得到两数之间的随机整数（大于等于min，小于max）

// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  //不含最大值，含最小值
  return Math.floor(Math.random() * (max - min)) + min; 
}

 
 
 
 1
2
3
4
5
6
7

得到两数之间的随机整数，包括两个数在内（大于等于min，小于等于max）

// 这个随机数是min和max之间的随机整数
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  //含最大值，含最小值 
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

 
 
 
 1
2
3
4
5
6
7

14-4，Date日期对象的学习

我们的Date对象是一个构造函数对象，必须使用new 对象，来创建我们要使用的对象以后才可以使用。

创建一个新Date对象的唯一方法是通过new 操作符，
例如：let now = new Date()

使用场景 比如我们的秒杀倒计时，显示的日期都需要借助Date日期对象

14-4-1，创建Date对象

有 4 种方法创建新的日期对象：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(dateString)
new Date(milliseconds)

 
 
 
 1
2
3
4

new Date()创建Date对象

    var d = new Date()
    console.log(d)//Mon Dec 21 2020 20:02:54 GMT+0800 (中国标准时间)

 
 
 
 1
2

这样直接创建的返回的是当前的时间如上面的注释所示，我当前是2020年12月21日20时02分54，你打印的应该是你当前自己的时间。

new Date(year, month, …)
new Date(year, month, …) 用指定日期和时间创建新的日期对象。
7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）：

var d = new Date(2018, 11, 24, 10, 33, 30, 0);
console.log(d) //Mon Dec 24 2018 10:33:30 GMT+0800 (中国标准时间)

 
 
 
 1
2

这里有一点需要注意：JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。
4个数字指定年、月、日和小时：

var d = new Date(2018, 11, 24, 10);

 
 
 
 1

3 个数字指定年、月和日：

var d = new Date(2018, 11, 24);

 
 
 
 1

new Date(dateString)
new Date(dateString) 从日期字符串创建一个新的日期对象
我们可以通过年-月-日或者年/月/日获取Date对象

//如我们用两种方式来创建2020年12月21日
    var d1 = new Date(2020,11,21);//月份是从0开始的 11代表12月
    console.log(d1) //Mon Dec 21 2020 00:00:00 GMT+0800 (中国标准时间)
    var d2 = new Date('2020-12-21');
    console.log(d2) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)
     var d3 = new Date('2020/12/21');
    console.log(d3) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)

 
 
 
 1
2
3
4
5
6
7

new Date(milliseconds)
new Date(milliseconds) 创建一个零时加毫秒的新日期对象
JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。
零时间是 1970 年 1 月 1 日 00:00:00 UTC。
现在的时间是：1970 年 1 月 1 日之后的 1608553621233毫秒
如下

    var d1 = new Date(0);
    console.log(d1) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

 
 
 
 1
2

r如果我们想获取当前时间距离1970 年 1 月 1 日之间的毫秒值可以

    var d1 = new Date();
    console.log(d1.getTime()) //1608553621233
    var d2 = new Date();
    console.log(d2) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)

 
 
 
 1
2
3
4

可以看出当前时间距离1970 年 1 月 1 日之间的毫秒值是1608553621233
那么我们直接new Date(1608553621233)获取的日期如下

    var d1 = new Date(1608553621233);
    console.log(d1) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)

 
 
 
 1
2

所以当前的日期和通过new Date(当前日期距离1970年1月1日的毫秒值)都可以获取当前时间。两者可以相互转换。

14-4-2,日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

14-4-3，日期设置方法

设置方法用于设置日期的某个部分

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

14-4-4，倒计时（综合案例）

我们这里带大家实现一个倒计时的案例，比如我们知道一个活动结束的时间，然后去计算活动还有多久结束。我会在视频里带着大家写一个综合的案例。大家跟着视频课来学习这个综合案例即可。

14-5,Array数组对象的学习

数组对象的作用是：使用单独的变量名来存储一系列的值。
如我之前学习数组时，数组的一种创建方式

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

 
 
 
 1
2
3
4

14-5-1,判断是不是数组

判断一个对象是不是数组有两种方式

1，通过instanceof Array
2，通过Array.isArray(）方法

    var arr = new Array()
    console.log(arr instanceof Array) //true
    console.log(Array.isArray(arr))//true

 
 
 
 1
2
3

14-5-2，添加和删除数组元素

其实我们在讲解数组的那一节有教大家如何添加和删除数组，今天再来带大家系统的来学习下数组的添加和删除

push方法添加
在数组的末尾添加一个或者多个元素
unshift方法添加
在数组的开头添加一个或者多个元素
pop方法删除
删除数组尾部的元素，一次只能删除一个
shift方法删除
删除数组最前面（头部）的元素

14-5-3，配套练习（筛选数组）

给你一组数据 [20,59,40,80,99,98] 筛选出所有小于60的数组，可以理解为找到所有不及格的学生的成绩，你会怎么做呢？可以结合我们上面学过的知识，自己思考下。我会在视频里带着你写一遍。看视频之前，建议你自己先思考下。

14-5-4，reverse方法翻转数组

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

    var arr = [1, 2, 3, 4, 5]
    console.log(arr.reverse())//[5, 4, 3, 2, 1]

 
 
 
 1
2

14-5-5，sort方法对数组进行排序

用sort方法进行排序，默认是升序排列的，如下

   var arr = [1, 3, 2, 5, 4]
   console.log(arr.sort())//[1, 2, 3, 4, 5]

 
 
 
 1
2

但是直接用sort方法会有问题

    var arr = [11, 3, 22, 55, 44]
    console.log(arr.sort())//[11, 22, 3, 44, 55]

 
 
 
 1
2

为什么会出现3在11和22后面的问题呢，因为我们sort默认排序顺序是在将元素转换为字符串，然后对字符串进行比较，再排序的，所以我们要想用sort来排序，就要用到另外一个写法了

    var arr = [11, 3, 22, 55, 44]
    //按照升序排序
    arr.sort(function (a, b) {
      return a - b
    })
    //按照降序排序
    arr.sort(function (a, b) {
      return b - a
    })

 
 
 
 1
2
3
4
5
6
7
8
9

上面的写法是固定的，大家只需要记住就行了。 a-b时是升序，b-a时是降序

function (a, b) {
      return a - b 
}

 
 
 
 1
2
3

14-5-6，数组的索引方法

indexOf()方法
返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
lastIndexOf() 方法
返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1

14-5-7，课程作业，对数组进行去重

给出一个数组 [1,3,5,2,4,5,6,4],现要求把数组里重复的元素给删除掉，我会在视频里带着大家写一遍，在看视频之前，建议大家先自己仔细思考下，最好自己先实现一下。

14-5-7，把数组转换为字符串

我们把数组转换为字符串有下面两种方法

toString()
将数组通过逗号连接成一个字符串。
join(分隔符)
将数组通过分隔符连接成一个字符串。join里分隔符如果不写的话，默认用逗号来连接数组元素组成一个字符串

    var arr = [1, 3, 2, 5, 4]
    console.log(arr.toString())//1,3,2,5,4
    console.log(arr.join('-'))//1-3-2-5-4

 
 
 
 1
2
3

这里希望大家重点掌握，因为我们实际开发中，会把数组转换为字符串传给后台开发人员。

14-5-8，数组的其他常用方法

concat() 方法
用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
slice() 方法
截取数组的一部分返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变
splice() 方法
通过删除或替换现有元素或者原地添加新的元素来修改或者删除数组
splice(从第几个开始，删除几个)

    var arr = [1, 2, 3, 4, 5]
    arr.splice(0, 2)// 从索引为0的地方开始，删除2个元素。
    console.log(arr) //[3, 4, 5]

 
 
 
 1
2
3

splice(从第几个开始，替换几个，要替换的值)

    var arr = ['a', 'b', 'c', 'd', 'e']
    arr.splice(0, 2,'A','B')// 从索引为0的地方开始，替换2个元素，替换为 A和B
    console.log(arr) //["A", "B", "c", "d", "e"]

 
 
 
 1
2
3

十五，wxss和css样式美化

我们上面基本上都是在学习JavaScript基础，js在小程序里主要是用来处理逻辑的，从今天开始我们就来学习一些样式相关的知识，用来美化我们的小程序。其实我们小程序三剑客里的wxss和我们的css是一样的。所以我接下来会把一些常用的css知识点给大家讲解一下。还有小程序里特有的一些样式知识也做下重点讲解。

一些特别基础的css知识可能不会讲太多。
这里把一些css的文档给大家一个，大家抽个几小时可以快速的学习下css基础，css不要求大家学习时全部记住，只需要大致知道相应的知识点，后面学习时会回来快速的查阅就行。

菜鸟教程：https://www.runoob.com/css/css-tutorial.html
w3cshool教程：https://www.w3school.com.cn/css/index.asp

15-1，css基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

在我们小程序的代码里就体现如下

1，在wxml里定义一个class选择器
2，在wxss实现css样式

我们这里主要给title选择器实现红色背景，黄色字体。效果如下

可以看出我们css主要是实现页面美化用的，所以你如果想让你的小程序变得美丽漂亮，就要好好学习css样式了。

15-2，CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
.title{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

 
 
 
 1
2
3
4
5
6
7

15-3,Id 和 Class选择器

id 选择器以 “#” 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {
	color:red;
}
#green {
	color:green;
}

 
 
 
 1
2
3
4
5
6

class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用,类选择器以一个点"."号显示

.red {
	color:red;
}
.green {
	color:green;
}

 
 
 
 1
2
3
4
5
6

我们小程序的css中用的最多的就是id和class选择器。

15-4，CSS 背景

CSS 属性定义背景效果常用的方式:

background-color（最常用）
background-color 属性定义了元素的背景颜色.如：
.title {background-color:red;} 就是设置类选择器title的背景颜色为红色

我们上面的 background-color也可以简写为 background，如：
.title {background-color:red;} 也是设置背景为红色

15-5，css中颜色设置的三种方式

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

我这里给大家提供一个颜色表，大家可以拿到自己喜欢颜色的十六进制值。
https://tool.oschina.net/commons?type=3
如果这个连接失效了，大家自己百度下“颜色对照表”也可以找到类似的。

部分截图如下。

15-6，文本常用样式

15-6-1,文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐

text-align: center；文本居中对齐
text-align: left；文本居左对齐
text-align: right；文本居右对齐

15-6-2，文本修饰

text-decoration 属性用来设置或删除文本的装饰

text-decoration: overline; 上划线
text-decoration: line-through; 中间划线
text-decoration:underline; 下划线

15-6-3，color设置文本颜色

如下所示，设置字体颜色为红色的三种方式

/* 英文颜色 */
.title {
  color: red;
}
/* rgb设置颜色 */
.title {
  color: rgb(255, 0, 0);
}
/* 十六进制设置颜色 */
.title {
  color: #FF0000;
}

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12

这些颜色值，可以在我前面给到大家的颜色对照表里找到。

15-6-4，font-size 设置字体大小

font-size可以用来设置字体的大小

不写这个属性有默认大小
font-size: 30px;
font-size: 50px;

当然我们的文本还有好多别的样式，这里我们只讲这几个重点的，其余的大家可以自己去看下 https://www.runoob.com/css/css-text.html

15-7，css边框和边距

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

我这里画一个图，方便大家理解margin，padding，border。其实我们装手机的快递盒子有点类似。

15-7-1，padding 内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受像素值或百分比值，但不允许使用负值

padding: 10px;
如果只设置一个值，那么上下左右都是10px
padding: 10px 20px 30px 40px;
按照上、右、下、左的顺序分别设置各边的内边距。这样设置就是内边距的上间距10px，右间距20px，下边距30px，左边距40px
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left

15-7-2，border边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
如下面几种边框

每个边框有 3 个方面：样式，宽度、以及颜色

border-style可以来设置样式

我们通过设置border-style来定义上下左右四个边框样式，当让也可以定义单边样式，如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width设置边框的宽度
您可以通过 border-width 属性为边框指定宽度。
同样border-width: 5px;只有一个值的时候是设置上下左右4个边框的宽度。
您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color设置边框的颜色
您可以通过border-color 属性为边框指定颜色。
同样border-color只有一个值的时候是设置上下左右4个边框的颜色。
您也可以通过下列属性分别设置边框各边的颜色：
border-top-color
border-right-color
border-bottom-color
border-left-color
当然我们我们的边框宽度，样式，颜色有一种简写方式

.title{
  border:5px solid red;
}

 
 
 
 1
2
3

我们只需要一个border属性，就可以设置上下左右四个边框的宽度为5px，样式为solid，颜色为red。

15-7-3，margin外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin 没有背景颜色，是完全透明的
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值

Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
实例
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px

15-8，border-radius设置圆角边框

border-radius 主要是用来设置圆角用的，下面我通过几个常用的例子来给大家讲解下这个知识点

1，直接可以用像素设置圆角大小

.title {
  background: red;
  /* 可以用像素设置圆角 */
  border-radius: 10px;
}

 
 
 
 1
2
3
4
5

2,如果有宽高值，可以设置border-radius为宽高的一半实现圆形

.title {
  background: red;
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

 
 
 
 1
2
3
4
5
6

当有宽高的时候，设置 border-radius为50%同样可以实现上面的圆形功能。

.title {
  background: red;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

 
 
 
 1
2
3
4
5
6

15-9，综合案例一(画个月牙)

比如我们想实现一个红色的半月，如下图

那我们该怎么实现这个月牙呢。

1，在wxml里定义两个view组件，并且设置好class类名
2，然后再wxss里设置对应的css样式，用到我们前面学的border-radius

可以看出来，我们就是用了border-radius实现了一个红色的圆形和一个白色的圆形，白色的圆形遮住了一部分红色的大圆，这样就实现了一个红色的月牙。

15-10，综合案例二（写个搜索框）

我们在小程序里经常见到下面所示的搜索框，其实这个搜索框实现起来很简单，把我们上面学的知识点都用到了，所以我们接下来用这么一个综合案例带大家熟悉下之前的知识点。

首先我们要在wxml里定义如下布局

布局其实很简单，就是一个父view里套一个子view。
然后就是在wxss里定义样式就可以了

其实到这里就已经可以轻松实现我们上面想要的效果了。

建议大家先跟着写写看。我下面把wxss代码贴出来给大家。

.root {
  height: 65rpx;
  background: #FFB965;
  padding: 10rpx;
}

.input {
height: 100%;
text-align: center;
color: grey;
background: white;
border-radius: 15rpx;
}

15-11，px和rpx的转换

我们在设置宽度，高度，边框粗细时都会用到尺寸单位，我们这里重点给大家讲解下px和rpx。rpx是微信为小程序专门设计的一个尺寸单位。
px和rpx的换算如下：

我们一般设计规范都是依据iPhone6来设计的，也就是说平常ui设计师给出的1px我们在写代码时要写0.5rpx。

下面给出一个简单的例子

上面红色小石头的字体设置了100px，黑色小石头设置了200rpx，这个时候我们可以看出，红色和黑色小石头的大小是一样的。所以我们后面开发小程序里建议大家用rpx作为小程序的尺寸单位，这样能很好的做自适应。如果我们的设计小姐姐给的是px单位的设计图，我们就要自己用px除以2得到我们对应的rpx大小。

十六,多媒体组件的学习（图片和视频）

16-1,认识图片image组件

image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。

官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。

16-1-1，src属性显示网络图片

我们通过src属性来设置要显示的图片资源，图片资源有两种

本地图片资源
网络图片资源

由于我们本地的图片会占用小程序软件包的大小，所以这里推荐大家尽量使用网络图片。

我们设置显示图片的语法如下

<image src="图片资源地址"></image>

 
 
 
 1

如下图，我们显示一个网络图片。

这里给大家两个网络图片地址：
https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg

https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg

16-1-2，src属性显示本地图片

用image显示本地图片，我们需要提前把图片放在小程序项目里，如下图我们把本地图片放在images目录里，这个images目录需要我们自己新建。

然后在image组件里设置src属性，指向这个本地图片，就可以在小程序里展示了。
我把网络图片和本地图片都在小程序里展示，给大家对比着学习下。

16-1-3，通过mode设置图片裁剪、缩放的模式

image组件另外一个比较重要的属性就是mode了。我们在使用图片时，不能百分之百保证图片的比例正好是我们想要的，这个时候就要用到图片的裁剪和缩放了。
mode 的常用设置如下

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

比如我们有一个原图如下。

设置不同的mode值，可以很明显的看出来区别

后面我们需要对图片做裁剪或者伸缩处理时，就可以设置不同的mode值来实现不同的效果。

16-1-4，图片懒加载

小程序里image组件是支持图片懒加载的，当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。

16-2,认识视频video组件

video组件：主要用来实现视频播放。

官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

16-2-1，src属性设置视频地址

video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。

我把这几个mp4格式的视频链接贴给大家

http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

https://media.w3.org/2010/05/sintel/trailer.mp4

http://vjs.zencdn.net/v/oceans.mp4

如果上面链接失效，我们可以去官方文档拿官方的视频链接

16-2-2，设置视频弹幕属性来显示弹幕

我们上面设置src只能保证视频的正常播放，如果我们想使用弹幕功能，就要为video设置别的属性了。

我们如果想在视频上显示弹幕，就要设置danmu-list属性。可以看出danmu-list属性是一个数组，而这个数组就要放置我们弹幕的一些数据了。

下面我在代码里给大家简单的演示下弹幕的显示。
首先在wxml里设置danmu-list属性，并且给danmu-list绑定数据danmuList

而这个danmuList就要在js里设置了。

我们可以在danmuList的每个弹幕对象里设置弹幕显示的内容，弹幕的颜色，弹幕显示的时间。

通过上图可以看到，我们设置的弹幕成功的显示在了视频上。这样我们就可以轻松的实现弹幕展示功能了。

16-2-3，发送弹幕功能

我们上面只是简单的展示了弹幕，如果我们想让用户发送弹幕该怎么做呢。下面就来教大家实现弹幕的发送功能。
简单起见，我这里设置一个input来获取用户输入的内容，用一个button按钮来触发弹幕的发送。

wxml文件如下：

这里我们特意设置了一个id属性，我们下面发送弹幕时，需要先初始化一个视频对象，而初始化视频对象时就用到了这个id。

js文件如下：

可以看出，我们在onReady页面渲染完成时，初始化了一个视频对象videoContext，然后通过bindInput获取用户输入的弹幕内容。最后在点击发送弹幕按钮时，通过videoContext.sendDanmu来发送弹幕到视频的屏幕上。

到这里，我们发送弹幕的功能也实现了，当然video视频组件还有很多别的属性，这里就不再一个个介绍了。大家可以自己去看官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html

十七，授权登录退出和缓存

我们的项目开发多多少少的都会用到用户的一些信息，比如头像，昵称，性别等。而这些信息的获取，小程序也为我们提供好了方法。

17-1,认识wx.getUserProfile方法

对应的文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

使用这个方法可以获取如下的用户信息

17-2，授权弹窗

一般我的使用上面的wx.getUserProfile方法获取用户信息时，需要用户授权的。一般授权弹窗如下。

只有用户点击允许以后才可以获取用户信息。

不弹起授权弹窗解决方案

有的同学用这个方法时，不会弹起上面的弹窗，有可能是因为基础库版本太低，这里建议升级到最新版的基础库。

17-3，授权登录核心代码

等下视频课程里会带着大家一起敲代码，这里先把一些核心代码贴出来。其实核心代码官方文档里有提供的。

这里为了方便日后大家使用，我贴出来给到大家。这里要注意 desc必须保留，里面的描述尽量写的规范些。因为

    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
      }
    })

 
 
 
 1
2
3
4
5

17-4，顶部圆形头像和昵称

其实这里倒是挺简单，重点知识只有一个圆形图片的实现这里只需要一个image组件和一个text组件即可。通过css的border-radius就可以来设置圆形图像了，我小程序基础里也有讲过的，核心代码如下。

17-5，本地缓存的讲解

17-5-1，使用wx.setStorageSync缓存

这里缓存我们主要用到了wx.setStorageSync 对应的官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

17-5-2，缓存数据的查看

如下图所示，就是我们的本地缓存数据

17-5-3，使用wx.getStorageSync获取缓存

对应的官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html

17-6，退出登录的编写

退出登录其实很简单，就实现一个点击事件就可以了

然后js里具体代码就下面这几行就够了

17-7，完整的项目代码

我这里把wxml和js的完整代码贴出来给到大家
index.wxml

<button wx:if="{
  
  {!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
  <image class="touxiang" src="{
  
  {userInfo.avatarUrl}}"></image>
  <text class="nicheng">{
  
  {userInfo.nickName}}</text>
  <button bindtap="loginOut">退出登录</button>
</view>

 
 
 
 1
2
3
4
5
6

index.js

Page({
  data: {
    userInfo: ''
  },
  onLoad() {
    let user = wx.getStorageSync('user')
    console.log('进入小程序的index页面获取缓存', user)
    this.setData({
      userInfo: user
    })
  },
  // 授权登录
  login() {
    wx.getUserProfile({
      desc: '必须授权才可以继续使用',
      success: res => {
        let user = res.userInfo
        // 把用户信息缓存到本地
        wx.setStorageSync('user', user)
        console.log("用户信息", user)
        this.setData({
          userInfo: user
        })
      },
      fail: res => {
        console.log('授权失败', res)
      }
    })
  },
  // 退出登录
  loginOut() {
    this.setData({
      userInfo: ''
    })
    wx.setStorageSync('user', null)
  }
})

 
 
 
 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

index.wxss

.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.touxiang {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin-top: 30rpx;
margin-bottom: 10rpx;
}

我会在视频里带大家做具体代码的编写。
《小程序入门》

十八，swiper轮播图组件

18-1，swiper组件

我们在小程序里实现顶部轮播图来动态的显示一些热门商品，这个时候就要用到swiper组件了。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

如下图，就是我们传说中的顶部轮播图。

给大家看下官方swiper简介

可以看出我们的swiper必须结合swiper-item来使用。

18-2，swiper-item组件

我们的swiper-item就是用来装每个轮播图使用的。下面我写一个简单的例子来看下

我这里先在swiper里放三个swiper-item，给每个swiper-item设置不同的背景颜色。这个时候我们就可以实现这三个swiper-item的来回滑动切换。但是我们通常开发的时候，肯定不是仅仅显示一个颜色，我们应该在里面放置图片。要不然怎么叫轮播图呢。

18-3，swiper-item组件里显示轮播图

我们如果想在swiper-item里显示图片，就要借助我们前面学习的image组件了。如下图所示

这样我们就可以完整的实现一个轮播图组件了。我把完整的代码贴出来给到大家。

<swiper indicator-dots>
  <swiper-item>
    <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" />
  </swiper-item>
  <swiper-item>
    <image src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" />
  </swiper-item>
  <swiper-item>
    <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg" />
  </swiper-item>
</swiper>

 
 
 
 1
2
3
4
5
6
7
8
9
10
11

18-4，swiper的常用属性。

可以看出我们的swiper有很多属性，下面我会重点的把我们一些常用的属性，通过视频里的一个综合案例来给大家讲解下。

还是来看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

十九，通过tabBar设置多页面

我们正常创建的默认项目是一个单页面，我们要想实现下面效果所示的多页面就要借助tabBar来实现多页面。

18-1，创建image目录放图标

我们要使用tabBar就需要用到图标，所以我们要创建一个放图标的目录。

然后把我提前给大家准备好的图标放到image里即可。

这些图标我会在配套学习资料里给到大家。

18-2，创建多个页面

关于小程序里页面的快速创建我小程序基础里讲过很多遍了，这里就不再啰嗦，直接在app.json里创建下面三个页面即可

18-3，设置tabBar实现多页面布局

上面三个页面创建好以后，我们就可以通过tabBar来设置多页面布局了。
在app.json里添加如下配置。

这样我们就可以实现可以自由切换的多页面小程序了。

到这里我们的多页面项目就创建好了。

二十，navigator页面跳转

我们在小程序里做页面跳转有两种方式

1，借助navigator组件
2，借助wx.自带方法，在点击的时候做页面跳转
如下图所示的几个wx.方法

20-1，navigator实现页面跳转

navigator其实和我们html里的a标签有点像，也是为了实现页面跳转的。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

我们想用navigator来跳转到别的页面，其实很简单，只需要如上图所示，做简单配置即可。
当然了我们使用navigator来跳转页面时，分下面几种情况。当然这些跳转方式都是通过配置open-type属性来定义的。

20-2，navigator的跳转方式

下面我把一些常用的open-type属性列出来给大家，方便大家以后使用。

open-type值	说明	对应wx方法
navigate	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面	对应wx.navigateTo
redirect	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面	对应 wx.redirectTo
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面	对应 wx.switchTab
reLaunch	关闭所有页面，打开到应用内的某个页面	对应 wx.reLaunch
navigateBack	关闭当前页面，返回上一页面或多级页面	对应 wx.navigateBack
exit	退出小程序，target="miniProgram"时生效	无

如我们使用navigate做页面跳转，只写个url属性，open-type的值默认就是navigate

这样我们跳转到新页面后，会有一个返回按钮。我们可以通过这个返回按钮返回上一个页面。

我会在视频里为大家一个个演示其余的方法和功能。

20-3，点击事件结合wx方法实现跳转

我们做页面跳转除了使用navigate组件外，还可以通过点击事件借助wx方法实现页面跳转。

常用的wx方法：

wx方法	说明
wx.navigateTo	保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch	关闭所有页面，打开到应用内的某个页面
wx.navigateBack	关闭当前页面，返回上一页面或多级页面

我这里给大家举个简单的例子