关于微信小程序的开发体验

目录

1. 前言
2. 我对小程序的看法
3. 小程序开发
   3.1 全局配置
   3.2 页面配置
   3.3 组建的创建和使用
   3.4 路由的配置
4. 总结

前言#

一场突如其来的疫情,打破了许多人的计划，也让许多公司无法正常运转，没有办法，只能在家里办公(真是有人欢喜有人忧啊)，正所谓逆战之中求生存。最近做了一个微信小程序的项目，在此分享一下关于小程序开发的心得。

1.我对小程序的看法#

我相信很多人遇到过这种情况，手机上的App很多很多，但是大部分的App左上角，都存在一朵小云朵，当然，是针对于ios系统的，我这么说，应该明白我的意思吧？对，就是App很久没用需要更新了。很多用户不会选择去更新App，为什么？因为手机内存不够了。但是又不会选择卸载，为什么？因为恐怕以后会用的到。（最起码我是这样）。现在卸载了，万一哪一天，用到了，还要重新去下载，太麻烦了！现如今我们生活当中很多地方都需要用到特定的App，比如公司打卡，比如外卖点餐。如果是高频率使用的App还好，如果是低频的呢？偶尔使用一次，下载，用完再卸载，用了再下次，岂不是很麻烦？由此，微信小程序正式诞生了，可以说，微信小程序的出现恰到好处，它真真正正的体现了“触手可及，用完即走”的理念，用户无需关心手机内存的问题，无需关心是否经常用到，用的时候直接在微信当中搜索就可以了，我相信现如今没有多少人是不用微信的吧？那么接下来就说一下微信小程序是如何开发的。

2.小程序开发#

现如今前端这么多的框架,但是在我看来,每个框架最主要的部分,不外乎的就是’全局的配置’、‘页面的创建和使用’、‘组件的创建和使用’、‘路由的配置’这几大项，小程序也不例外，我们依次来看一下在小程序当中如何完成这些。
首先小程序工具的下载以及项目创建很简单,大家依照官网就可以完成,此处直接跳过。

2.1全局配置#

当小程序项目创建完成之后,可以看到这么一个页面,这就是一个初始化的小程序项目.

在目录中存在一个app.json文件,这就是小程序的全局配置。打开app.json,可以看到一个对象包含着四个属性,分别为pages,window,style,sitemapLocation,当然版本不一致可能存在差异。

先来说pages属性，其实pages就是我们刚才提到的，路由的配置。它是一个数组，数组中的每一项就代表一个路由配置。每当我们创建了一个新的页面，就需要在pages当中，配置一下这个页面的路由，否则是无法跳转的。这里不得不称赞一下微信小程序，每当你创建了一个页面，微信小程序开发者工具，会自动的在pages数组中，加入这个路由，根本不需要你去手动的写入，是不是很方便？（关于页面的创建我们待会再说）
不仅如此，我们甚至根本都不需要去创建一个页面，这里告诉大家一个便捷的方法。我们可以直接在pages数组中，按照上面的格式，重新加入一个路由配置，微信小程序会自己创建这个页面，加入到对应的目录当中，简直太赞了。

接着是window属性，window是用来配置小程序的标题,标题颜色,标题背景色,下拉刷新的背景色,底部的tab栏等。由于window的配置有很多，这里不一一赘述了，可以去看微信开发文档，里面写的很详细微信全局配置。

其次，很重要的一个属性，就是“底部的tab栏”。要配置底部的tab栏，我们就需要用到tabBar属性,他是和pages及window属性平级的。

tabBar也是一个对象，它包含了以下属性，需要注意的点是，list属性，也是一个数组，数组的每一个元素，又是一个对象，每一个对象包含pagePath、text、iconPath、selectedIconPath四个户型，分别表示页面路径、按钮文字、图标路径和选中时的图标路径。注意：list数组的每一个对象，可以没有图标，也就是iconPath属性，但是，如果要加上图标，就必须要加上selectedIconPath，也就是说iconPath和selectedIconPath必须同时存在，否则没有效果，并且list数组当中，最少需要有两项，最多只能有五项

style属性，是用来指定weui的样式。

sitemapLocation是指定了sitemap.json文件的位置。sitemap文件中主要是定义了小程序在微信中的索引规则。

除了这些，在全局配置当中还有许多的配置项，比如网络请求的超时时间，是否开启debug模式，全局自定义组件，分包预下载规则等，这里就不一一赘述了，大家可以点击上面的链接，去官方文档中查看，写的非常详细，大家依照官方文档进行配置就可以了。

2.2页面配置#

刚才我们说到了页面创建的两种方法，当我们的页面创建完成之后就会发现，每个页面里边都会包含四个文件，例如index页面，就会包含： index.js、index.wxss、index.json、index.wxml，wxss对应的就是我们熟知的css文件，wxml对应了html，js和json就不用多说了。而这里的json文件，就是我们的页面配置文件，乍一看，依然有很多的属性，其实，仔细的看一下，就会发现，页面的配置，其实是和全局配置中的window，几乎一致。页面的标题，标题的颜色，背景色，等等，所以，只要我们熟悉了全局配置的window选项，那么页面的配置就没有问题。

2.3组件的创建和使用#

当页面中的一块效果频繁被使用到,那么做好的做法就是创建一个组件,哪里用哪里引入。在微信小程序当中，也可以创建组件。

微信小程序当中要创建组件使用组件，我们大致可以分为三个步骤，创建组件，引入组件，使用组件。在创建组件之前，首先我们要创建一个和pages平级的文件夹，用来专门放置组件，这要可以区别页面和组件，使我们的目录结构更加清晰。

这里我创建了一个components文件夹，用来放置组件，注意：无法在小程序开发者工具的根目录下创建目录，所以我们需要在本地找到当前项目文件夹，来创建一个components文件夹。
创建components目录之后，我们需要在这个文件中再创建一个目录，比如这里就叫做proList目录，

这时候，右键proList目录，可以看到选项，新建目录、新建Page、新建Component，一定要选择新建Component，不要选择新建Page，然后输入组件名，确定，系统就会自动帮我们创建出来四个文件。

我们来对比一下组件的json文件和页面的json文件有什么不同
这是组件的json文件

这是页面的json文件

可以看到，组件的json文件中，多了一个属性，component：true，这个属性就标明了这是一个组件。

那么组件创建完成了，接下来就是引入组件。
在要引入组件的页面的json文件当中，在usingComponents对象当中，定义一个属性名，属性名就是我们要使用的组件名，然后填写路径。

接下来，只需要在页面中使用这个组件，就可以了。

这就是关于组件的定义和使用。

2.4路由的配置#

关于路由的配置,我们在开始的时候已经提到了,在全局的页面配置当中的pages属性,就是小程序的路由配置,并且我们也说两种创建路由的方法,忘记的小伙伴可以去看一下。

需要注意的是，组件并不会添加到当前路由当中。

4.总结#

关于小程序的开发，个人认为，如果有vue相关的开发经验，那么对于小程序开发来说，更加容易入手。我们上面说到的只是冰山一角，很有很多地方并没有提及，例如小程序中使用UI框架，路由的跳转，小程序的内置组件，weui等等，那是因为一方面篇幅有限，而且个人也没有太多时间来非常详细的列举。另一方面，微信官方文档写的非常的详细，大家依照文档就可以很轻松的实现小程序的各种功能。
另外说一下，当你熟悉了小程序开发的时候，那么你就可以非常轻松的入手uniapp和taro这两个框架（前提是要有vue和react基础），进行多端发开，当然，更多是针对不同的小程序，例如支付宝小程序，头条小程序等。

小程序有很多地方做的非常的优秀（毕竟是我们中国人研究出来的东西），它有非常详细的官方文档以及报错机制，当我们页面当中有错误的时候，能够非常清晰的给出提示，帮助我们迅速找到错误。但是也有比较坑的地方，例如微信开发者工具经常会出现卡死的情况，又或者我们提到的全局配置当中的style属性，当我们想要使用第三方UI框架的时候，需要删掉stye： v2这个属性，否则会造成错误等。不过总体来说，个人还是非常喜欢小程序的，无论是从用户的角度出发还是从开发者的角度出发。

以上就是关于小程序的开发体验，这只是我个人的使用心得，希望能对刚刚接触微信小程序开发的小伙伴有所帮助，如果有错误，请大家提出指正。欢迎在下方讨论，交流学习。
（个人原创，不喜勿喷）；