gulp 构建小程序

截止目前为止自己开发过不下十款小程序。算是有些经验其实对于一个熟悉了前端开发的工程师seo优化其实对于一个熟悉了前端开发的工程师小程序的入门会非常简单无非是要多熟悉些API和小程序的开发工具。本质上和写一个H5页面没有什么区别。

做的越多就越觉得其实每个小程序都差不多。慢慢的就能够抽出一些通用的代码作为公用模块。但是小程序的一个限制就是代码必须在项目的根目录下。这个是由于小程序框架的限制如果在根目录之外require模块的时候会找不到对应的文件因为路径会解析失败。

按照流行的套路把生产环境与发布环境隔离。我们需要新开辟一个空间专门在这个地方写代码然后需要用到的公共组件都从同一个地方取并且生成最终可以在小程序上运行的代码。这样对于公共组件我们就可以只用维护一份代码。

具体实现起来会遇到一下几个问题

common目录下的代码最终会构建到每个项目中如App1/common。App1/pages/index/index.js 需要依赖common目录下的模块就需要写很长的相对路径（小程序只支持相对路径）。所以我们建立一个规则凡是依赖common目录下的模块就直接写common/xxx.js由构建工具来解析路径。

组件之间的依赖用相对路径

由于小程序不像vue一样三个文件整合在一起而是分开了。但使用组件的时候需要将这三部分分别require/import一次显得有点繁琐尤其是依赖的组件有点多的时候。依赖构建工具一旦发现组件下有wxml与wxss文件则自动同步到项目下并且在项目的wxml注入相应的依赖。

调用组件的方式还是太繁琐有时候我们需要直接复用页面。直接从common目录下拷贝一个页面到项目中并自动在app.json插入配置。

标签： 程序组件模块common