小程序已经成为国内前端的一个重要业务,跟Web和手机App有着同等的重要性。小程序开发者供不应求,市场招聘需求极其旺盛,企业都抢着要。
尽管如此,小程序的教程却很缺,要么是不够系统,要么就是跳跃性太大,很多关键的地方寥寥数语,初学者摸不着头脑。我自己学的时候,就苦于找不到好一点的教程。
本文就是我的小程序学习笔记,整理成教程的形式,希望对于初学者有用。需要学会的主要知识点,我都会讲到,我的目标是你读完这个教程,就能学会怎么写小程序。
考虑到很多同学并没有开发经验,小程序是他们接触的第一个开发领域。我会讲得比较细,希望新人也能没有困难地阅读这个教程。由于内容比较多,这个教程将分成四次连载。
学习小程序之前,先简单说一下,它到底是什么。
由于小程序基于网页技术,所以学习之前,最好懂一点网页开发。具体来说,下面两方面的知识是必需的。
(1)JavaScript语言:懂基本语法,会写简单的JS脚本程序。
(2)CSS样式:理解如何使用CSS控制网页元素的外观。
此外,虽然HTML标签和浏览器API不是必备知识,但是了解浏览器怎么渲染网页,对于理解小程序模型有很大的帮助。
总的来说,先学网页开发,再学小程序,是比较合理的学习途径,而且网页开发的资料比较多,遇到问题容易查到解决方法。但是,网页开发要学的东西太多,不是短期能掌握的,如果想快速上手,先学小程序,遇到不懂的地方再去查资料,也未尝不可。
申请完成以后,你会得到一个AppID(小程序编号)和AppSecret(小程序密钥),后面都会用到。
开发者工具支持Windows和MacOS两个平台。我装的是Windows(64位)的版本,这个教程的内容也是基于该版本的,但是MacOS版本的操作应该是完全一样的。
点击右侧的+号,就跳出了新建小程序的页面。
如果直接新建小程序,会生成一个完整的项目脚手架。对于初学者来说,这样反而不利于掌握各个文件的作用。更好的学习方法是,自己从头手写每一行代码,然后切换到"导入项目"的选项,将其导入到开发者工具。
导入时,需要给小程序起一个名字,并且填写项目代码所在的目录,以及前面申请的AppID。
下面,就请大家动手,跟着写一个最简单的小程序,只要五分钟就能完成。
第一步,新建一个小程序的项目目录。名字可以随便起,这里称为wechat-miniprogram-demo。
你可以在资源管理器里面,新建目录。如果熟悉命令行操作,也可以打开WindowsTerminal(没有的话,需要安装),在里面执行下面的命令,新建并进入该目录。
>mkdirwechat-miniprogram-demo>cdwechat-miniprogram-demo第二步,在该目录里面,新建一个脚本文件app.js。这个脚本用于对整个小程序进行初始化。
app.js内容只有一行代码。
App({});上面代码中,App()由小程序原生提供,它是一个函数,表示新建一个小程序实例。它的参数是一个配置对象,用于设置小程序实例的行为属性。这个例子不需要任何配置,所以使用空对象即可。
第三步,新建一个配置文件app.json,记录项目的一些静态配置。
app.json文件的内容,至少必须有一个pages属性,指明小程序包含哪些页面。
{"pages":["pages/home/home"]}上面代码中,pages属性是一个数组,数组的每一项就是一个页面。这个示例中,小程序只有一个页面,所以数组只有一项pages/home/home。
pages/home/home是一个三层的文件路径。
第四步,新建pages/home子目录。
$mkdir-ppages/home然后,在这个目录里面新建一个脚本文件home.js。该文件的内容如下。
Page({});上面代码中,Page()由小程序原生提供,它是一个函数,用于初始化一个页面实例。它的参数是一个配置对象,用于设置当前页面的行为属性。这里是一个空对象,表示不设置任何属性。
home.wxml的内容很简单,就写一行helloworld。
helloworld到这一步,就算基本完成了。现在,打开小程序开发工具,导入项目目录wechat-miniprogram-demo。如果一切正常,就可以在开发者工具里面,看到运行结果了。
点击工具栏的"预览"或"真机调试"按钮,还可以在你的手机上面,查看真机运行结果。
上一节的home.wxml文件,只写了最简单的一行helloworld。实际开发中,不会这样写,而是要加上各种标签,以便后面添加样式和效果。
小程序的WXML语言提供各种页面标签。下面,对home.wxml改造一下,加上两个最常用的标签。
注意,每个标签都是成对使用,需要有闭合标记,即标签名前加斜杠表示闭合,比如 由于我们还没有为页面添加任何样式,所以页面的渲染效果跟上一节是一样的。后面添加样式时,大家就可以看到标签的巨大作用。 总结一下,这个示例一共有4个文件,项目结构如下。 |-app.json|-app.js|-pages|-home|-home.wxml|-home.js这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构,在上面不断添加其他内容。 这个结构分成两层:描述整体程序的顶层app脚本,以及描述各个页面的page脚本。 顶层的app.json文件用于整个项目的配置,对于所有页面都有效。 下面,改一下前面的app.json,加入window属性。 {"pages":["pages/home/home"],"window":{"navigationBarBackgroundColor":"#ff0000","navigationBarTextStyle":"white","navigationBarTitleText":"小程序Demo"}}上面代码中,window属性设置导航栏的背景颜色为红色(#ff0000),文本颜色为白色(white),标题文字为"小程序Demo"。 开发者工具导入项目代码,就可以看到导航栏变掉了。 除了窗口的样式,很多小程序的顶部或尾部,还有选项栏,可以切换到不同的选项卡。 (完) 业余草说: 迫不及待的想看后面的连载内容了! Spongecaptain说: 对我来说知道小程序源码如何编写的大致逻辑就足够了 希月说: shanquan说: 微慕说: 不错的入门教程,期待连载 Wh0am!说: 前两天也写了个demo试试,确实上手挺简单的,再加上免费云API,数据库调用也足够一般开发使用。希望可以多讲讲原理,跟当前的Vue、react之类的对比看。 RickeyGong说: 期待连载 Three-uncle说: thosefree说: 阮一峰老师做的“小程序入门教程之一---初次上手”那张图片有点辣眼睛啊囧 Jerrychung说: 期待后续 .neter菜猪说: 通俗易懂,支持一下!!! KlausJ说: neko说: 太棒啦 wonpn说: 赞,很有用的入门教程,期待后续。 恩珠说: 期待连载嘎嘎 kaba说: UncaughtReferenceError:defineisnotdefinedathome.js:1 对不起,之前我提出的在macOS下编译报错的问题,是我自己的问题。不要意思,打扰了。 Anne说: 什么时候更新下一期教程 山前说: 对于腾讯这样一个企业,维护和发展一个巨大的行业标准,实在是令人不信任。不管是技术还是非技术层面 Rivalsa说: 小程序还是挺不错的,省去了很多麻烦,但也有不好的地方,就是自己的业务受制于第三方。 Thinker说: 对于从入门就学小程序的我来说,阮一峰的教程让我看到了不一样的一个角度,不管怎么说吧,学东西其实方式只是一个途径,过程才是需要自己不断地去体会 jiaonilulu说: 肖说: 又到周五了,我是刷周刊过来的,意外收获,期待连载 landius说: 在标题七,九中间少了个八? 阮一峰说: @landius: 谢谢指出,标错了,改过来了。 ew说: 现在大部分都是用框架开发小程序,react用tarovue用uni-app 节点说: 初学者一开始就从完整的项目脚手架学习,的确会头大!拆分开从头创建每个文件、手写每行代码是很有必要的 菊部说: 最好是设立个专栏吧大佬 Can说: 兔子说: 好详细通俗易懂继续往下看 ranel说: Mac更新系统后的bug luseike说: 多个text会产生换行 王军伟说: 谢谢阮老师。写的非常好,小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容易理解。 玛蒂蒂说: UncaughtReferenceError:defineisnotdefinedathome.js:1 我也是,请问怎么解决这个问题 吴杭说: 引用王军伟的发言:谢谢阮老师。写的非常好,小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容易理解。 良心教程,入门必备!! Lucy说: 谢阮老师。写的非常好,小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容