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

aliyunQ

4年前

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

一，认识小程序

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

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

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

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

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

1-2，小程序发展前景

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

image

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

image

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 建议大家下载最新的稳定版本

image

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

image

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

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

image

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

image

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

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

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

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

image

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

image

3-3，小程序项目配置

image

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

image

3-4，熟悉开发者工具

image

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

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

image

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

image

3-6，小程序结构目录

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

image

四，小程序开发三剑客

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

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

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

image

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里的注释如下

image

wxss里的注释

image

js里的注释

image

6-2，日志打印的学习

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

<pre spellcheck=”false” class=”md-fences md-end-block ty-contain-cm modeLoaded” lang=”” cid=”n335″ mdtype=”fences” style=”box-sizing: border-box; overflow: visible; font-family: var(–monospace); –select-text-bg-color: #36284e; –select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>console.log(“我的打印出来的日志内容”)</pre>

image

6-3，函数的学习

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

image

6-4，点击事件的学习

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

image

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

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

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

image

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

image

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

七，综合小案例~开发一个简单的计算器

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

1.png

实现起来特别简单，代码也特别少，就下面三个

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)] 下面就带带大家敲出属于自己的计算器小程序代码。

1，先看index.wxml，是不是代码特别少

<pre spellcheck=”false” class=”md-fences md-end-block ty-contain-cm modeLoaded” lang=”” cid=”n353″ mdtype=”fences” style=”box-sizing: border-box; overflow: visible; font-family: var(–monospace); –select-text-bg-color: #36284e; –select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>
<input placeholder=”请输入数字a” bindinput=”inputa” />
<text>+</text>
<input placeholder=”请输入数字b” bindinput=”inputb” />
<button bindtap=’sum’>计算</button>
<text>结果为：{{result}}</text></pre>

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

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

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

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

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

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

4.jpg

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

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

<pre spellcheck=”false” class=”md-fences md-end-block ty-contain-cm modeLoaded” lang=”” cid=”n369″ mdtype=”fences” style=”box-sizing: border-box; overflow: visible; font-family: var(–monospace); –select-text-bg-color: #36284e; –select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.71429em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; color: rgb(31, 9, 9); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>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
})
}
})</pre>

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

3，作业，自己写一个减法计算器

八，多媒体组件的学习（图片和视频）

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.jianshu.com/p/8eb320e54c62

原著是一个有趣的人,若有侵权,请通知删除