uni-app微信小程序——商城（2）

在上一篇文章中，主要介绍了如何在HBuilderX上创建uni-app项目，和如何把项目运行在微信小程序工具上。

这篇文章来介绍一下uni-app项目具体的语法使用；如何创建一个新的页面；如何使用第三方前端插件Vant Weapp；如何使用分包加载等等。接下来一个个逐步讲解吧~

（1）创建整体页面架构

就如微信小程序一样，我们需要默认启动页，创建页面路径，创建底部tab栏导航等等。如下图：

这些统称为全局配置，需要在pages.json文件中配置。Tips：具体内容点击左侧链接查看。

属性：“pages”，设置页面的路径和窗口表现，我们要把每一个新创建的页面，都需要写进这里面，当然也可以使用分包加载，一会再说这个。在“pages”中，有两个属性：“path”和“style”，“path”配置页面路径，“style”配置页面的一些窗口表现。

属性：“globalStyle”，设置应用的状态栏、导航条、标题、窗口背景色等等。

属性：“tabBar”，配置指定bar栏的表现，以及tab切换时显示的对应页，需要注意的是，其属性“list”是一个数组，只能配置最少2个，最多5个bar，tar按照数组的顺序排序。

当这些全局配置完成后，我们就已经基本完成了小程序架构的搭建。

（2）使用第三方组件Vant Weapp

首先需要在根目录下创建一个wxcomponents目录，在目录下创建vant-weapp文件，然后在Vant Weapp官网下载最新的zip压缩包，解压后，把里面的dist下的文件拷贝到vant-weapp文件下，如图所示：

然后，我们需要在pages.json中的属性“globalStyle”中引入Vant Weapp组件，需要注意的是，你使用哪个组件就需要引入哪个组件（比较麻烦），如下图所示：

接下来就是在具体的页面中使用刚才引入的具体组件了。如下图所示：

使用第三方组件的好处能够更快的实现页面功能的设计与开发，组件封装好的方法，提供了更为便捷的操作，比如下拉框，我们只需要给组件提供下拉内容的数组，然后写入组件中，组件就可以为我们实现下拉的样式。

当然在使用Vant Weapp组件的时候，他们的官方文档还是基于微信小程序语法设计说明的，如果要在uni-app中使用，还需要改变它的语法格式，请参考uni-app微信小程序——商城（1）中的内容。

（3）使用分包加载

1）为什么使用分包加载？

微信小程序限制了代码包不能超过2MB，以方便小程序启动速度，但是在某些开发情况下，尤其是需要加载很多的图片的情况下，小程序代码包基本都会超过2MB；小程序会由某几个功能部分组成，通常这几个功能部分之间是相对独立的，但是它们之间也会有一些相关联的逻辑关系，所以为了小程序加载速度，小程序提供了分包加载的方法，默认会下载主包并启动主包内页面，然后当需要到某个功能部分时，才会加载这个功能对应的分包。

2）如何使用分包加载？

需要在pages.json文件下的属性“subPackages”中配置。

分包加载的目录结构和“subPackages”属性中配置如下内容：

其中属性“root”是相对路径，子包的根路径。属性“pages”配置子包由哪些页面组成。

属性“preloadRule”是分包预加载配置，配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

到这里，我们微信小程序商城的整体架构搭建已经基本完成，后续将会具体介绍每个功能模块的设计与实现。本文章中如有一些不正确或者有缺陷的地方，还望斧正，谢谢~