微信小程序入门教程之一:初次上手

作者: 阮一峰

日期: 2020年10月26日

微信是中国使用量最大的手机 App 之一,日活跃用户超过3亿,月活跃用户超过11亿(2019年底统计),市场极大。

2017年,微信正式推出了小程序,允许外部开发者在微信内部运行自己的代码,开展业务。这引发了热烈反响,截止2020年6月,小程序数量已经超过了550万个

小程序已经成为国内前端的一个重要业务,跟 Web 和手机 App 有着同等的重要性。小程序开发者供不应求,市场招聘需求极其旺盛,企业都抢着要。

尽管如此,小程序的教程却很缺,要么是不够系统,要么就是跳跃性太大,很多关键的地方寥寥数语,初学者摸不着头脑。我自己学的时候,就苦于找不到好一点的教程。

本文就是我的小程序学习笔记,整理成教程的形式,希望对于初学者有用。需要学会的主要知识点,我都会讲到,我的目标是你读完这个教程,就能学会怎么写小程序。

考虑到很多同学并没有开发经验,小程序是他们接触的第一个开发领域。我会讲得比较细,希望新人也能没有困难地阅读这个教程。由于内容比较多,这个教程将分成四次连载。

所有示例的完整代码,都可以从 GitHub 的代码仓库下载。

一、小程序是什么?

学习小程序之前,先简单说一下,它到底是什么。

字面上讲,小程序就是微信里面的应用程序,外部代码通过小程序这种形式,在微信这个手机 App 里面运行。

但是,更准确的说法是, 小程序可以视为只能用微信打开和浏览的网站。 小程序和网页的技术模型是一样的,用到的 JavaScript 语言和 CSS 样式也是一样的,只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以,小程序页面本质上就是网页。

小程序的特殊之处在于,虽然是网页,但是它不支持浏览器,所有浏览器的 API 都不能使用,只能用微信提供的 API。这也是为什么小程序只能用微信打开的原因,因为底层全变了。

二、小程序的优势

小程序最大的优势,就是它基于微信。

微信 App 的功能(比如拍照、扫描、支付等等),小程序大部分都能使用。微信提供了各种封装好的 API,开发者不用自己实现,也不用考虑 iOS 和安卓的平台差异,只要一行代码就可以调用。

而且,开发者也不用考虑用户的注册和登录,直接使用微信的注册和登录,微信的用户自动成为你的用户。

三、知识准备

由于小程序基于网页技术,所以学习之前,最好懂一点网页开发。具体来说,下面两方面的知识是必需的。

(1)JavaScript 语言:懂基本语法,会写简单的 JS 脚本程序。

(2)CSS 样式:理解如何使用 CSS 控制网页元素的外观。

此外,虽然 HTML 标签和浏览器 API 不是必备知识,但是了解浏览器怎么渲染网页,对于理解小程序模型有很大的帮助。

总的来说,先学网页开发,再学小程序,是比较合理的学习途径,而且网页开发的资料比较多,遇到问题容易查到解决方法。但是,网页开发要学的东西太多,不是短期能掌握的,如果想快速上手,先学小程序,遇到不懂的地方再去查资料,也未尝不可。

四、开发准备

小程序开发的第一步,是去微信公众平台注册,申请一个 AppID,这是免费的。

申请完成以后,你会得到一个 AppID(小程序编号) 和 AppSecret(小程序密钥),后面都会用到。

然后,下载微信提供的小程序开发工具。这个工具是必需的,因为只有它才能运行和调试小程序源码。

开发者工具支持 Windows 和 MacOS 两个平台。我装的是 Windows (64位)的版本,这个教程的内容也是基于该版本的,但是 MacOS 版本的操作应该是完全一样的。

安装好打开这个软件,会要求你使用微信扫描二维码登录。

登录后,进入新建项目的页面,可以新建不同的项目,默认是新建小程序项目。

点击右侧的+号,就跳出了新建小程序的页面。

如果直接新建小程序,会生成一个完整的项目脚手架。对于初学者来说,这样反而不利于掌握各个文件的作用。更好的学习方法是,自己从头手写每一行代码,然后切换到"导入项目"的选项,将其导入到开发者工具。

导入时,需要给小程序起一个名字,并且填写项目代码所在的目录,以及前面申请的 AppID。

五、 hello world 示例

下面,就请大家动手,跟着写一个最简单的小程序,只要五分钟就能完成。

第一步,新建一个小程序的项目目录。名字可以随便起,这里称为wechat-miniprogram-demo

你可以在资源管理器里面,新建目录。如果熟悉命令行操作,也可以打开 Windows Terminal(没有的话,需要安装),在里面执行下面的命令,新建并进入该目录。


> mkdir wechat-miniprogram-demo
> cd wechat-miniprogram-demo

第二步,在该目录里面,新建一个脚本文件app.js。这个脚本用于对整个小程序进行初始化。

app.js内容只有一行代码。


App({});

上面代码中,App()由小程序原生提供,它是一个函数,表示新建一个小程序实例。它的参数是一个配置对象,用于设置小程序实例的行为属性。这个例子不需要任何配置,所以使用空对象即可。

第三步,新建一个配置文件app.json,记录项目的一些静态配置。

app.json采用 JSON 格式。JSON 是基于 JavaScript 语言的一种数据交换格式,只有五条语法规则,非常简单,不熟悉 JSON 的同学可以参考这篇教程

app.json文件的内容,至少必须有一个pages属性,指明小程序包含哪些页面。


{
  "pages": [
    "pages/home/home"
  ]
}

上面代码中,pages属性是一个数组,数组的每一项就是一个页面。这个示例中,小程序只有一个页面,所以数组只有一项pages/home/home

pages/home/home是一个三层的文件路径。

  1. 所有页面都放在pages子目录里面。
  2. 每个页面有一个自己的目录,这里是pages下面的home子目录,表示这个页面叫做home。页面的名字可以随便起,只要对应的目录确实存在即可。
  3. 小程序会加载页面目录pages/home里面的home.js文件,.js后缀名可以省略,所以完整的加载路径为pages/home/homehome.js这个脚本的文件名也可以随便起,但是习惯上跟页面目录同名。

第四步,新建pages/home子目录。


$ mkdir -p pages/home

然后,在这个目录里面新建一个脚本文件home.js。该文件的内容如下。


Page({});

上面代码中,Page()由小程序原生提供,它是一个函数,用于初始化一个页面实例。它的参数是一个配置对象,用于设置当前页面的行为属性。这里是一个空对象,表示不设置任何属性。

第五步,在pages/home目录新建一个home.wxml文件。WXML 是微信页面标签语言,类似于 HTML 语言,用于描述小程序的页面。

home.wxml的内容很简单,就写一行hello world


hello world

到这一步,就算基本完成了。现在,打开小程序开发工具,导入项目目录wechat-miniprogram-demo。如果一切正常,就可以在开发者工具里面,看到运行结果了。

点击工具栏的"预览"或"真机调试"按钮,还可以在你的手机上面,查看真机运行结果。

这个示例的完整代码,可以到代码仓库查看。

六、WXML 标签语言

上一节的home.wxml文件,只写了最简单的一行hello world。实际开发中,不会这样写,而是要加上各种标签,以便后面添加样式和效果。

小程序的 WXML 语言提供各种页面标签。下面,对home.wxml改造一下,加上两个最常用的标签。


<view>
  <text>hello world</text>
</view>

上面的代码用到了两个标签:<view><text>

<view>标签表示一个区块,用于跟其他区块分隔,类似 HTML 语言的<div>标签。<text>表示一段行内文本,类似于 HTML 语言的<span>标签,多个<text>标签之间不会产生分行。

注意,每个标签都是成对使用,需要有闭合标记,即标签名前加斜杠表示闭合,比如<view>的闭合标记是</view>。如果缺少闭合标记,小程序编译时会报错。

由于我们还没有为页面添加任何样式,所以页面的渲染效果跟上一节是一样的。后面添加样式时,大家就可以看到标签的巨大作用。

七、小程序的项目结构

总结一下,这个示例一共有4个文件,项目结构如下。


|- app.json
|- app.js
|- pages
   |- home
      |- home.wxml
      |- home.js

这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构,在上面不断添加其他内容。

这个结构分成两层:描述整体程序的顶层 app 脚本,以及描述各个页面的 page 脚本。

八、项目配置文件 app.json

顶层的app.json文件用于整个项目的配置,对于所有页面都有效。

除了前面提到的必需的pages属性,app.json文件还有一个window属性,用来设置小程序的窗口。window属性的值是一个对象,其中有三个属性很常用。

  • navigationBarBackgroundColor:导航栏的颜色,默认为#000000(黑色)。
  • navigationBarTextStyle:导航栏的文字颜色,只支持black(黑色)或white(白色),默认为white
  • navigationBarTitleText:导航栏的文字,默认为空。

下面,改一下前面的app.json,加入window属性。


{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序 Demo"     
  }
}

上面代码中,window属性设置导航栏的背景颜色为红色(#ff0000),文本颜色为白色(white),标题文字为"小程序 Demo"。

开发者工具导入项目代码,就可以看到导航栏变掉了。

这个示例的完整代码,可以到代码仓库查看。

除了窗口的样式,很多小程序的顶部或尾部,还有选项栏,可以切换到不同的选项卡。

这个选项栏,也是在app.json里面设置,使用tabBar属性,这里就不展开了。

如果你看到了结尾,说明真的对小程序开发非常感兴趣。今天就讲到这里,下一篇教程将讲解如何设置基本的页面样式,做出用户界面 UI。

(完)

留言(29条)

迫不及待的想看后面的连载内容了!

对我来说 知道小程序源码如何编写的大致逻辑就足够了

掌握了Vue和JavaScript,开发微信小程序基本没什么障碍,除开微信的API和文档过于迷惑之外。

推荐一个比小程序官方组件库更好用的小程序组件库:[iView Weapp](https://weapp.iviewui.com/)

不错的入门教程,期待连载

前两天也写了个demo试试,确实上手挺简单的,再加上免费云API,数据库调用也足够一般开发使用。
希望可以多讲讲原理,跟当前的Vue、react之类的对比看。

期待连载

期待连载

阮一峰老师做的“小程序入门教程之一---初次上手”那张图片有点辣眼睛啊 囧

期待后续

通俗易懂,支持一下!!!

感谢大佬分享 正好想入门学习学习

太棒啦

赞,很有用的入门教程,期待后续。

期待连载 嘎嘎

macOS 下按照您说的步骤坐下来,预览编译时微信开发者工具一直报错如下。
不知道是不是环境的问题,工具自己新建的例子就没有错误。


Uncaught ReferenceError: define is not defined
at home.js:1

对不起,之前我提出的在macOS下编译报错的问题,是我自己的问题。不要意思,打扰了。

什么时候更新下一期教程

对于腾讯这样一个企业,维护和发展一个巨大的行业标准,实在是令人不信任。不管是技术还是非技术层面

小程序还是挺不错的,省去了很多麻烦,但也有不好的地方,就是自己的业务受制于第三方。

对于从入门就学小程序的我来说,阮一峰的教程让我看到了不一样的一个角度,不管怎么说吧,学东西其实方式只是一个途径,过程才是需要自己不断地去体会

期待连载

又到周五了,我是刷周刊过来的,意外收获,期待连载

在标题七,九中间少了个八?

@landius:

谢谢指出,标错了,改过来了。

现在大部分都是用框架开发小程序,react用taro vue用uni-app

初学者一开始就从完整的项目脚手架学习,的确会头大!拆分开从头创建每个文件、手写每行代码是很有必要的

最好是设立个专栏吧大佬

我在 Mac 下的微信开发者工具 时不时就闪退 有没有~~

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接