微信小程序给数组数据赋值_微信小程序的入门教程

微信是中国使用最频繁的移动应用之一，日活跃用户超过3亿，月活跃用户超过11亿(2019年底的统计数据[1])。市场很大。

2017年，微信正式启动了一个小程序，允许外部开发人员运行自己的代码并在微信内部开展业务。这引起了热烈的反响。截至2020年6月小程序，小型程序的数量已超过550万[2]。

小程序已成为中国重要的前端业务，与Web和移动应用程序一样重要。小程序开发商的需求供不应求，市场对招聘的需求非常旺盛，各公司争相要求。

尽管如此，小程序的教程还是不够，要么不够系统化，要么太过急。许多要点是很少的话，初学者无法弄清楚。当我自己学到它时，找不到更好的教程。

本文是我的小程序学习笔记，整理为教程形式，希望对初学者有用。我将讨论需要学习的主要知识点。我的目标是，阅读本教程后，您可以学习如何编写小型程序。

考虑到许多学生没有开发经验，迷你程序是他们接触的第一个开发领域。我将详细讲讲，希望新手可以轻松阅读本教程。由于内容相对较多，本教程将分为四个系列。

在学习迷你计划之前，我们先简要介绍一下它。

从字面上看，小程序是微信中的应用程序，外部代码以小程序的形式在微信的移动应用程序中运行。

但是，更准确地说，微型程序可以被视为只能由微信打开和浏览的网站。小程序和网页的技术模型相同，并且所使用的JavaScript语言和CSS样式也相同，不同之处在于，网页的HTML标记已略微修改为WXML标记。因此，小程序页面实质上是一个网页。

小程序的特殊功能是，尽管它是一个网页，但它不支持浏览器。不能使用所有浏览器的API，只能使用微信提供的API。这就是为什么只能通过微信打开小程序的原因，因为底层已更改。

二、小程序的优点

微信应用程序的大多数功能(例如拍照，扫描，付款等)都可以在小型程序中使用。微信提供了各种封装的API。开发人员不需要自己实现它们，也不需要考虑iOS和Android平台之间的差异。只需一行代码即可调用它们。

此外，开发人员无需考虑用户注册和登录。他们直接使用微信注册和登录。微信用户将自动成为您的用户。

三、知识准备

由于小程序是基于Web技术的，因此最好在学习之前先了解一下Web开发。具体来说，需要以下两个方面的知识。

([1)JavaScript语言：了解基本语法，可以编写简单的JS脚本程序。

([2)CSS样式：了解如何使用CSS来控制网页元素的外观。

此外，尽管HTML标记和浏览器API并不是必需的知识，但了解浏览器如何呈现网页对于理解applet模型有很大帮助。

通常，先学习Web开发然后再学习小型程序是一种更合理的学习方式。此外，还有更多用于Web开发的材料，并且可以轻松解决问题。但是，在Web开发中有太多东西要学习，这些东西在短时间内无法掌握。如果要快速入门，应该首先学习小型程序，然后在遇到不了解的内容时检查信息。

四、开发准备

应用程序完成后，您将获得一个AppID(迷你程序编号)和AppSecret(迷你程序密钥)，稍后将使用它们。

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

开发人员工具同时支持Windows和MacOS平台。我安装了Windows(64位)版本。本教程的内容也基于此版本，但MacOS版本的操作应完全相同。

如果直接创建一个小程序，将生成一个完整的项目支架。对于初学者来说，这不利于掌握每个文件的角色。更好的学习方法是自己从头开始编写每一行代码，然后切换到“导入项目”选项，并将其导入开发人员工具。

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

五、你好世界示例

接下来，请您自己做，然后继续编写最简单的小程序，只需五分钟即可完成。

第一步是创建一个小型程序项目目录。名称可以是您想要的任何名称，在这里称为wechat-miniprogram-demo。

您可以在Windows Terminal中执行以下命令来创建一个新目录并输入它。

$ mkdir wechat-miniprogram-demo

$ cd wechat-miniprogram-demo

第二步是在此目录中创建一个新的脚本文件。该脚本用于初始化整个小程序。

的内容仅是一行代码。

App({});

在上面的代码中，App由小程序本地提供。它是一个函数，意味着创建一个新的applet实例。它的参数是一个配置对象，用于设置applet实例的行为属性。此示例不需要任何配置，因此请使用一个空对象。

第三步是创建一个新的配置文件on来记录项目的一些静态配置。

on使用JSON格式。 JSON是一种基于JavaScript语言的数据交换格式。它只有五个语法规则，非常简单。不熟悉JSON的学生可以参考本教程[5]。

on文件的内容必须至少具有pages属性，指示该applet包含哪些页面。

{

"pages": [

"pages/home/home"

]

}

在上面的代码中，pages属性是一个数组，并且数组中的每个项目都是一个页面。在此示例中，小程序只有一页，因此数组只有一页，即pages / home / home。

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

1.所有页面都放置在pages子目录中。2.每个页面都有自己的目录，这是页面下的home子目录，这意味着此页面称为home。页面名称可以是您想要的任何名称，只要存在相应的目录即可。3.小程序将把文件加载到页面目录pages / home中。可以省略.js后缀，因此完整的加载路径为pages / home / home。脚本的文件名可以是任何名称，但习惯上与页面目录名称相同。

第四步是创建pages / home子目录。

$ mkdir -p pages/home

接下来，在此目录中创建脚本文件。该文件的内容如下。

Page({});

在上面的代码中，Page由applet本地提供，applet是用于初始化页面实例的函数。它的参数是一个配置对象，用于设置当前页面的行为属性。这是一个空对象，这意味着未设置任何属性。

第五步是在pages / home目录中创建一个文件。 WXML是一种类似于HTML语言的微信页面标记语言，用于描述小程序的页面。

的内容非常简单，只需编写一行hello world。

hello world

至此，基本完成。现在，打开小程序开发工具并导入项目目录wechat-miniprogram-demo。如果一切正常，则可以在开发人员工具中查看结果。

单击工具栏上的“预览”或“真实设备调试”按钮，您还可以在手机上查看真实设备运行结果。