我的小程序学习笔记，整理成教程的形式！
发表时间：2023-10-25 08:46:13
文章来源：炫佑科技
浏览次数：175
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
我的小程序学习笔记，整理成教程的形式！
2017年，微信正式推出小程序，允许外部开发在微信内运行自己的代码并开展业务。 此举引发热烈反响。 截至2020年6月，小程序数量已超过550万个。
小程序已成为中国重要的前端业务，与Web和移动应用程序同等重要。 小程序开发供大于求，市场招聘需求异常旺盛，企业争相抢购。
尽管如此，还是缺乏关于小程序教程。 它们要么不够系统，要么过于跳跃。 很多关键点只有寥寥数语，让初学者一头雾水。 当我自学时，我很难找到更好的教程。
本文是我的小程序学习笔记，整理成教程的形式，希望对初学者有用。 我讲一下需要学习的主要知识点。 我的目标是，读完本教程后我的小程序学习笔记，整理成教程的形式！，您将能够学会如何编写小程序。
考虑到很多同学没有开发经验，小程序是他们首先接触的开发领域。 我会详细解释一下，希望新人能够毫无困难地阅读本教程。 由于内容较多，本教程将分为四个系列。
所有示例的完整代码可以从代码存储库下载。
1.什么是小程序？
在学习小程序之前微信小程序开发配置，我们先简单说一下什么是小程序。
从字面上看，小程序就是微信中的一个应用程序。 外部代码以小程序的形式运行在微信移动应用中。
不过，更准确的说法是，小程序可以看作是只能用微信打开和浏览的网站。 小程序的技术模型与网页相同，使用的语言和CSS样式也相同，只是网页的HTML标签稍微修改为WXML标签。 因此，小程序页面本质上就是网页。
小程序的特别之处在于，虽然是网页，但不支持浏览器，所有浏览器API都无法使用。 只能使用微信提供的API。 这也是小程序只能用微信打开的原因，因为底层已经彻底改变了。
2.小程序的优势
小程序*大的优势就是基于微信。
微信App的大部分功能（如拍照、扫描、支付等）都可以小程序使用。 微信提供了各种封装的API。 开发不需要自己实现，也不需要考虑iOS和之间的平台差异。 只需一行代码即可调用它们。
而且，开发无需考虑用户注册和登录。 他们直接使用微信注册登录。 微信用户自动成为您的用户。
3.知识准备
由于小程序是基于Web技术的，所以在学习之前*好了解一点Web开发知识。 具体来说，需要以下两方面的知识。
(1)语言：了解基本语法，能够编写简单的JS脚本程序。
(2)CSS样式：了解如何使用CSS来控制网页元素的外观。
另外，虽然HTML标签和浏览器API不是必备知识，但了解浏览器如何渲染网页对于理解小程序模型有很大帮助。
总的来说，先学习Web开发，再学习小程序是比较合理的方式。 而且web开发的资料很多，很容易找到问题的解决方案。 然而Web开发需要学习的东西太多，并不是短时间内能够掌握的。 如果你想快速入门，先学习小程序也未尝不可，遇到不懂的地方再查资料。
4、开发准备
小程序开发**步是在微信公众平台注册并申请AppID。 这是免费的。
申请完成后，您将获得一个AppID（小程序号）和（小程序密钥），稍后会用到。
然后，下载微信提供的小程序开发工具。 这个工具是必需的，因为只有它才能运行和调试小程序源代码。
开发工具支持 MacOS 和 MacOS 平台。 我安装的是（64位）版本，本教程的内容也是基于该版本，但是MacOS版本上的操作应该是完全一样的。
安装并打开该软件后，会要求您使用微信扫描二维码登录。
登录后，进入新建项目页面，可以创建不同的项目。 默认是新建一个小程序项目。
点击右侧+号，弹出新建小程序页面。
如果直接新建一个小程序，就会生成一个完整的项目脚手架。 对于初学者来说，这不利于掌握各个文件的作用。 更好的学习方法是从头开始手写每一行代码，然后切换到“导入项目”选项将其导入到开发工具中。
导入时需要给小程序起个名字，填写项目代码所在目录，以及之前申请的AppID。
5. 你好世界示例
现在，我邀请大家行动起来，写一个*简单的小程序，只需五分钟即可完成。
**步，为小程序创建一个新的项目目录。 你可以随意命名，这里叫--demo。
您可以在资源管理器中创建一个新目录。 如果你熟悉命令行操作，也可以打开它（如果不熟悉，需要安装），在里面执行以下命令，新建一个目录并进入。
> mkdir wechat-miniprogram-demo
> cd wechat-miniprogram-demo
第二步，在目录下新建脚本文件app.js。 该脚本用于初始化整个小程序。
app.js的内容只有一行代码。
App({});
上面代码中，App()是小程序原生提供的。 该函数的意思是创建一个新的小程序实例。 它的参数是一个配置对象，用于设置小程序实例的行为属性。 此示例不需要任何配置，因此只需使用一个空对象。
第三步，新建一个配置文件app.json，记录项目的一些静态配置。
app.json 是 JSON 格式。 JSON是一种基于语言的数据交换格式。 它只有五个语法规则，非常简单。 对JSON不熟悉的同学可以参考一下。
app.json文件的内容必须至少有一个pages属性，表示小程序包含哪些页面。
{
"pages": [
"pages/home/home"
]
}
在上面的代码中，pages属性是一个数组，数组中的每一项都是一个页面。 在本例中，小程序只有一页，因此数组只有一项，pages/home/home。
pages/home/home 是一个三级文件路径。
所有页面都放置在pages 子目录中。 每个页面都有自己的目录。 这里是pages下的home子目录，说明这个页面叫做home。 页面的名称可以是任意的，只要对应的目录确实存在即可。 小程序会加载页面目录pages/home下的home.js文件。 .js后缀可以省略，所以完整的加载路径是pages/home/home。 home.js脚本的文件名可以随意选择，但习惯上与页面目录同名。
第四步是创建一个新的pages/home子目录。
$ mkdir -p pages/home
然后，在此目录中创建一个新的脚本文件 home.js。 文件内容如下。
Page({});
在上面的代码中，Page()是由小程序原生提供的。 它是用于初始化页面实例的函数。 它的参数是一个配置对象，用于设置当前页面的行为属性。 这是一个空对象，这意味着没有设置任何属性。
第五步是在pages/home目录中创建一个新的home.wxml文件。 WXML是微信页面标签语言，类似于HTML语言，用于描述小程序页面。
home.wxml的内容很简单，只写一行hello world。
hello world
至此，基本就完成了。 现在，打开小程序开发工具，导入项目目录--demo。 如果一切正常，就可以在开发工具中看到运行结果。
点击工具栏上的“预览”或“真机调试”按钮，您还可以在手机上查看真机运行结果。
该示例的完整代码可以在代码存储库中查看。
6.WXML标签语言
上一节中的home.wxml文件只包含*简单的一行hello world。 实际开发中，你不会这样写，而是添加各种标签，以便后面添加样式和效果。
小程序的WXML语言提供了各种页面标签。 接下来，修改 home.wxml 并添加两个*常用的标签。
hello world
