关于微信小程序的开发体验
目录
前言#
一场突如其来的疫情,打破了许多人的计划,也让许多公司无法正常运转,没有办法,只能在家里办公(真是有人欢喜有人忧啊),正所谓逆战之中求生存。最近做了一个微信小程序的项目,在此分享一下关于小程序开发的心得。
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这个属性,否则会造成错误等。不过总体来说,个人还是非常喜欢小程序的,无论是从用户的角度出发还是从开发者的角度出发。
以上就是关于小程序的开发体验,这只是我个人的使用心得,希望能对刚刚接触微信小程序开发的小伙伴有所帮助,如果有错误,请大家提出指正。欢迎在下方讨论,交流学习。
(个人原创,不喜勿喷);