2024年制作简单的微信小程序(合集4篇)

制作简单的微信小程序 第1篇

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

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

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

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

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

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

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

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

制作简单的微信小程序 第2篇

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

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

下面，改一下前面的，加入window属性。

上面代码中，window属性设置导航栏的背景颜色为红色（#ff0000），文本颜色为白色（white），标题文字为_小程序 Demo_。

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

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

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

制作简单的微信小程序 第3篇

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

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

hello world

上面的代码用到了两个标签：和。

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

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

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

制作简单的微信小程序 第4篇

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

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

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

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