前言#

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

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这个属性，否则会造成错误等。不过总体来说，个人还是非常喜欢小程序的，无论是从用户的角度出发还是从开发者的角度出发。

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

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

关于Android开源库分享平台，（GitClub）微信小程序的开发体验
七八月份的深圳一直在下雨,总有人说雨天适合窝在家看书,对于程序开发者来说更是难得的学习机会.我们502工作室的小伙伴利用这个时间学习了一下微信小程序开发,并上线了一个GitClub小程序,目前功能有些 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
java uniapp旅游微信小程序的开发hbuilderx
旅游行业,随着经济的快速发展,呈现出一片欣欣向荣的画面,特别是在这两年的发展之中,各行各业都在互联网的快速发展中展现出了运用技术手段来解决传统的线下宣传的弊端,这也是必然的趋势.虽然今年因新冠病毒疫情 ...
微信小程序云开发体会——总结软件工程导论大作业
微信小程序云开发体会--总结软件工程导论大作业前言第一次接触具体难题好用的技术开发完之后的体会无法不热爱更多前言可能大家完成这次作业都会选择比较擅长的领域--网页前后端.这的确是比较稳 ...
基于微信小程序云开发的校园类平台
这期给大家介绍一个我压箱底的项目,一个集二手市场.兼职发布.失物招领.代取快递等功能为一身的校园类平台. 前端使用ColorUI,后端使用微信小程序云开发. 现在已经上线发布,并且长期运营维护. 大家 ...

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

目录

前言#