搭建适合前端开发的小程序架构！（搭建适合前端开发的小程序架构图）

搭建适合前端开发的小程序架构！（搭建适合前端开发的小程序架构图）

weapp

搭建适合前端开发的小程序架构！

让你远离微信那个辣鸡IDE，直接用你的编辑器来开发！ES6，Promise...嗯，统统都用上吧！

很惭愧，就做了一点微小的工作，谢谢大家。

安装项目依赖

$ npm install

使用

开发阶段

执行如下命令

# 启动监视$ npm run dev# 选择需要 watch 的模块# 开始编译并 watch 修改的文件

通过微信Web开发者工具打开项目模块根目录下dist文件夹，预览

可以通过任意开发工具完成src下的编码，gulp会监视项目根目录下src文件夹，当文件变化自动编译

创建新模块

我们可能需要开发多个小程序，多个小程序就需要创建多个项目。现在，我们把多个小程序整合在一个项目里，通过模块的方式来管理。

所有模块名可在 config/config.json 文件中管理。新增或者删除模块后，请修改该文件的 modules 字段。

执行如下命令

# 启动生成器$ npm run module# 输入模块名# 自动生成...

新建的模块内置了小程序的部分通用配置，以及一个 index 页面。这样我们就不需要每次都得执行一大堆复制粘贴删除操作了。

模板内容请参考：generate-weapp-module

创建新页面

执行如下命令

# 启动生成器$ npm run generate# 完成每一个问题# 自动生成...

由于微信小程序的每一个页面有特定的结构，新建工作比较繁琐。可以通过此任务减少操作。

生产阶段

执行如下命令

# 启动编译$ npm run build

生产阶段的代码会经过压缩处理，最终输出到dist下。

同样可以通过微信Web开发者工具测试。

文件编译方式

我们可以直接在模块页面中写支持编辑器语法高亮的 xml、css、sass 文件，通过启动监视器可把该转换成小程序支持的 wxml、wxss 文件。

- js => js- xml => wxml- {css, scss}. => wxss- json => json

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。