2020年11月最全最新小程序教程，从入门到精通

文末有彩蛋

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

一，认识小程序

微信⼩程序，简称⼩程序，英⽂名 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对比

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

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("我的打印出来的日志内容")

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 

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

• 2，赋值

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

//给age赋值
age=10

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

7-4，变量的初始化

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

var age=10 

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

7-5，变量的重新赋值

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

var age=10
age=18

如上面的代码，我们的变量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)

简单数据类型

8-3，数字型Number

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

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

8-4，字符串String

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

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

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

字符串长度

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

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

字符串的拼接

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

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

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

8-5，布尔型Boolean

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

var flag=true

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¨G11G¨K113K¨G12Gconsole.log(Number(""))//空字符串转换为 0 console.log(Number(true))//true转换为1 console.log(Number(false))//false转换为0 console.log(Number("编程小石头"))//其他的字符串会转换为 NaN (不是个数字)¨G13G¨K39K<view> {{message}} </view>// js里如下 Page({ data: { message: '我是动态绑定的数据' } })¨G14G¨K40K<input placeholder="请输入数字a" bindinput="inputa" /> <text>+</text> <input placeholder="请输入数字b" bindinput="inputb" /> <button bindtap='sum'>计算</button> <text>结果为：{{result}}</text>¨G15G<input placeholder="请输入数字a" bindinput="inputa" /> <input placeholder="请输入数字b" bindinput="inputb" />¨G16G<button bindtap='sum'>计算</button>¨G17GPage({ /** * 页面的初始数据 * 初始化两个输入值 */ 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 }) } })¨G18Gvar num=1 num=num+1 //这里就是给num加1¨G19Gvar num=10 console.log(++num +10)//结果是21 console.log(num++ +10)//结果是20¨G20Gvar 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的结果是几¨G21Gif (条件) { 如果条件为 true 时执行的代码 }¨G22Gif (age< 18) { console.log("未成年") }¨G23Gif (条件) { 条件为 true 时执行的代码块 } else { 条件为 false 时执行的代码块 }¨G24Gif (age < 18) { console.log("未成年") } else { console.log("成年") } 如果年龄小于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 时执行的代码块
}

• 实例

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

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

11-4 wxml条件渲染

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

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

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

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

可以看出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("编程小石头")
}

for 循环的语法：

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

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

实例

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

上面实例中 语句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>

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

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

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]="周杰伦";

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

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

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

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

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]

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,认识image组件

image组件：主要用来显示图片 官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

网络图片地址：https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=952337662,615710730&fm=85

2,认识video组件

video组件：主要用来实现视频播放 官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html

持续更新中。。。

完整视频免费看：https://www.bilibili.com/video/BV12T4y1E7k6/

如果觉得石头哥的课还不错就1.68元来支持下石头哥