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

小程序已经成为国内前端的一个重要业务,跟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改造一下,加上两个最常用的标签。

helloworld上面的代码用到了两个标签:

标签表示一个区块,用于跟其他区块分隔,类似HTML语言的

标签。表示一段行内文本,类似于HTML语言的标签,多个标签之间不会产生分行。

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

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

总结一下,这个示例一共有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说:

谢阮老师。写的非常好,小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容

THE END
1.微信小程序文档前往开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看《开发者工具介绍》。 打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧! #你的第一个小程序 新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html
2.微信小程序开发(超详细保姆式教程)一、微信小程序开发入门 (一)微信小程序简介与优势 小程序的诞生与发展 微信小程序于 2016 年推出,是一种在微信内部运行的应用形式。它的出现为用户提供了更加便捷的应用使用体验,无需下载安装即可使用各种应用服务,极大地节省了手机存储空间,并且能够快速启动应用,真正实现了 “触手可及” 的应用梦想。随着时间的推https://blog.csdn.net/biwenyunnet/article/details/144365162
3.什么是微信小程序开发?如何开发?开发微信小程序的办法有很多,可以手敲代码,也可以外包出去让别人做 还可以借助小程序在线开发平台,也是https://www.zhihu.com/question/489115892/answer/3054863516
4.如何进行微信小程序开发三、微信小程序开发的几点注意事项 在进行微信小程序开发之前,有几点需要注意的事项。第一点是不要过度设计,微信小程序的主要目的是实现基本功能,因此不需要过度设计和开发,保持简洁才是王道。第二点是保持代码的稳定性,代码的稳定性是保证微信小程序正常运行的前提条件,一定要注意代码上的稳定性和规范性。第三点是https://wenku.baidu.com/view/1ac8769cf9b069dc5022aaea998fcc22bdd1435d.html
5.如何开发微信小程序?频道宣传打开微信公众号官网,前往开发者工具下载页面,根据自己操作系统平台,选择合适的开发工具。 如何开发微信小程序? 在小程序管理后台注册一个小程序,获取小程序的 AppID,打开微信开发工具,输入相应的AppID和项目名称 在微信公众号官网,可以找到小程序的教程、API和示例,这里是最官方的教程,也是做为一个小程序开发人员应当掌https://www.epwk.com/meijie/287710.html
6.如何开发自己的微信小程序?小程序制作的方案主要经营:数字藏品系统开发,元宇宙系统开发,嗨购模式,广告电商系统,泰山众筹模式,分享购cps系统、定制开发、请联系18002820787模式快速开发.APP软件系统公众号小程序开发APP软件系统公众号小程序开发APP软件系统公众号小程序开发APP软件系统公众号小程序开发APP软件系统公众号小程序开发公司以小程序开发、微商城开发、网站建设https://blog.11467.com/b3713324.htm
7.如何搭建微信小程序开发环境?为了帮助开发人员简单高效地开发微信小程序,微信团队提供了一套“微信开发者工具”,该工具集成了公众号网页调试和微信小程序两种开发模式。在进入微信小程序开发前,需要先注册微信公众号,并安装微信开发者工具。本节将针对微信小程序开发环境的搭建进行详细讲解。 https://itheima.com/news/20220516/163738.html
8.如何自己制作微信小程序深圳小程序开发公司想要自己动手制作微信小程序,其实并没有想象中那么复杂。下面将为您介绍几个简单步骤,助您快速上手。 首先,您https://www.580jz.net/tag/9924.html
9.微信小程序怎么开发自己的小程序微信小程序作为一种轻量级的应用,因其无需下载安装、即用即走的特点,受到了广大用户的喜爱。那么,如何开发自己的微信小程序呢?以下是几种常见的方法,帮助你快速上手。 首先,你需要注册并登录微信开发者账号。这是开发小程序的第一步,通过微信官方开发者平台,你可以申请一个小程序账号,并完成实名认证。在注册过程中http://product.pconline.com.cn/itbk/top/qa/1851/18514994.html
10.如何自己开发微信小程序游戏:只需6个步骤你是否觉得,开发微信小程序游戏是一件很难很复杂的事情,需要有很高的编程水平和很多的时间和资金呢?如果你有这样的想法,那么你可能错过了一个很好的机会,因为开发微信小程序游戏其实并不难,只要你掌握了一些基本的技能和方法,就可以轻松地做出一个有趣和有价值的游戏。https://www.hongshu18.com/article-detail/BRKp5jaN
11.如何在微信小程序中实现零代码开发?零代码知识中心微信小程序作为一种轻量级应用,广受企业和个人开发者的喜爱。然而,对于非专业开发者来说,编写代码可能是一项困难和耗时的任务。那么,有没有一种方法可以实现零代码开发微信小程序呢?答案是肯定的。简道云作为一种零代码的应用搭建平台,可以帮助各行业人员在不使用代码的情况下搭建个性化的CRM、ERP、OA、项目管理、进销https://www.jiandaoyun.com/fe/rhzwxxcxzs/
12.微信小程序微信小程序开发微信小程序依托微信生态,可以便捷地被获取和传播,同时在微信内又具有较好的应用流畅度。 「上线了」采用专业开发技术和产品设计,深度结合小程序基础架构, 提供小程序制作开发平台,一键生成小程序,为用户打造流畅体验。 功能介绍 一键制作小程序,模板丰富功能强大 https://www.sxl.cn/xiaochengxu
13.合肥小程序开发公司微信公众号制作APP定制物联网小程序建设8年深耕合肥小程序开发/微信公众号开发定制/物联网开发/APP开发/网站建设,专业的合肥微信小程序开发公司,提供小程序制作平台,专注小程序定制开发,小程序设计制作,源码定制。想知道小程序制作一个需要多少钱?http://www.roadke.com/
14.万字干货!超全面的小程序设计指南优设网2016 年 11 月 3 日晚间,微信团队宣布:微信小程序正式开放公测。 2017 年 9 月 20 日,支付宝小程序向用户开放公测。 2018 年 7 月,百度 AI 开发者大会上,百度宣布百度智能小程序正式上线。 2019 年 6 月 1 日,QQ 小程序在安卓的新版 QQ 上如期上线,5 天后,正式登陆 iOS 版手机 QQ。至此,QQ 小程序https://www.uisdc.com/mini-program-design-guide
15.如何实现app与微信小程序的二维码聚合?腾讯云开发者社区此外FinClip 也可以在不用动代码的条件下实现小程序复用微信登录的能力,方式与关联微信小程序二维码一致。 以上就是小程序二维码聚合或“一码通”能力最便捷的方式了,操作原理一点也不难,有效帮助小程序开发者更便捷地兼容线下已有的微信二维码,实现线上线下联动高效推广小程序。 https://cloud.tencent.com/developer/article/2068819
16.如何搭建小程序?总的来说,搭建小程序需要一定的前端技术和开发经验。但是,随着小程序开发工具的不断升级和完善,您可以更轻松地创建小程序。如果您需要搭建小程序,您可以先学习一些基础的前端技术,然后使用微信小程序开发者工具进行开发和调试。 现在,无需找app开发公司,利用当前流行的saas软件开发平台,也可以独立免编程完成软件开发。http://www.apppark.cn/mobile/news_t_45634.html
17.微信小程序开发教程从零开始微信小程序中就四种类型的文件 js --- JavaScrip文件 json --- 项目配置文件,负责窗口颜色等等 wxml --- 类似HTML文件 wxss --- 类似CSS文件 在根目录下用app来命名的这四中类型的文件,就是程序入口文件。 app.json 必须要有这个文件,如果没有这个文件https://www.jianshu.com/p/aaef5ceb3936
18.微信小程序用什么语言来编写小程序开发微信小程序可以用html、css、javascript等语言来编写,还可以使用php语言来开发。微信小程序是基于微信平台的轻量级应用,它的开发是应用微信提供的小程序前端规范,并结合企业自己开发的应用后端来完成的。 小程序是基于微信平台的轻量级应用,它的开发是应用微信提供的小程序前端规范,结合企业自己开发的应用后端来制作。总体https://www.php.cn/xiaochengxu-418037.html
19.微信小程序开发文档这份微信小程序开发者文档是微信公众平台官方团队发布,由W3Cschool编辑整理完成,方便开发者查阅学习,并添加拓展了《微信小程序设计规范》等相关知识,使该文档内容更加丰富。_来自微信小程序开发文档,w3cschool编程狮。https://www.w3cschool.cn/weixinapp